This project is hosted on Render’s free plan. That means it takes around 30 seconds to load. I took on this project to learn how to code an E-Commerce site from scratch.
It doesn’t include any real transactions, but it does include:
Authentication – this allows users to create and login to their accounts.
Products – there are a list of products themed around devices and stationery. They let users add them to their shopping cart.
Shopping Cart – Once satisfied, users can check out.
Categories – Each product is assigned a category. Each category has its own page that users can browse.
Admin Dashboard – Users with the role of admin can access the admin dashboard and manage the site from there.
Tech I Used:
This project was mainly to help learn the MERN stack. The technologies in this project include:
React – for the frontend framework. It let me dynamically display content from the database.
Node.js – handles the backend.
Express.js – the backend framework I used. It’s designed to work with Node.js, and it handles the more advanced programming involved with this site, such as authentication and routing.
MongoDB – is the database I used. It stores user and product information.
Mongoose – is how I access the data in the database.
Process
I started with the backend, doing the set-up that is necessary for the project to work. From there, I started setting up routes, controllers and models. These would be how I create the products for the website, as well as how to retrieve them.
There would likely be errors along the way, so I created an error handler middleware that helped manage any errors that would be thrown. It kept things neat and organised.
An authentication middleware was also necessary to allow users to login should they provide the right login details. It also helped protect user passwords when stored to the database.
One of the more difficult parts of this server-side code was keeping on top of the code. There were a lot of moving pieces, so I needed to keep a close eye on them. Commenting the code helped a lot, saving me a quite a bit of time and reading.
After the backend was finished, I moved on to the frontend. Before I retrieved any data from the server, I needed to build the layout for the frontend. I took a minimalist approach, with some inspiration from sites like Amazon, to create the homepage.
Being an E-Commerce site, I chose very simple colours such as white, black and blue. The blue was used as a call-to-action, highlighting what I wanted the users to do. The blue was used to highlight the “sign up” button and the “add-to-basket” buttons. I blurred an image of a laptop and some stationery I found on Unsplash for the background.
The call-to-action you see when you enter the website does something differently depending on whether you are logged in or not. If not, then it directs you to the sign-up page. If you are logged in, then it sends you to the shopping cart.
When I had created the layout, I began fetching data from the server and database. There are two rows on the homepage, one for latest products, which displays the most recent products first, up to nine items. I had to go back to the backend code to create a function for this.
With that done, I created the categories row. Since the categories would be static, I simply coded them in. No data retrieval was needed for this row. I also created a category page. This page would detect which of the categories the user clicked on and only display the products that matched that category. This kept a consistent style across each category page, and meant I didn’t have to created separate pages for each category.
Before I moved on to create the shopping cart, I needed to create the sign-up and log-in pages. The sign-up page would send the user login details to the backend, which would then verify them, encrypt them, and send them to the database to be stored. The log-in page would check the details the user puts in. If they are valid, then they are authenticated.
With authentication fully handled, I could create the shopping cart. The total cost of the products in the cart were calculated and displayed. Once satisfied, the user would complete the checkout, and all items would be deleted from the cart.
To finish this project, I created the admin dashboard. To allow for this, I had to go back to the backend and change the user model, adding the role field. Users are automatically given the ‘user’ role, but I can change this field in the database to the ‘admin’ role.
React checks if the authenticated user has the admin role. If so, then the admin dashboard is displayed on the header. If not, then it kept hidden. Still, the user could type in the URL to access the dashboard, so the dashboard page also checks if the user is an admin. If not, then they are redirected to the homepage.
The admin dashboard lets admins add or delete products, without having to mess around with code or access the database directly.
With that completed, the project was pretty much complete. This was more of a test of technical skill than of design, as you can see with the very simple look of the site.So that was my process behind the E-Commerce Site that I made. A very technical project, so pretty much all my time was spent on functionality. I’m happy with the way it turned out, but I realised I should next focus on a simpler project that allowed me to work on showcasing my design capabilities.