Reddit Timer App

Table of Contents

Click to expand

• Introduction

• Environment Variables

• Credits

Introduction

Welcome to Reddit Timer App where you can search for any existing Reddit subreddit and it will generate heatmap based on the results. The data comes from Pushshift api and it contains 300 submissions from last year to now, sorted by the score (Reddit's upvote system). It is possible to click on each square in the heatmap and view some information about submissions, you can also sort them by comments, date and score. This project was heavily inspired by free plan of profy.dev, where you can learn professional dev workflow and more. It's built with next.js and features libraries like framer-motion for sorting animations, styled-components for styling.

Environment variables

Name	Description	Example
PUSHSHIFT_URL	pushshift API uri	https://api.pushshift.io/reddit/search/submission/

Deploy this yourself

• Clone to your computer.

  • clone this repo

  • cd reddit-timer-app

  • npm install

• Create .env.local in the root directory of your project, add env variables required.

• Start a dev server

  • npm run dev

• Run integration tests

  • npm run test

• Run e2e tests

  • npx cypress run
  • npx cypress open

Credits

• Homepage Illustrations

  • lukaszadam

• inspired by

• pushshift

• vector art

Known issues

There might be a scenario where one heatmap square has 20+ submissions (for example when searching for "web") and as you'll notice alot of these will have the same title, however they aren't duplicate submissions, the list uses submission.id as key and these are all unique submissions, apparently Reddit had a bug last year where it would post one submission more than once, it is only the case for lesser known subreddits.