This project is an educational framework, following an Express-React architecture connected to a database:

sequenceDiagram
    box Web Client
    participant React as React
    participant Fetcher as Fetcher
    end
    box Web Server
    participant Express as Express
    participant Module as Module
    end
    box DB Server
    participant DB as MySQL Server
    end

    React-)Fetcher: event
    activate Fetcher
    Fetcher-)Express: request (HTTP)
    activate Express
    Express-)Module: route
    activate Module
    Module-)DB: request (SQL)
    activate DB
    DB--)Module: data
    deactivate DB
    Module--)Express: json
    deactivate Module
    Express--)Fetcher: response (HTTP)
    deactivate Express
    Fetcher--)React: render
    deactivate Fetcher

The framework comes pre-configured with a set of tools to help junior developers produce industrial-quality code, while remaining an educational tool:

• Express: Minimalist framework for building web servers and APIs with Node.js.
• React: JavaScript library for building interactive and modular user interfaces.

Under the hood (in alphabetical order, non-exhaustive list):

• Biome: All-in-one tool for linting, formatting, and static code analysis, designed to ensure code quality and readability in a powerful and modern way.
• Docker: Containerization platform for standardizing and automating development and deployment environments, ensuring reproducible configurations.
• MySQL: Relational database management system used to store and query data.
• Pico CSS: Minimalist and lightweight CSS kit that prioritizes semantic syntax.
• React Router (Data Mode): Routing manager for React applications, allowing the creation of dynamic paths and components.
• TypeScript: JavaScript superset that adds static types, eases maintenance, and reduces errors.
• Vite: Fast and lightweight build tool for front-end applications, with a blazing-fast development server and optimized bundles for production.
• Vitest: JavaScript testing framework.
• Zod: TypeScript-based schema declaration and validation library.

Installation and Usage

Complete documentation is available in our wiki.

To get started, refer to the following pages:

• Installation
• Database
• Express
• React

Things to remember

Directory structure

.
├── .env
├── .env.sample
├── compose.yaml
├── compose.prod.yaml
├── Dockerfile
├── index.html
├── server.ts
└── src
    ├── database
    │   └── schema.sql
    ├── express
    │   ├── routes.ts
    │   └── modules
    │       └── ...
    ├── react
    │   ├── routes.tsx
    │   ├── components
    │   │   └── ...
    │   └── pages
    │       └── ...
    └── types
        └── index.d.ts

Basic Commands

REST cheatsheet