Create a Photo Gallery App Using the MERN Stack

Work with image uploads and serve them to the client

In this article, we will build a photo gallery app using MERN stack. It may seem simple, but by building this app you will learn:

1. How to upload and serve images or any other file and restrict it to a specific file extension
2. How to restrict file upload size
3. How to get server errors in the redux store and display them on the front-end
4. How to avoid returning un-necessarily large data from the server
5. How to deploy client and server code on the same server to run it on the same port

So Let’s get started.

We will be using MongoDB for storing photos, so install the MongoDB database on your local machine.

Check out this article for step by step guide to install it.

We will be using create-react-app to initialize the project.

Create a new project by running:

create-react-app photo_gallery_app

Once the project is created, delete all files from the src folder and create index.js, styles.scss files inside the src folder. Also, create components, utils, actions, reducers…