Image Post Feed using MERN Stack

By Pedapati Raja Stuthi Paul

A Full Stack web application using MERN Stack that allows users to upload photos and view those of others.

In this code packet, we will learn how to create an image post feed using MERN Stack.

Requirements :

- Node 

- MongoDB

Packages used in this packet 

Client Packet 

- axios

- react

- react-router-dom

Server packet

- express

- mongoose

- cors

- dotenv

- morgan

- bcrypt

- multer

- path

- lodash

- jsonwebtoken

Installing Packages required for the project

For Client Packet 

 

npm i axios
npm i react react-router-dom 

For Server Packet

npm i express
npm i mongoose 
npm i cors dotenv path 
npm i morgan multer bcrypt
npm i lodash jsonwebtoken

Pages

1. Login Page (/login)

The login portal is displayed on this page.

2. Register Page (/register)

The register portal is displayed on this page.

3. Home page (/)

The image post feed is displayed on this page.

4. Create Post Page (/create)

This page contains the form for uploading the post.

 

How to Run Code Packet

Open the terminal and navigate to server folder and enter the following command to run the server 

node server.js

Open a new terminal and navigate to the client folder and enter the following command to run the app

npm start

The server runs on localhost on port 5000 and the web application runs on the port 3000 localhost.

 

Login Page

Home Page

Create Post Page