meggs-rental

Meggs-Rental

Timeframe: Mid Oct 2022 - Mar 2023
My Role: Solo Developer
Type: Web Application

Project Description

Megg’s Rental provides an innovative solution for car owners who don't need their cars all the time. Here, you can offer your car to others who might be in need of a ride and earn money from it. Moreover, you can also borrow cars from other users, negotiate the price and make the best deal for you.

With this platform, you can chat with other users and discuss the details of the offer before making a final agreement. This way, you can be sure that the car you are borrowing or lending meets your requirements.

Megg’s Rental enables car owners to make the most out of their unused vehicles and put them to good use. Instead of letting your car gather dust in the garage, you can now make some extra money while helping others. The platform operates on a global scale, allowing car owners and borrowers from all over the world to connect and make a deal.

Used Tech-Stack

Tailwind

JavaScript

React

Supabase

PostgreSQL

Mapbox

JavaScript While I enjoy using JavaScript, larger applications can become increasingly buggy, particularly when multiple developers have varying styles of writing code. To address this, I plan to use TypeScript in the future to take advantage of its type safety, better IDE completion, improved scalability, and other benefits.

React I have found that the developer experience with React is excellent, and the continuous updates from the React team provide an even better user experience for fast, interactive websites that feel like native applications. However, I have encountered issues with the concept of Single Page Applications in this project, including the large amount of JavaScript sent to the client during initial loading, performance issues from too much client-side processing, and increased complexity in larger applications. Additionally, SPA websites do not have SEO out of the box and do not work without JavaScript. I plan to delve deeper into these issues in a future blog post.

Tailwind and HeadlessUI Tailwind CSS is my preferred framework for building beautiful user interfaces quickly and efficiently. Combining Tailwind with Headless UI takes UI building to the next level, eliminating the need for JavaScript boilerplate behind simple UI elements like modals, dropdowns, and autocompletes.

Supabase and PostgreSQL When it comes to Backend-as-a-Service (BaaS), Supabase has pleasantly surprised me with its capabilities. In contrast, Firebase, which I had previously used, feels like a toxic relationship that locks users into the Google ecosystem and has an expensive pricing model. Supabase, on the other hand, offers an open-source alternative to Firebase with a transparent pricing model that scales with application growth. If I need a BaaS with a No-SQL database in the future, my first pick would be Realm using MongoDB, and my second choice would be Firebase. For a relational database, I would happily choose Supabase as my top pick, followed by Pocketbase.

Process

Planning

To ensure a successful outcome for Meggs Rental, I started by analyzing and collecting all the necessary information to form a cohesive project plan. My main focus was to identify the required features, technologies, and tools needed to develop a complete website.

Design

I learned from past mistakes and spent more time on the planning phase, which resulted in a clear vision for the project. With my familiar designing tools and Spline, a new 3D object manipulation tool, I began designing the website.

Development

To avoid a messy codebase, I followed React best practices during the development stage. However, I encountered a different challenge when I realized that the No-SQL database from Firebase would not be sufficient. After researching the best Backend as a Service (BaaS) solutions, I chose Supabase. I then went back to the planning phase to structure the database to fit the requirements, make the development swift, and ensure scalability in the future. With quick adaptation and learning of Supabase's underlying database PostgreSQL, I had Firebase Authorization, Database, and Storage replaced in a few weeks.

Test & Deployment

For deployment, I selected Netlify, a familiar platform, which had no issues during the testing and deployment process.

Showcase

User Sign-In

Interactive Map

Creating an Offer

Conversation between Users

Final Conclusion

Although I could discuss this project at length and detail what I have learned in the past 5 to 6 months of continuous work, I will only highlight the key takeaways. Firstly, I have strengthened my foundational knowledge of JavaScript to the point where it feels like my second language. Secondly, I have reinforced the importance of adhering to clean code standards and best practices in React since React does not dictate how one should code. Additionally, I have enhanced my knowledge of databases, including how to choose and work with various types. As Albert Einstein once said,

"The more I learn, the more I realize how much I don't know."

This quote is gradually resonating with me, and with that, I conclude this case study. Thank you for reading, and have a pleasant day.

Let's build your potential next website

stunning websites.

Navigation

Contact Information

Socials: Github