DEV Community

Roy amit
Roy amit

Posted on • Edited on

How we built "Space-Ease" using Next.js

Introduction:

Urban parking is a struggle many of us know too well. You’ve been there: circling the block endlessly, paying a fortune, or giving up and parking miles away. The idea behind Space-Ease was simple: connect drivers searching for parking with private parking owners willing to rent out their unused spaces. Turning it into a real app? That was a whole other adventure, full of trial, error, and figuring things out as we went.

The Journey: From Mobile to a Web App

Initially, we envisioned Space-Ease as a mobile app and started building it in Android Studio with Java. It felt like a natural choice, especially since we wanted something accessible on smartphones. As we kept going, we realized the process wasn’t as flexible as we’d hoped. Java made some UI interactions tricky, and building dynamic, real-time features turned out to be more challenging than we expected.

Seeing these limitations, we decided to pivot to a web application. This transition gave us more freedom to create a flexible app that could work across platforms. Modern web technologies offered the adaptability we needed to experiment and improve as we went.

Tackling the Backend

When we started building the app, one of our first decisions was choosing a database. Postgres stood out right away-it’s reliable, fast, and works seamlessly with PostGIS, which was a lifesaver for running the geospatial queries we needed to find parking spots nearby.

With the database sorted, the next challenge was figuring out how to work with it in the code. We initially went with Drizzle, a lightweight ORM that seemed like a good match for our needs. Its API was straightforward, and it made basic tasks like defining tables and running simple queries pretty easy. But once we started dealing with more complex relationships and queries, things got tricky. Even following their basic documentation gave us errors, and searching online didn’t help because there just wasn’t much of a community or support. On top of that, Drizzle's last release was a few months ago and hadn’t been updated since, so we were kind of stuck.

Eventually, we decided to switch to Prisma. It was a bit of work to migrate everything, but it turned out to be a great decision. Switching to Prisma made it easier to handle complex queries, and the auto-generated client saved us a lot of time. The detailed documentation and active community were a game-changer when we ran into issues.

Building the Frontend

For the frontend, we needed something that could handle both performance and flexibility. After exploring options, we landed on Next.js. It gave us the ability to handle both server-side rendering and client-side interactivity in one framework. This hybrid setup was key in delivering a fast and responsive experience, especially when we were aiming to make the app feel seamless and intuitive.

React was our choice for the UI because it made building the interface straightforward. It allowed us to design a clean, interactive layout without getting bogged down by complexity. Since we were focusing on mobile-first design, we turned to Tailwind CSS for its utility-first approach, which made styling efficient and consistent across the app. We also used Shadcn/UI to help with visual consistency and accessibility.

One of the most important parts of Space-Ease is the interactive map, where users can view and manage parking spaces in real time. For this, we integrated Google Maps, which was essential for geolocation and navigation. It worked well with what we needed and helped make the map experience smooth and reliable.

Managing Real-Time Updates

Keeping parking availability data up to date was a major hurdle. Parking is always changing, and we needed a way to reflect those changes in real time without slowing the app down. After experimenting with different solutions, we turned to React Query. It provided efficient caching and synchronization, which helped keep the app responsive while making sure the data stayed fresh without adding unnecessary complexity.

On the backend, Supabase was a key part of the solution. It integrated smoothly with Postgres, enabling real-time updates, which was essential for keeping the parking data accurate. It also simplified user authentication, saving us time and effort as we focused on scaling the app.

Conclusion

Developing Space-Ease was an iterative process filled with challenges and valuable lessons. From redefining our platform strategy to carefully selecting the right tools for each task, every decision helped shape the app into what it is today.
What started as a way to address a personal frustration has grown into a project we are proud to share.

If you’re interested, you can:
Check out the code on GitHub
Try out the live app yourself on Vercel.
Watch a detailed explanation of the problem, our solution, and the app in action in this video

We’d love to hear your thoughts, suggestions, or even just stories about your own urban parking struggles!

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

Try REST API Generation for MS SQL Server.

DevOps for Private APIs. With DreamFactory API Generation, you get:

  • Auto-generated live APIs mapped from database schema
  • Interactive Swagger API documentation
  • Scripting engine to customize your API
  • Built-in role-based access control

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay