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.
- User registration and login
- Profile and password management
- API Endpoints protection by Laravel Sanctum
- Managing vehicles and parking start/stop events
- API Documentation
Frontend: Vue, Vite, TailwindCSS, Pinia, Axios
Backend: Laravel, Sanctum
Database: MySQL
Clone the project
git clone https://github.com/vamuigua/car_parking_app.git
Go to the project directory
cd car_parking_app
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:
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
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.
Documentation for the APIs can be found here
Some of the APIs you can find include:
GET api/v1/zones
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 api/v1/profile
Authorization | Type | Description |
---|---|---|
Bearer Token |
string |
Required. |
To run tests on the laravel backend app, run the following command
php artisan test
If you have any feedback, please reach out at vamuigua@gmail.com