Responsive Instagram-like Social Media Website (Express.js, ReactJS, Bootstrap, MongoDB)
Mia Vrhovnik / June 2023 (142 Words, 1 Minutes)
FULL SOURCE CODE:
- The project is a Stackoverflow-like forum website that allows users to post questions and answers, as well as comment on them.
- I used the MVC design pattern to structure the project.
- I focused on the back-end and simplified the front-end to a minimum to learn more about Express.js and MongoDB.
- The front-end is built with Bootstrap, HTML, CSS, and JavaScript.
- User passwords are hashed and salted with bcrypt.js.
Register
A simple registration form with validation. The user is redirected to the login page after successful registration.
Login
A login form similar to the registration form. The user is redirected to the home page after successful login.
Post an Image
The user posts an image by setting a title and selecting an image. The user is redirected to the home page after successful publishing.
Images Page
The images page displays all the images in the database, each user can like an image once as well as report it (user ID gets saved and verified).
Image Details Page
The image details page shows the amount of views, likes, author and the date of publishing. Each user can comment on the image.
Post a Comment
When the user clicks on the comment button, a comment form appears. The user can post a comment by clicking on the ‘submit’ which also hides the form.
Profile Page
The user can use the profile page to see their metrics (number of images, combined likes) and profile details.