Skip to content

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

License

Notifications You must be signed in to change notification settings

cmacdonnacha/react-reddit-search

Repository files navigation

React Reddit Search


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

contributions

Includes

 

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

Searching Demo


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

Sorting Demo


📃   Next and Previous pagination

Pagination Demo


📞   Mobile friendly / Responsive design

Responsive Design Demo


🔨   Error Handling

Error Handling Demo


♿   100% Accessability Compliance (via Lighthouse)

Accessability Compliance Screenshot


🧪   Unit & Integration tests

Tests Screenshot


🚢   Continuos Integration & Deployment with Github Actions

CI/CD Screenshot

 

License

Licensed under the MIT license.