Metzinger
A simple full-stack e-commerce website built with all the functionality one would expect in a e-commerce site. It includes authentication, a shopping cart, an order tracking system, and a wishlist.
Year
- 2022
Technology
- PostgreSQL
- Express
- React / Redux
- Node
Type
- Solo Project
Process
My original intention with the Metzinger website was that I wanted to delve into the backend to understand it more, and to do so I was intent on making a simple application with cart functionality only. However, as I worked on the application more and more, I realized that I wanted something more out of the app.
I had an idea for the general design style of the website after being inspired by the Prada website. So, I also looked at Prada's competitors and noted down the functionality that all of these clothing websites have.
The common themes between the websites were:
- Shopping carts
- Wishlists
- Gridlike display for product items
- A checkout process with steps
- Order tracking system
So with this list of features in mind, I designed the front-end in Figma first so that I knew what back-end features I needed and could responsibly implement. The front-end was fairly simple to design. The most important web pages to design were the homepage, product pages, and checkout pages themselves as that is where the users will spend most of their time.
Back-end wise, it only made sense to use a relational database with something like PostgreSQL, since I would be dealing with structured data and how well it supports transactions. I learned a lot about database normalization, and applied it to my table design. This made the process of creating a proper RESTful API in Express and Node.js easier.
Lessons Learned
I would say that I've learned quite a lot from working on Metzinger, but the three most important things I've learned are:
-
SQL is like magic.
Usually when newer developers are taught how to make full-stack applications, the instructors whether they be on YouTube or in coding bootcamps, they use NoSQL and specifically MongoDB.
It's understandable. It's simple, less intimidating, easily hosted, and for the most part you can write everything you need in JavaScript. However, when you start to use SQL and are equipped with at least the basics of database design, SQL becomes so much more convenient.
Simple outer joins, sub-queries, and built-in ordering methods are all made simple. That isn't to say there isn't a place for NoSQL, but I believe SQL gets a bad reputation when it can also be quite simple for simple purposes.
-
Pace yourself one feature at a time.
I realized that it's important to start off with simple systems first, and then move on from there. Expanding the functionality of a program should be a step-by-step process rather than something you set the foundation for immediately.
It might seem easier to just work on all functionality at once to make sure everything works together, but you'll thank yourself when you can clearly see the progress you're making in your project.
-
It's ok to not know something.
I think the most important lesson of all is that it is impossible to know everything. I am a person who's driven to knowledge, and this can be a bit frustrating. However, it is too harsh to expect that I can pick up every concept quickly. Even quick learners hit road blocks once in a while.
I learned it's way more efficient to spend that time learning, looking at documentation, and asking others for help over grumbling. It's all a part of the process.
Conclusion
My original intention with the Metzinger website was that I wanted to delve into the backend to understand it more, and to do so I was intent on making a simple application with cart functionality only. However, as I worked on the application more and more, I realized that I wanted something more out of the app.
Furthermore, I've gained insight into the back-end that will allow me to flourish better in environments that require me to work with back-end developers or do it myself.
I learned a lot throughout this project whether it be about SQL or simply managing myself to be a better developer. I hope to continue to improve and make more impressive projects in the future.