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.

Build an Image Sharing App with MERN Stack

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 logo

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!