A web app that displays the latest highly-rated posts from educational subreddits (topic-based forums on Reddit), built using React, Redux, and React Router.
Take a look: https://redducational.netlify.app/.
Reddit JSON API data is fetched from specified subreddits upon app load/refresh; filtered, merged, and sorted to create a custom feed; dispatched to the Redux store for later use; and ultimately rendered within components. Post listings can be filtered by category or search term.
Relevant code: Reddit API request functions; post listings data functions; PostListing component; PostListingItem component.
When a post detail page is visited, post data is retrieved the Redux store (originally fetched from the Reddit JSON API upon app load/refresh) and used to populate the primary content. Secondly, component rendering triggers the retrieval of comments JSON data (if not already fetched) and rendering of the best top-level comments (excluding any with a negative score).
Self posts (text) and external link posts are both supported. react-markdown and a custom link rendering function (to open links in a new tab) are used to render markdown formatting within API data (self text and comments).
Relevant code: Reddit API request functions; post detail data functions; PostDetail component; Comment component.
The Promise.allSettled() method is used to load subreddit post summary data. This ensures that:
- Requests are made asynchronously/concurrently, to improve loading performance
- The custom post listings feed is only constructed after all requests have resolved
- A single failed request doesn't prevent loading of other subreddit post data
If an API request does fail, then fresh request data is substituted with local, static JSON data (in an identical format) containing summaries of the top posts of all time for the subreddit.
Relevant code: post listings data functions; Reddit API request functions.
Front-end URL routing is implemented using React Router v6, utilising static and dynamic paths (params, e.g. post IDs) to render the correct components while incorporating the original post slug within post detail URLs.
Relevant code: routing configuration.
Over 30 tests are implemented using Jest and React Testing Library, incorporating the Redux store, routing, and mocked Reddit JSON API requests (using Mock Service Worker).
Relevant code: test setup files; various .test.js files.
- React v18
- Redux
- React Redux
- React Router v6
- react-markdown
- Jest
- React Testing Library
- Mock Service Worker
- Clone/download a local copy of this repository.
- Using the command line, navigate to the project root directory (which contains the
package-lock.jsonfile) and runnpm installto install package dependencies. - Optional: using the command line, run
npm testin the project root directory to run all test suites and then use Control + C to exit the test runner once complete (this may take up to ~20-30 seconds). - Using the command line, run
npm startin the project root directory to start the React app. - The application should launch in your browser, but otherwise can be accessed at http://localhost:3000/.
Yes! A production version of the website can be found here: https://redducational.netlify.app/.
This is one of the practice projects that I completed as part of the Codecademy Full-Stack Engineer career path.
I planned and built it almost entirely independently; only the key requirements (core functionality and technologies) and a few links to documentation were provided. Some aspects were quite challenging, requiring a lot of reading through documentation and Stack Overflow!
In particular, I now have significantly more experience with:
- React, using functional components and props
- Redux, including React Redux and "thunks"
- React Testing Library, including the integration of Redux, React Router, and request mocking (via Mock Service Worker) within test environments (like in the real app!)
I'm not currently working on further improvements/features.