Car Expense Calculator

Project Overview

As a participant in full-stack course at The Technion, my final project was to demonstrate the skills and knowledge by creating a website with at least 3 pages including authentication and JWT. The website must include database with significant scope and responsive CSS. Wanting to take this opportunity to the next level, I set out not only to build a basic website or application but also something that can leave a lasting impression during final project presentation.

Why Car Expense Calculator?

At that time, when fuel prices went up, as a student who have to live on minimal budget, I experienced the need to closely monitor my car expenses. And then it "clicked" with me. I decided to create a website that tracks car expenses. The thought behind Car Expense Calculator was to create something that would enable multiple cars for each user and ability to understand the costs when sharing your car with others.

Stack Overview

In developing this website, I used a wide range of technologies and frameworks.

Front-end: Prior to this project, I already had some experience with react and MUI framework for visuals. However, in order to expand my skills and gain new knowledge, I made the decision to try utilizing the Mantine framework instead. This allowed me access to a wide range of pre-built components that provided that extra polished UI. Additionally, I opted to incorporate Next.js as it provided an innovative approach towards routing within React applications.

Back-end: I decided to utilize Express.js as my server framework for the back-end. While Express.js may appear like going the easy way initially, significant effort has been dedicated to reinforcing the security of API endpoints through middleware and error handling. This was done in order to guarantee a robust application.

Database: The database utilized in this project is Microsoft SQL Server for managing relations. To interface with the Microsoft SQL server database, I integrated Sequelize ORM. Configuring Sequelize was a bit challenging; however, it proved to be highly efficient when executing complex relational queries.

Using Next.js with PWA

In order to enhance the UX and accessibility, I decided to create a Progressive Web App (PWA) using Next.js.

Implementing this feature gave modern browsers ability to install my website as an app. Making my own app was always my dream and it finally came to life.

Using Next.js with its SSR (Server Side Rendering) and it's routing capabilities. To shortly explain, router is what allows modern Javascript frameworks to have practically instant page switching, But standard react router requires tweaking to the main executable every time you would like to add a new website page. In contrast, Next.js provides filesystem routing that makes adding new page as easy as putting a file in a folder!

Server Side Rendering (SSR)

Next advantage of Next.js is SSR. To explain what SSR means, first I need to explain what Client Side Rendering (CSR) means in modern Javascript frameworks. CSR is when server doesn't actually serve an actual webpage, but a Javascript executable, and then this Javascript is creating and placing every element, as a result it requires less processing power from the host.

The downside of CSR is that only most sophisticated search engines like Google can crawl and index them and even if they do, it's a slow process because rendering with Javascript requires way more resources and as a result it hurts SEO.

SSR unlike CSR provides a hybrid approach, it also supplies a Javascript executable, but unlike CSR, it also provides an actual "skeleton" of a webpage that is easily indexable with every search engine there is and also once Javascript gets loaded, it takes over and continues providing app-like fluid experience to the final user.

Implementing Mantine framework

During the design and development of my project, I made the decision to incorporate the Mantine framework for the front-end. This framework provides a vast amount of highly customizable components and a lot of examples to build inspiration from. The abundance of React hooks offered by Mantine also prevented excessive reliance on external libraries, resulting in simplified code management and maintenance. Moreover, leveraging the capabilities of Mantine enabled me to create a contemporary and visually appealing website design that produced a "WOW" moment during final presentation among my fellow classmates and the course lecturer.

Backend Challenges

I decided to use Express.js as a server because of its familiarity and ease of deployment. To ensure the security and stability of the backend, I took extensive measures to secure the API endpoints using middleware functions for nesting and routing, as well as implementing error handling mechanisms.

In the back-end, a router decides to which part of the code a user request is directed. My project as means of security had "Public" and "Private" routes. A public route directs user requests to the part of the code that doesn't require any authorization. When Private route before even routing was checking if a user is actually authorized to use that route first, just like a checkpoint at the entrance of security buildings.

These precautions were essential in protecting the server from potential vulnerabilities and preventing it from crashing due to user errors or bugs. But here's a catch: As I mentioned before, Next.js provides a server side rendering and Express.js is also a server, unfortunately splitting servers is actually a good practice in terms of scaleability, but it makes deployment and debugging a struggle. At that time I wanted to have my project deployed as a single container and fortunatelly Next.js provides a solution. Web-server runs inside a Next.js server, practically "Fused" together.

Relational Database and Sequelize ORM

To meet the requirements of supporting multiple cars per user and sharing car data among users, I opted for Microsoft SQL Server as the relational database for my project. With a total of 8 tables interconnected through relationships, it was important to ensure that queries retrieved information without compromising sensitive user data. To streamline database operations, I integrated Sequelize ORM into my project. This allowed me to create models and define relationships between them using JavaScript API.

Sequelize provided a streamlined interface to the database, allowing me to query and validate multiple objects within a single request.

Personal Fulfillment

Completing this project was an incredibly rewarding experience, watching my friends actually using the website and enjoy getting a summary on their car expenses. I am grateful for the opportunity to make this website, because it allowed me to transform a conceptual idea into a fully-operational website, showcasing my ability to navigate the complexities of web development.