/car_parking_app

myParking is a Vue.js application that serves as a car parking management system. It communicates with a Laravel backend through APIs to provide various functionalities related to parking management.

Primary LanguagePHP

๐Ÿ…ฟ myParking App

myParking is a Vue.js application that serves as a car parking management system. It communicates with a Laravel backend through APIs to provide various functionalities related to parking management.

App Screenshot

โœจ Features

  • User registration and login
  • Profile and password management
  • API Endpoints protection by Laravel Sanctum
  • Managing vehicles and parking start/stop events
  • API Documentation

๐Ÿ”จTech Stack

Frontend: Vue, Vite, TailwindCSS, Pinia, Axios

Backend: Laravel, Sanctum

Database: MySQL

๐Ÿš€ Getting Started & Run Locally

Clone the project

  git clone https://github.com/vamuigua/car_parking_app.git

Go to the project directory

  cd car_parking_app

๐Ÿ“Setting app the different apps

From here you will see two folders: backend and frontend .The backend is the laravel app that servers the APIs to thefrontend which is a Vue JS application.

We shall first install and configure the backend then afterwards the frontend:

1. Backend Configuration (Laravel App)

Go to the backend directory

  cd backend

Install dependencies

  composer install

Change directory permissison

  chmod -R 777 storage bootstrap/cache

Create an .env file

  touch .env
  cp .env.example .env

Update the following environment variables in the .env file:

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:5173
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:5173

Generate an Application Key

  php artisan key:generate

Migrate the Database

PS: Ensure you have created a database e.g car_packing_app before running the migrate command

  php artisan migrate

Start the app by running the server

  php artisan serve

The backend app will be served on the URL http://localhost:8000/

Now we can move to configuring the frontend

2. Frontend Configuration (Vue JS App)

Go to the frontend directory

  cd frontend

Install dependencies

  npm install

Create an .env file

  touch .env

Add the following environment variable in the .env file:

VITE_CAR_PARKING_BACKEND_API=http://localhost:8000

http://localhost:8000 is the URL serving the laravel application.

Start the app server

  npm run dev

The frontend app will be served on the URL http://localhost:5173/

โœ… Start using myParking app: Once the app is running, you can start by creating an account by visiting the registration page and explore the app's features.

๐Ÿ“– API Reference

Documentation for the APIs can be found here

Some of the APIs you can find include:

Get all available zones

  GET api/v1/zones

Login as a User

  POST api/v1/login
Parameter Type Description
email email Required.
password string Required.
remember bool Determines whether the Token will expire at a defined time or not.

Get an authenticated user's profile

  GET api/v1/profile
Authorization Type Description
Bearer Token string Required.

๐Ÿ‘จโ€๐Ÿ”ฌ Running Tests

To run tests on the laravel backend app, run the following command

  php artisan test

๐Ÿ™ Acknowledgements

๐Ÿ“ฃ Feedback

If you have any feedback, please reach out at vamuigua@gmail.com