Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoyirul/express-reactjs-app
A comprehensive web application with role-based access control built with Node.js, Express, React, and Tailwind CSS.
https://github.com/hoyirul/express-reactjs-app
Last synced: 22 days ago
JSON representation
A comprehensive web application with role-based access control built with Node.js, Express, React, and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/hoyirul/express-reactjs-app
- Owner: hoyirul
- Created: 2024-06-17T02:43:02.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-06-17T03:15:58.000Z (8 months ago)
- Last Synced: 2024-06-17T04:31:36.900Z (8 months ago)
- Language: JavaScript
- Size: 200 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Title
Short description of the project.
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [Project Structure](#project-structure)
- [Contributing](#contributing)
## Overview
This project is a full-stack web application designed to demonstrate a role-based access control system. The backend is built using Node.js and Express, while the frontend is developed using React and styled with Tailwind CSS. The application allows users to sign up, log in, and access different parts of the application based on their roles (Administrator, Supervisor, Operator).
## Features
- User Authentication (Sign Up, Sign In, Sign Out)
- Role-based Access Control (Admin, Supervisor, Operator)
- Protected Routes
- User Profile Management
- Responsive Design with Tailwind CSS
## Technologies Used
- **Backend:**
- Node.js
- Express
- JWT for authentication
- Sequelize ORM
- MySQL database
- **Frontend:**
- React
- React Router
- Tailwind CSS
- Axios for API requests
## Installation
### Prerequisites
- Node.js and npm installed
- PostgreSQL installed and running
### Backend Setup
1. Clone the repository:
```sh
git clone https://github.com/yourusername/yourproject.git
cd yourproject/backend
```
2. Install backend dependencies:
```sh
npm install
```
3. Create a .env file in the backend directory and add your database and JWT configuration:
```sh
DB_NAME=your_database
APP_KEY=your_jwt_secret
```
4. Run database migrations and seed data:
```sh
npx sequelize-cli db:migrate
npx sequelize-cli db:seed:all
```
5. Start the backend server:
```sh
npm start
```
### Frontend Setup
1. Navigate to the frontend directory:
```sh
cd ../frontend
```
2. Install frontend dependencies:
```sh
npm install
```
3. Start the frontend development:
```sh
npm start
```
### Usage
1. Open your browser and navigate to http://localhost:3000.
2. Sign up for a new account or sign in with existing credentials.
3. Access different parts of the application based on your role.
### Project Structure
```sh
.
├── backend
│ ├── config
│ ├── controllers
│ ├── middlewares
│ ├── models
│ ├── routes
│ ├── seeders
│ ├── app.js
│ ├── server.js
│ └── ...
├── frontend
│ ├── public
│ ├── src
│ │ ├── components
│ │ ├── contexts
│ │ ├── hooks
│ │ ├── pages
│ │ ├── services
│ │ ├── App.js
│ │ ├── index.css
│ │ ├── index.js
│ │ └── ...
│ └── tailwind.config.js
└── README.md
```
### Contributing
Contributions are welcome! Please fork the repository and use a feature branch. Pull requests are warmly welcome.