CommuniCar Client

Peer-to-peer car sharing — React frontend for CommuniCar

---

About

CommuniCar is a peer-to-peer car-sharing platform. This repository is the frontend client — a React SPA that lets users search and book cars, manage trips, list vehicles as an owner, pay via Stripe, and chat in real time.

The REST API and WebSocket server live in a separate backend repo: CommuniCarDevClub/Server.

Demo

Screen recordings of the main user flows. All videos are also available on the demo-videos release.

Sign up & login

Email/password registration, login, and Google OAuth.

Search & book

Map and list search, car details, booking flow, and Stripe checkout.

Add a car

Owner flow — list a new vehicle on CommuniCar.

Real-time messaging

Conversation list and live chat between renter and owner via WebSocket.

Features

Area	Route	Description
Search	/search	Map + list results, filters, Geoapify location autocomplete
Booking	/order/:id, /order/:id/payment	Car details, date selection, Stripe payment
Trips	/trips	Current, upcoming, and past rentals
My Cars	/profile/cars	Owner fleet management and incoming reservations
Profile	/profile	Personal info, avatar, password, saved payment methods
Messages	/messages	Real-time chat with renter/hosting filters

Tech stack

Layer	Technology
UI	React 19, Tailwind CSS 4, Framer Motion, Lucide icons
Build	Vite 8, TypeScript 6
Routing	React Router DOM 7
Data	TanStack React Query 5, Axios
Forms	React Hook Form
Maps	MapLibre GL, react-map-gl, OpenFreeMap tiles
Geocoding	Geoapify
Auth	Google OAuth (@react-oauth/google), JWT in localStorage
Payments	Stripe (@stripe/react-stripe-js)
Real-time	WebSocket (messages)
Testing	Vitest, React Testing Library, MSW

Prerequisites

• Node.js 22+
• Running backend API at the URL configured in VITE_API_URL (default http://localhost:3000/api/v1)
• Third-party keys: Google OAuth, Stripe (test mode), Geoapify

Getting started

git clone git@github.com:CommuniCarDevClub/Client.git
cd Client
npm install
cp .env.example .env   # fill in your values
npm run dev            # http://localhost:5173

Environment variables

Copy .env.example to .env and fill in the values. Never commit .env.

Variable	Required	Purpose
VITE_API_URL	Yes	REST API base URL
VITE_GOOGLE_CLIENT_ID	Yes	Google OAuth client ID
VITE_STRIPE_PUBLISHABLE_KEY	Yes	Stripe publishable key (test or live)
VITE_GEOAPIFY_API_KEY	Yes	Address autocomplete and geocoding
VITE_WS_URL	No	WebSocket URL for messages (derived from VITE_API_URL when unset)
VITE_MAP_STYLE_URL	No	MapLibre tile style (defaults to OpenFreeMap liberty)

Scripts

Command	Description
npm run dev	Start Vite dev server with HMR
npm run build	Typecheck and production build
npm run preview	Preview production build locally
npm run test	Run tests once (Vitest)
npm run test:watch	Run tests in watch mode
npm run validate	Typecheck, lint, format check, and tests

Project structure

src/
├── api/          # HTTP wrappers (*.api.ts) and shared types
├── queries/      # React Query hooks
├── utils/        # Pure helpers and API→view normalizers
├── components/   # Feature UI by domain + ui/ primitives
├── hooks/        # Feature state and shared hooks
├── context/      # AuthProvider, ThemeProvider
├── layout/       # AppLayout, TopNav, ProfileSidebar
├── pages/        # Thin route entry points
├── routes/       # AppRoutes, ProtectedRoute, PublicOnlyRoute
└── test/         # MSW handlers, renderWithProviders

Docker

Run the dev server in a container (requires a local .env file):

docker compose up

The app is available at http://localhost:5173. Docker Compose loads environment variables from .env via env_file.

Architecture

High-level view of how the web client connects to the backend and third-party services.

flowchart TB
    user(["User<br/>Renter or Owner"])

    subgraph platform ["CommuniCar Platform"]
        direction LR
        client["Web Client<br/>React · Vite · TypeScript"]
        server["API Server<br/>REST · WebSocket"]
        client <-->|"JSON / WebSocket"| server
    end

    subgraph external ["External Services"]
        direction LR
        google["Google OAuth"]
        stripe["Stripe"]
        geoapify["Geoapify"]
        maps["OpenFreeMap"]
    end

    user -->|"HTTPS"| client
    client --> google
    client --> stripe
    client --> geoapify
    client --> maps

    classDef person fill:#ede9fe,stroke:#7c3aed,color:#4c1d95,stroke-width:2px
    classDef internal fill:#dbeafe,stroke:#2563eb,color:#1e3a8a,stroke-width:2px
    classDef external fill:#f3f4f6,stroke:#6b7280,color:#374151,stroke-width:1px

    class user person
    class client,server internal
    class google,stripe,geoapify,maps external

Loading

Related repos

• CommuniCarDevClub/Server — backend API and WebSocket server