Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/aliiimaher/personnelsystem-react

This is front-end project of a personnel system.
https://github.com/aliiimaher/personnelsystem-react

Last synced: 1 day ago
JSON representation

This is front-end project of a personnel system.

Awesome Lists containing this project

README

        



MZGRCO

# Personnel-System-Website-React
This is a front-end project for a personnel system built with **TypeScript, Bootstrap CSS, Vite, React.js, Scss, and Axios**.

![GitHub Repo Stars](https://img.shields.io/github/stars/aliiimaher/PersonnelSystem-React?label=Stars)
![GitHub forks](https://img.shields.io/github/forks/aliiimaher/PersonnelSystem-React?label=Forks)
![Started Years](https://img.shields.io/badge/Since-2023-purple?style=flat)


![png2](./docMe/resbus.png)

## Demonstration
You can visit here to see the website: https://mzgrco.ir/

## Installation
Clone the source code into your computer.

```
git clone https://github.com/aliiimaher/PersonnelSystem-React.git
```
Install the project's dependencies.
```
npm install
```
Run the project easily with HMR (I've used Vite):
```
npm run dev
```

## ✨Features
- Full error checking (password length checking, duplicated username, duplicated email, ...).
- Full responsive (in three sizes: desktop, tablet, and phone)
- User Authentication
- Context API: I've implemented the Context API, likely for managing user authentication and sharing data across components.
- Axios: Axios is used for making HTTP requests to your backend server. This is common for fetching data and interacting with APIs.
- File Uploading
- Loading Indicators: Loading indicators or spinners are displayed to inform users that content is being loaded.
- Form Handling: The "react-hook-form" library is used for handling form submission.

## Other
### Back-End
The Back-End is coded with Django by [@MsnzmT](https://github.com/MsnzmT)

Repo: https://github.com/MsnzmT/PersonnelSystem_API
## Class Diagram
![png1](./docMe/classDia.png)