This device is not compatible.
PROJECT
Build an Image Sharing App with MERN Stack
We’ll learn how to create a full stack image sharing application using MongoDB, Express, React, and Node.js.
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 app with the login and register functionalities. The application will allow users to upload and share image posts from their accounts. It will also allow users to follow and unfollow one another.
We’ll use the Express framework for Node.js to develop the back-end API to interact with the MongoDB database to fetch and store data. After setting up the backend, we’ll implement the front-end components and add the login/register and image sharing functionalities. The finalized product will fetch the data from MongoDB via the Node.js server and display it in the React functional components.
The components in the application are styled with pre-written CSS to provide the initial template of the application.
Project Tasks
1
Introduction
Task 0: Getting Started
2
Create a Rest API Using Node.js
Task 1: Set up the Node.js Server and MongoDB Connection
Task 2: Create a User Model
Task 3: Create a Post Model
Task 4: Create Register and Login Routes
Task 5: Create User Routes
Task 6: Create Post Routes
3
Develop the Login and Register Pages
Task 7: Create Reducers to Set up the Initial State
Task 8: Implement the Login Component
Task 9: Implement the Register Component
4
Develop the Home and Profile Pages
Task 10: Implement the Header Component
Task 11: Implement the NewPost Component
Task 12: Implement the Post Component
Task 13: Implement the UserSearch Component
Task 14: Implement the Body Component
Task 15: Implement the ProfileSection Component
Task 16: Develop the Profile Page
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.