Developing an Ecommerce Web App using MERN stack — Arunabhstore.in

Do you want to develop an Ecommerce Web App?

(Develop a web application complete with backend and frontend / Develop a full-stack web application / Develop a MERN stack website)

This blog will help you paint a picture, why to choose which tools while learning to develop an Ecommerce Web App.

www.arunabhstore.in

So, let’s first talk about the actual Ecommerce Web App that we are going to refer to in this blog: www.arunabhstore.in

What is Arunabhstore?

It is an e-commerce web-app built with MERN stack. I developed it just as a hobby. This is a completely functional web-app where one can visit, register, purchase and make a transaction with demo products. Needless to say that this web-app is only for demonstration purpose with all functionalities baked in and in working state. If you wish to experience this web-app, I encourage you to go ahead and make a demo purchase with the demo credit card provided in the checkout section in cart.

Technical Specs -

As the title says, I’ve built this using MERN stack, which means MONGO, EXPRESS, REACT & NODE

BACKEND

  • Node.JS with Express.JS
  • Mongo DB with Mongoose

FRONTEND

  • React.JS

So, why React.JS

Before getting started with this project, I had done some work using React.JS for some small projects. So, I was very much familiar with the framework. I did consider other options like Angular & Vue, but I felt more comfortable with React.JS by that time. And what React.JS brings to the table is evident enough why one would want to go the React.JS route. It’s fast, easy to manage the states, and a lot more. So that is why React.JS. And frankly, I just really wanted to use React.JS 😅.

So that was my reason for going with React.JS for the frontend in a nutshell. If you are a beginner developer and most if it didn’t make sense to you, don’t worry. Just read the Road-Map in THIS BLOG. I have discussed in details how you could go from a complete beginner to a good front end developer, in fact, a full-stack MERN developer.

So that was all about the frontend part. Now you can be one of these two persons -

  • Start building the client app using React.JS and team up with a backend developer and hand over the backend part.
  • OR
  • You want to develop the backend yourself.

If you the former, then it’s time for you to get started with developing your Web App. And I hope this blog helped you find the answers you were looking for. And I wish you very best of luck with your project. 😇 Now if you are later than follow along, I will explain why I went with Node.JS as the backend and MongoDB as the database.

So, why Node.JS?

If you have read THE OTHER BLOG that I mentioned earlier, then the answer is the same which I am simply going to go ahead and quote here -

Why MongoDB?

Just like I said for ‘why Node.JS?’, if you have read THE OTHER BLOG that I mentioned earlier, then the answer is the same which I am simply going to go ahead and again quote here -

Conclusion

What I would like to add here is that there is not anyone perfect reason or explanation to why you should use MERN stack, or in that matter, any stack. There are plenty of examples out there in the ocean of successful products that use completely different stacks. In this blog, I have discussed MERN as that is what I choose to proceed with after doing my research about different frameworks and their cons & pros. And frankly, I am very happy with the outcome what I got after finishing the project. And I sure do believe that whatever stack I would have chosen to proceed with, the outcome would have been very similar. What is important here is that whichever stack you are using, you should cover some really important points while developing the product. Some of them being scalability, agility, atomicity, responsiveness. While the backend should be as much lean & robust as possible and must be able to handle on-demand high traffic, the frontend must tell the users a story and at no point of the story, the user should feel like they are losing interest. And this holds for any web application, not just an Ecommerce App.

So this blog is more about building web applications in general and not specifically just an Ecommerce App. The reason I choose Ecommerce App to write this blog as that project was readily available at my disposal at the time of writing this blog. And everything that I have said completely holds for an Ecommerce App too. So there you go. I hope I was able to answer your questions and helped you decide as to what stack you can use while thinking of developing an E-commerce App, or as a matter of fact, most web-based applications.

Do go ahead and let me know in the comments what do you think about this blog. Feel free to reach out to me at my public mail id.

BONUS

For those of you who are curious, here are the dependencies that went into developing ARUNABHSTORE

(I have copied the list of dependencies directly from the package.json file for the following)

BACKEND

{
// other stuff

"dependencies": {
"body-parser": "^1.19.0",
"braintree": "^2.22.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-jwt": "^5.3.1",
"express-validator": "^5.3.1",
"formidable": "^1.2.2",
"jsonwebtoken": "^8.5.1",
"loadash": "^1.0.0",
"mongoose": "^5.9.7",
"morgan": "^1.10.0",
"uuid": "^7.0.3"
}
}

FRONTEND

{
// other stuff
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"bootstrap": "^4.4.1",
"braintree-web-drop-in-react": "^1.1.1",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"query-string": "^6.12.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1"
}
}

By Arunabh Arjun
www.arunabharjun.com

A product manager and a skilled full-stack developer. Know more @ www.arunabharjun.com