This device is not compatible.
PROJECT
Build an Image Sharing App with MERN Stack
In this project, we’ll build an image sharing app using Node.js, Express, MongoDB, and React. The app includes features such as user authentication, image uploads, and post management. Additionally, an LLM-powered chatbot is integrated to answer questions about the project using the actual project documentation.
You will learn to:
Use the functional components of React.
Use Redux and React Hooks to develop the application.
Use the Axios library to connect React components to the Node.js server.
Connect the Node.js server to store and retrieve data from MongoDB.
Use MongoDB to store and retrieve data through the Mongoose library.
Use React state management Hooks to share data between functional components.
Skills
Web Development
API Development
Web Frameworks
REST API
Prerequisites
Basic understanding of React components and state
Basic understanding of Node.js
Basic understanding of MongoDB
Basic understanding of JavaScript
Technologies
React

MongoDB
Node.js
Express
Project Description
In this project, we’ll build an image sharing application with login and registration functionalities. Users can upload and share image posts from their accounts and follow and unfollow other users.
We’ll use Express and Node.js to develop the backend API, which will interact with a MongoDB database to fetch and store data. After setting up the backend, we’ll implement the frontend using React, adding user authentication and image sharing components. The finalized application will retrieve data from MongoDB via the Node.js server and display it using React functional components.
The application will include complete user authentication and profile management features. Users will be able to:
Register and log in using their credentials.
Manage and update their username, email address, and profile picture.
Upload and manage images and posts.
The project integrates an LLM-powered chatbot using Google Gemini to enhance functionality and user engagement. This intelligent assistant:
Allows users to ask questions about the project.
Uses retrieval-augmented generation (RAG) to fetch relevant portions of the project documentation.
Delivers accurate, context-aware answers based solely on the embedded content.
The application UI is styled using prewritten CSS to provide a clean and consistent design.
Project Tasks
1
Introduction
Task 0: Get Started
Task 1: Launch the Development Environment
2
Create a Rest API Using Node.js
Task 2: Get the API Key
Task 3: Set Up the Vector Store for AI-Powered Chatbot Responses
Task 4: Set Up the Node.js Server and MongoDB Connection
Task 5: Create a User Model
Task 6: Create a Post Model
Task 7: Create Register and Login Routes
Task 8: Create User Routes
Task 9: Create Post Routes
Task 10: Create Routes for the Chatbot
3
Develop the Login and Register Pages
Task 11: Create Reducers to Set Up the Initial State
Task 12: Implement the Login Component
Task 13: Implement the Register Component
4
Develop the Chatbot Page
Task 14: Implement the Chatbot Component
5
Develop the Home and Profile Pages
Task 15: Implement the Header Component
Task 16: Implement the NewPost Component
Task 17: Implement the Post Component
Task 18: Implement the UserSearch Component
Task 19: Implement the Body Component
Task 20: Implement the ProfileSection Component
Task 21: Develop the Profile Page
Congratulations!
Subscribe to project updates
Atabek BEKENOV
Senior Software Engineer
Pradip Pariyar
Senior Software Engineer
Renzo Scriber
Senior Software Engineer
Vasiliki Nikolaidi
Senior Software Engineer
Juan Carlos Valerio Arrieta
Senior Software Engineer
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.