https://github.com/dracudev/regame-app
React app featuring an interactive map, calendar, and charts, powered by a Node.js API with database integration and CRUD functionality.
https://github.com/dracudev/regame-app
api crud database expressjs mvc-architecture mysql nodejs react reactjs tailwindcss typescript
Last synced: 3 months ago
JSON representation
React app featuring an interactive map, calendar, and charts, powered by a Node.js API with database integration and CRUD functionality.
- Host: GitHub
- URL: https://github.com/dracudev/regame-app
- Owner: dracudev
- Created: 2025-01-05T16:59:11.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-24T21:44:38.000Z (10 months ago)
- Last Synced: 2025-06-02T08:44:26.086Z (7 months ago)
- Topics: api, crud, database, expressjs, mvc-architecture, mysql, nodejs, react, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://dracudev-regame.vercel.app/
- Size: 1.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Regame App
## 📄 Description
This project includes building a **Node.js API** with a **MySQL** database to store data generated by the project. Additionally, a React application will be developed with various interactive components such as a map, a calendar, a table and charts.
### Objectives
- Practice **Tailwind CSS** with React.
- Work with popular plugins.
- Build an API using **Node.js**.
- Develop a CRUD.
- Implement a map feature.
- Add a calendar feature.
- Create data visualizations with charts.
## 💻 Technologies Used
### 🚀 Frontend (React + Vite)
- **React 18** - UI framework.
- **React Router** - Navigation management.
- **Tailwind CSS** - Utility-first styling.
- **AG Grid** - High-performance tables.
- **FullCalendar** - Event calendar.
- **Mapbox GL** - Interactive maps.
- **Nivo Charts** - Data visualization.
- **Vite** - Fast frontend bundler.
### 🛠️ Backend (Node.js + Express.js)
- **Express.js** - Backend framework.
- **Prisma ORM** - Database interaction.
- **Sequelize ORM** - Alternative ORM.
- **MySQL2 & PostgreSQL (pg)** - Database support.
- **CORS, Cookie Parser, Body Parser** - API utilities.
### 🧑💻 Development & Tooling
- **TypeScript** - Static typing (frontend).
- **ESLint + Prettier** - Code quality.
- **Concurrently** - Run frontend & backend together.
- **Dotenv** - Environment variable management.
- **Nodemon** - Auto-restart backend on changes.
## 📋 Requirements
- **Node.js 16+** (Latest LTS recommended).
- **npm or yarn** as the package manager.
- **MySQL/PostgreSQL** for database.
- **A modern web browser** for frontend testing.
## 🛠️ Installation
1. Clone this repository:
```bash
git clone https://github.com/dracudev/S8-Inprocode.git
cd S8-Inprocode
code .
```
2. Install dependencies:
```bash
npm install
```
3. Create a .env file inside the backend/ folder and configure database credentials:
```env
DATABASE_URL=your-database-connection-string
```
4. Run database migration:
```env
npx prisma migrate dev --name init
```
5. Insert initial data (optional):
```env
npx prisma db seed
```
## ▶️ Execution
1. Start backend & frontend together from the root:
```bash
npm run dev
```
2. Or start them separately:
```bash
# Start backend
cd backend
npm run dev
# Start frontend
cd frontend
npm run dev
```