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

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

• MongoDB
• Atlas Search

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.