Developing an Ecommerce Web App using MERN stack — Arunabhstore App

#nextjs #mern #webdev #ecommerce

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.

In this blog, I will try to answer the reasons behind going with the options that I went with while developing ARUNABHSTORE. If you are a beginner developer, do give Blogaroo — Developing a blogging platform using MERN stack a read as I have discussed in details about the road map to learn a lot about MERN stack. As a bonus, that blog also discusses about Next.JS

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

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

If you are interested, you can know more from GITHUB.

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 then 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 -

For starters, it’s a JavaScript runtime environment. And being JS, there was not one-second thought for me. It had to be Node.JS. Moreover, with Express.JS which as stated in their very own WEBSITE, is a Fast, unopinionated, minimalist web framework for Node.JS. And as the frontend is also written using a JS framework, it would be very easy to build the REST APIs while being in the same paradigm of language, i.e. JS. Having said that, now I’ll answer the question to why I choose MongoDB.

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 -

The reason is very similar to “why Node.JS?”. MongoDB is a database that stores the data in the form of JSON (JavaScript Object Notation) like documents. And again, JS shines. As MongoDB stores data in an identical format to what we get as a response from REST APIs, it was like the backend, frontend and database, are not any different from each other at all. And so, the developing process becomes much painless. And this whole reason also answers the question why MERN stack, too. And while we are on this subject, Node + MongoDB + Mongoose is just a breeze. As their own WEBSITE quotes, Mongoose is an elegant MongoDB object modelling for Node.JS. And voila! This is why MERN.

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"
 }
}