An open API service indexing awesome lists of open source software.

https://github.com/bouchraakl/lotmaster

LotMaster Frontend: Enhance parking lot management with a sleek Vue.js application. Effortless parking sessions, real-time monitoring, and automated billing.
https://github.com/bouchraakl/lotmaster

bootstrap estacionamento front-end frontend integration javascript parking parking-lot parking-management typescript vuejs

Last synced: about 2 months ago
JSON representation

LotMaster Frontend: Enhance parking lot management with a sleek Vue.js application. Effortless parking sessions, real-time monitoring, and automated billing.

Awesome Lists containing this project

README

        






PS: Github Pages Just Show the static implementation, for the integration with the backend please check the backend repo!


LotMaster System is a cutting-edge solution designed to streamline parking lot operations and enhance customer service. This comprehensive system offers a multitude of features and leverages a range of technologies, empowering parking lot owners to efficiently manage parking spaces and provide an exceptional experience for their customers. With a sleek and intuitive user interface, the Parking Management System Frontend ensures seamless parking sessions, vehicle management, user administration, and comprehensive control over parking facility operations.

## Table of Contents

- [Main Screen](#main-screen)
- [Demo](#demo)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running the Application](#running-the-application)
- [Building for Production](#building-for-production)
- [Backend and API Documentation](#backend-and-api-documentation)

## Main Screen

image

## Demo
[Demo Link For The Application](bouchraakl.github.io/LotMaster/).

## Features
LotMaster offers a wide range of capabilities to enhance your parking lot management, including:

- **Dashboard**: A centralized dashboard that provides an overview of the parking lot, including occupancy status, available parking spaces, and revenue information.
- **Effortless Parking Sessions**: Initiate and terminate parking sessions with ease, ensuring accurate calculation of duration and fees.
- **Streamlined Vehicle Management**: Register and update vehicle information, including license plates and owner details, for efficient tracking.
- **User-Friendly Interface**: Enjoy a sleek and intuitive user interface that simplifies the parking management process for both owners and customers.
- **Real-Time Monitoring**: Gain complete visibility into parking lot operations, monitor occupancy, and control the allocation of parking spaces.
- **Automated Billing**: Generate receipts and invoices for completed parking sessions, enabling seamless payment processing.
- **Customization Options**: Tailor the Parking Management System to meet the unique needs of your parking facility, with configurable settings and parameters.

## Technologies Used

![Vuejs](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)
![npm]( https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)
![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![css]( https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

## Getting Started

Follow the instructions below to get the LotMaster System up and running on your local machine.

### Prerequisites

- Node.js: JavaScript runtime environment required to run the Parking Management System Frontend. You can download Node.js from the official website: https://nodejs.org.
- npm: Node Package Manager (npm) is bundled with Node.js and allows you to install and manage dependencies.
- Vue CLI: Command-line interface for Vue.js, used to scaffold and manage Vue projects. Install Vue CLI globally on your machine using the following command:

```shell
npm install -g @vue/cli
- TypeScript: Superset of JavaScript that adds static typing and other advanced features. TypeScript is used in LotMaster for improved code maintainability. Install TypeScript globally using the following command:

```shell
npm install -g typescript

### Installation

1. Clone this repository to your local machine using:

```shell
git clone https://github.com/bouchraakl/LotMaster.git

2. Navigate to the project directory in your preferred IDE.
3. Install the project dependencies by running the following command:

```shell
npm install
```
### Running the Application
To run the Parking Management System Frontend, use the following command:

```shell
npm run serve
```
This command compiles and hot-reloads the application for development. Open your browser and navigate to the provided URL to access the application.

### Building for Production
To build the Parking Management System Frontend for production, execute the following command:

```shell
npm run build
```
This command compiles and minifies the application, generating optimized files ready for deployment. The production-ready files will be placed in the dist directory.

## Backend and API Documentation

Please refer to the backend documentation for information about the backend implementation and the API endpoints used by the frontend. The backend documentation will provide details on how the frontend communicates with the backend to perform various actions and retrieve data.
For the Backend and API implementation, please refer to the [Backend Application](https://github.com/bouchraakl/ParkingManagerBackend).

## Socials
[![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/bouchra-akl/)
[![Gmail](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:[email protected])