Code: Github repo
This Project involved building a Reddit reader website using the MERN stack (MongoDB, Express, React, Node.js). The name Rreddit 444 was influenced from the Linux command chmod where the argument 444 denotes a read only file. The Project started as a hands-on experience with React.js library for Frontend Web Development but soon converted into a full stack project with login backend created using Node.js Express and MongoDB Atlas service used for the MongoDB NoSQL database. The content for the website is retrieved using the Reddit API. To make the User Interface intuitive, this project uses CSS Bootstrap 4. The state on frontend is managed using Redux store which made it easier to manage data consistency between React components.
Below are some screenshots of the website:
The Website can also be viewed using the link in the Demo Section at the bottom of this page.
Usage
The Navigation bar contains four buttons named Best, Hot, New, and Top used to filter Reddit posts. The r/ button next to the filter buttons is used to control Subreddit name to view posts for and the number of posts. On the right side of navigation bar, the Register and Login buttons can be used to register a new user and login page for the user respectively. The body of the webpage contains posts contained in boxes. The post also shows any media if available including images, gifs and videos. At the bottom right corner of each post, the comment icon can be used to toggle comments.
Tools Used
- HTML5
- CSS3
- Javascript
- React.js
- Redux
- Node.js with Express
- MongoDB
Demo