Rebbit: a clone of Reddit

Assignment

• Build a demo version of the Reddit feed. It should show a list of posts with a search bar that can filter the posts by title. Posts should show a title, body, subreddit name, and vote count.
• Use this dummy data api to fetch posts, treating the first "tag" on the post as the subreddit name.
• Use either vanilla React or Next.js, but use Typescript either way.
• Use vanilla CSS, TailwindCSS, or the Ant framework for styling. You can either try to match Reddit's design, or do your own take on it.

Setup process

Initialize a Next.js project with default options:

npx create-next-app@latest

For styling, add Ant and configure for App Router as instructed.

npm install --save antd @ant-design/cssinjs @ant-design/icons

Add the useMediaQuery hook to adjust to different screen sizes.

npm install --save usehooks-ts

Add infinite scroll.

npm install --save react-infinite-scroll-component

Add testing dependencies and configure Jest according to the docs.

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom whatwg-fetch

Development

Run a development server on localhost:3000.

npm run dev

Run tests.

npm run test

Deployment

I use Vercel for automatic deployments from GitHub to rebbit-drab.vercel.app.