Let’s build a simple E-Commerce website using MERN stack (MongoDB, Express, React and Node) where users can add items to cart, make payment and place orders.
Hello friends! So, I am starting a new article series based on MERN stack and this article is the first part of that series. This series will be completely focused on MERN stack (MongoDB, Express, React and Node). Previously, I have made two series which were a social media website and job search website but both of them were built on Django framework and we used Django templating engine to create the frontend for our applications at that time.
But, now we are using Full Stack Javascript to design and develop our applications. This means we would be using Node, Express and MongoDB to design the REST APIs and then we would use those APIs in our React frontend. So, it would be very beneficial since it would teach you the concepts of REST API and will help you to integrate these frameworks.
So, in this first part, we would talk about the basics of the project and also set the project up.
So, basically, it would be a simple E-Commerce website. It would not have all the bells and whistles of a complete modern E-Commerce website since this is aimed at learning and understanding how everything actually works. We can surely add features on top of this project to make it better. We would keep our design simple and minimal on Frontend side. We would not be dealing with CSS much as our focus would be on understanding how we deal with APIs on the frontend and will focus on the basics part.
We would use React Bootstrap to design our React Frontend minimally. We aim to make a working e-commerce website where everything functions correctly.
So, the features we would be having in the application that we would be building are:-
- Authentication using JSON Web Tokens (JWT).
- Option to add, edit, view and delete all the items in our store.
- Option to add items, update the number of items or remove items from the cart.
- Display the total bill of the cart and update it as soon as the cart is updated by the user.
- Keep track of stock in the store and display an Out of Stock message if stock is not available.
- Using Cookies to store the JWT so that we only allow logged-in users to buy items.
- Option to pay and checkout thus creating order and emptying the cart.
So, these are the basic features we would be having in our application. Now, let’s get familiar with the tech stack we are going to use for building this application.
#expressjs #mongodb #nodejs #javascript #web-development
