ParkEasy Frontend

React frontend application for the ParkEasy parking management system.

Features

• User authentication (login/register)
• Browse all parking spots
• Create, edit, and delete parking spots (authenticated users)
• Owner-based access control
• Responsive design

Setup

1. Install dependencies:

npm install

2. Create a .env file in the root directory:

cp .env.example .env

3. Update the API URL in .env if your backend runs on a different port:

REACT_APP_API_URL=http://localhost:3000/api

Development

Start the development server:

npm start

The app will open at http://localhost:3000

Build

Create a production build:

npm run build

Backend Integration

This frontend is designed to work with the ParkEasy backend API. Make sure the backend is running before starting the frontend.

API Endpoints Expected:

• POST /api/auth/register - User registration
• POST /api/auth/login - User login
• GET /api/parking - Get all parking spots
• POST /api/parking - Create parking spot (protected)
• PUT /api/parking/:id - Update parking spot (owner only)
• DELETE /api/parking/:id - Delete parking spot (owner only)

Project Structure

src/
├── components/       # React components
│   ├── Home.js
│   ├── Login.js
│   ├── Register.js
│   ├── ParkingList.js
│   ├── ParkingSpotCard.js
│   ├── ParkingSpotForm.js
│   ├── Navbar.js
│   └── ProtectedRoute.js
├── context/         # React context
│   └── AuthContext.js
├── services/        # API services
│   └── api.js
└── App.js          # Main app component

Technologies Used

• React
• React Router
• Axios
• Context API for state management