DEV Book store

Overview of My Submission

So it is an online e-commerce book store as I did not have any name idea so I put DEV Book store.

Submission Category:

E-Commerce Creation

Link to Code

GitHub logo codewithpom / mongo-ecommerce

A Nextjs e-commerce site with mongodb

A Nextjs starter template on Gitpod

This is a Learn Next.js template configured for ephemeral development environments on Gitpod.

Next Steps

Click the button below to start a new development environment:

Open in Gitpod

Get Started With Your Own Project

A new project

Click the above "Open in Gitpod" button to start a new workspace. Once you're ready to push your first code changes, Gitpod will guide you to fork this project so you own it.

An existing project

To get started with Next.js on Gitpod, add a .gitpod.yml file which contains the configuration to improve the developer experience on Gitpod. To learn more, please see the Getting Started documentation.

Additional Resources / Info

So now let's come to the real topic how I built it so first of all let me tell you the resources and frameworks that I used

  • Next.js
  • Node.js of course
  • Typescript Just to make it sophisticated and so that I have to type less and intellisense will help ๐Ÿ˜‚.
  • Nodemailer To send emails and etc you will know below
  • nextjs-progressbar for the blue loading progress bar on the top (copied from GitHub)
  • react-use-cart For managing cart as I do not know how to create custom react hook ๐Ÿ˜‚.
  • stripe Ya who is even going to see the bank docs for payment ๐Ÿ˜‚.

Now comes the boss
Iron man 2 entrance scene

So now that is too much about the resources now first I will give my review over MongoDB and it is that I had never thought that database can be much easier as well as I hated SQL earlier and used JSON files and they are not remote ๐Ÿ˜”, but MongoDB was JSON and remote so I could use both in my server as well in compass.

So now here are some pics

So new let's break it down and see how it works
So let's start from the front page
So the products are in a component named Card.tsx and they are bootstrap cards with an awesome hover effect that I got from codepen ๐Ÿ˜‚. So now let's see more so while making this project I learnt about getServerSideProps docs so it runs on the server and then fetches the products from the database and then pass them as props. In the image I have also added a blur effect until the image is loaded using next/image docs I got this idea after seeing the other e-commerce submissions where there did not load quick and it looked ugly ๐Ÿคฎ. I had very less days as I started on 1st January because I was too sick before that, but I also saw other submissions but they were vulnerable and got hacked ๐Ÿ˜ž that is why I did not let vulnerability in my code ๐Ÿ˜Ž. Now each document my collection looks like

    _id: "Id",
    name: "Name of the book",
    stock: 14, // example it is the number of books in stock and decrease using my webhook triggered by stripe
    image: "Image url of the book",
    author: "Author of the book",
    description: "Description of the book"

ya I know some of you would have got bored and even me so I am going to write a full-fledged series on how to make this site from the starting if I win.

Ok so now let me some of the features

  • Search ya the search box works, try it
  • Email confirmation I saw in every e-commerce submission that there was no checkout and only one had checkout but did not take the address how will you even deliver it and no confirmation email but I added it.
  • Stock system Yes if something is out of stock you cannot order it as I check it while creating the session id as one of the submissions had this problem it had -8 in stock.
  • Cart Yes I know this is very common but while making it with stripe checkout was hard and I was using mongoDB and stripe for the first time but docs (the savior of programmers) helped me.

Hope you all liked it.

Wait, Wait I have one more request, comment your thoughts below and if there is someone from mongoDB or DEV please comment anything below so that I can show my friends that even great people read my blog ๐Ÿ˜Ž.

Bye bye.