Skip to content

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.

Notifications You must be signed in to change notification settings

vamuigua/car_parking_app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🅿 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

About

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.

Topics

Resources

Stars

Watchers

Forks