React Reddit Search

This project shows usage of the Reddit API using ReactJS, Redux Toolkit and Typescript 💻

Includes

• Redux Toolkit
• Typescript
• Styled Components
• Styled Icons Pack
• Jest
• React Testing Library
• ESLint
• Prettier
• Github Actions CI/CD
• Source Map Explorer to analyze code bloat

 

Live Demo

Check out the live demo

 

Set up

1. git clone https://github.com/cmacdonnacha/react-reddit-search.git react-reddit-search
2. cd react-reddit-search
3. npm install
4. npm start
5. Go to http://localhost:3000/react-reddit-search
6. That's it! See the Available Commands list below for more.

 

Available Commands

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

npm test

Runs unit and integration tests in watch mode. Use npm run test:no-watch to run tests without a watcher.

npm run test:no-watch

Runs unit and integrations tests without a watcher.

npm run test:coverage

Displays the code coverage within the console and also generates a coverage folder.

To view the code coverage report in your browser open the index.html file within the coverage/lcov-report folder.

npm run test:open

Runs end-to-end tests and opens a window to see the results running on your machine.

npm run lint

Runs the ESLint typescript code lint checker. Running npm run lint:fix will automatically fix any lint errors where possible.

npm run build

Builds a production version of the app inside the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run analyze

This will run a production build and then analyze the output using source-map-explorer which analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from.

 

Features

🔍   Search subreddit posts

🔥   Sort by Hot, New, Top, Controversial & Rising

📃   Next and Previous pagination

📞   Mobile friendly / Responsive design

🔨   Error Handling

♿   100% Accessability Compliance (via Lighthouse)

🧪   Unit & Integration tests

🚢   Continuos Integration & Deployment with Github Actions

 

License

Licensed under the MIT license.