Dev Doodles
Dev Doodles is a Full-stack E-commerce application for selling humorous software-related stickers and decals. I built this project with NextJS (React), PostgreSQL, and the Node.js web framework, Express. This project was my first attempt at a PERN app and offered many challenges including user authentication/authorization, persistent user sessions, and client routing to name a few. Building this application, was a rewarding experience and provided tremendous insight into full-stack development. I am excited to delve deeper into the technologies used here and learn the best practices for designing optimized applications.
- Next.js
- PostgreSQL
- Express
- Node.js
Project Purpose and Goal
Phase 1
This project was developed in three phases following a design-first approach. Phase 1 involved designing the API for the Dev Doodles backend following the Open API 3.0 specification. This included mapping out the structure of the relational database for the project. A yaml file was produced for the API using the open-source Swagger Editor.
Phase 2
In phase 2, the Dev Doodles API was implemented using Node.js and the Express framework. This also involved creating a PostgreSQL database that matched the relational database designed in phase 1 and connecting it to the Node backend.
Phase 3
Lastly, phase 3 consisted of building the front-end using Next.js. The front-end displayed necessary data stored in the database to the users and handled the shopping cart user flow.
Web Stack and Explanation
The ultimate goal of this project was to practice PERN development, so some of the technologies used lack a greater explanation for their choice other than “it would not be a PERN app without it.” That said, this project does not use “vanilla” React, but the React framework Next.js, instead. At the time of writing this, the official React documentation recommends using a React Framework, so I chose Next.js due to having a pleasant experience with it in the past (including the development of this portfolio website). As discussed in Lessons Learned, I'm not so sure that was the best idea for this project.
Problems and Thought Process
This project introduced many challenges that required extra research to overcome. If I had to highlight one, it would be the implementation of user log-in with persistent sessions. A persistent user session was necessary for a pleasant shopping experience where users could add items to a cart, leave the page if needed, and return to have their items still stored in the cart (assuming their session had not expired). After researching methods for verifying users and re-establishing sessions, I implemented the user sessions using the express-session middleware, where the session is stored on the database and a signed cookie is stored on the client. The cookie is submitted with each HTTP request and upon successful verification of the signed cookie, the session is reestablished.
Lessons Learned
This project was my first attempt at a Full-stack application, so a lot of the work involved connecting the dots on how a front-end application is meant to interact with a back-end. This resulted in design choices along the way that I am not confident about and I believe need further review and refinement. For example, Next.js is a full-stack React framework by itself, and I'm uncertain whether it was the best choice for a simple project of this size. Since all server functionality is being handled by the custom Node.js + Express backend, there is little need for the dedicated server provided by the Next.js runtime. This ultimately concluded in a valuable lesson on cross-site cookies. Both the front-end and back-end are hosted on the Render Cloud platform as independent web services, which means that without purchasing a custom domain, they have separate domains, and the back-end cannot store cookies (like the persistent session ID) on the Next.js front-end. If I were to redo this project, I would opt for a React framework that builds static files (like Gatsby), and have those files served by the Express back-end. This would allow the entire application to be hosted in one domain and eliminate issues created by cross-origin requests.
Check out my other projects
Reddit + Redux
Minimalistic Reddit application using React and Redux