StartER is a web application framework for educational purposes. A web framework provides a structure and starting point for creating an application, allowing you to focus on completing a project. Based on React / Express, StartER strives to provide a seamless and educational development experience while still enabling powerful features.
Start-Express-React (StartER) is a pedagogical framework designed to facilitate the learning of web development using a React-Express architecture. This framework is preconfigured with a comprehensive set of tools aimed at helping junior developers produce industry-standard code while remaining accessible for educational purposes.
Architecture Diagram
Key Technologies
- Express: A minimalist framework for creating web servers and APIs with Node.js.
- React: A JavaScript library for building interactive and modular user interfaces.
Under-the-Hood Tools
- Biome: An all-in-one tool for linting, formatting, and static code analysis, ensuring the quality and readability of code efficiently.
- Docker: A containerization platform that standardizes and automates development and deployment environments, ensuring reproducible configurations.
- MySQL: A relational database management system used to store and query data.
- Pico CSS: A minimalist and lightweight CSS kit that prioritizes semantic syntax.
- React Router (Data Mode): A routing library for React applications that enables the creation of dynamic routes and components.
- TypeScript: A superset of JavaScript that adds static types, making code easier to maintain and reducing errors.
- Vite: A lightweight and fast build tool for frontend applications, providing an ultra-fast development server and optimized bundles for production.
- Vitest: A JavaScript testing framework.
- Zod: A TypeScript-focused schema declaration and validation library.
Project Structure
The typical project structure consists of:
.
├── .env
├── .env.sample
├── compose.yaml
├── compose.prod.yaml
├── Dockerfile
├── index.html
├── server.ts
└── src
├── database
│ └── schema.sql
├── express
│ ├── modules
│ │ └── ...
│ └── routes.ts
├── react
│ ├── components
│ │ └── ...
│ ├── pages
│ │ └── ...
│ └── routes.tsx
└── types
└── index.d.ts
REST API
The application follows RESTful principles with various HTTP methods mapped to specific endpoints to perform CRUD operations on the resources. For example:
| Operation | Method | URL Path | Request Body | SQL | Success Response | Error Response |
|---|---|---|---|---|---|---|
| Browse | GET | /api/items | SELECT | 200 (OK), list of items. | ||
| Read | GET | /api/items/:id | SELECT | 200 (OK), an item. | 404 (Not Found) if invalid id. | |
| Add | POST | /api/items | Item data | INSERT | 201 (Created), insertion id. | 400 (Bad Request) if invalid body. |
| Edit | PUT | /api/items/:id | Item data | UPDATE | 204 (No Content). | 400 (Bad Request) if invalid body; 404 if invalid id. |
| Destroy | DELETE | /api/items/:id | DELETE | 204 (No Content). |
Good project
Thx :) Don't hesitate to star the repo on GitHub if you find the project interesting ;)
Sign in to comment.