LunaNotes logo LunaNotes

Building the Ultimate Auto Space Parking Application

Introduction

In this article, we will walk through the development of an advanced parking application called Auto Space. This application incorporates several modern technologies such as React, Next.js, GraphQL, and 3D mapping to deliver a top-notch user experience. We'll cover everything from the architecture of the application to the implementation of various features such as booking slots and managing parking locations.

Overview of Auto Space

Auto Space is a full-fledged parking application that enables users to efficiently find and book parking slots. The application includes a customer-facing UI, a manager interface, and supports valet service functionality. In this section, we will go over the basic structure of our monorepo setup featuring multiple applications within a single repository.

Monorepo Structure

The Auto Space application is organized as a monorepo featuring multiple applications:

  • Frontend Applications: Customer-facing, Manager, Admin, and Valet apps.
  • Backend APIs: RESTful and GraphQL APIs to handle various functionalities.

Technology Stack

  • Frontend: React, Next.js, Tailwind CSS, TypeScript.
  • Backend: Node.js, NestJS, Prisma, PostgreSQL.
  • Mapping: Mapbox API for 3D mapping and location services.
  • Payment Processing: Stripe API for managing payments.

Building the Customer-Facing Application

In this section, we will implement the customer-facing application that allows users to search for available parking slots and make bookings.

Setting Up the Project

First, we will set up the project using create-next-app, enabling TypeScript and Tailwind CSS:

npx create-next-app@latest autospace --typescript --tailwind

Configuring Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows us to build custom designs quickly. Configure Tailwind CSS in the tailwind.config.js:

tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}", "./public/index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Implementing the Search Feature

The primary feature of the customer application is to search for garages. We will create a search form component that allows the user to select dates, times, and filter for types of vehicles. Here’s a simplified version of our search form:

const SearchForm = () => {
  // State variables
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");

  // Function to handle search submission
  const handleSearch = (e) => {
    e.preventDefault();
    // Perform search query
  };

  return (
    <form onSubmit={handleSearch}>
      <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} required />
      <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} required />
      <button type="submit">Search</button>
    </form>
  );
};

Creating the Map Component

The map component will display available parking locations using Mapbox GL. To set this up, let’s create a Map component that triggers API calls to fetch garage data based on user input:

import { useEffect } from "react";
import MapGL from "react-map-gl";

const MapComponent = ({ setBounds }) => {
  const [viewport, setViewport] = useState({
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 8,
  });

  useEffect(() => {
    setBounds(viewport);
  }, [viewport]);

  return (
    <MapGL
      {...viewport}
      onViewportChange={setViewport}
    />
  );
};

Booking Slots

When a user decides to book a parking slot, we will handle that through another function that interacts with our backend API. We’ll incorporate validations and display success messages based on user actions.

Summary

In this section, we have set up a customer-facing application for Auto Space with a search form, map component, and basic functionalities necessary to reserve a parking slot. As we progress through this project, we will continue to build out advanced features such as user authentication, garage management, and payment integration with Stripe. Keep an eye out for more detailed guides covering these aspects in subsequent sections!

Conclusion

The Auto Space application offers a powerful solution for parking management. This guide has introduced you to building a 3D parking app with features tailored for customers, managers, and administrators. The knowledge gained in this guide can be applied to various real-world applications in future developments. For instance, if you're interested in enhancing your skills in building user interfaces, check out our guide on Implementing Your Own Design System in Next.js.

Stay tuned for next sections, where we'll dive deeper into backend integration and UI enhancements, and explore related topics such as Unlocking Microservices in the Browser with Single-SPA for more complex application architectures. Additionally, if you're looking to showcase your work, consider Building a Modern Frontend Developer Portfolio Using Next.js, Tailwind CSS, and Sentry.