Learning App

A monorepo application with a Spring Boot 3.4.x backend and React 19 frontend with Tailwind CSS.

Project Structure

learning-app/
├── backend/              # Spring Boot 3.4.x application
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/learningapp/
│   │   │   └── resources/
│   │   └── test/
│   └── pom.xml
├── frontend/             # React 19 + Tailwind CSS application
│   ├── src/
│   ├── public/
│   └── package.json
├── docker/               # Docker configuration files
│   └── mysql/init/       # MySQL initialization scripts
├── docker-compose.yml    # Docker Compose for MySQL
└── README.md

Prerequisites

• Java 21 (LTS)
• Maven 3.9+
• Node.js 20+
• npm 10+
• Docker & Docker Compose (for MySQL)

Getting Started

1. Environment Setup

Copy the example environment file and adjust if needed:

cp .env.example .env

Default configuration:

Variable	Default Value	Description
MYSQL_DATABASE	learning_app	Database name
MYSQL_USER	learning_user	Database username
MYSQL_PASSWORD	learning_password	Database password
MYSQL_PORT	3306	MySQL port
ADMINER_PORT	8081	Adminer web UI port

2. Start MySQL with Docker

docker compose up -d

This starts:

• MySQL 8.0 on port 3306
• Adminer (database UI) on port 8081

Verify MySQL is running:

docker compose ps

Access Adminer at http://localhost:8081:

• Server: mysql
• Username: learning_user
• Password: learning_password
• Database: learning_app

3. Start the Backend

cd backend
mvn spring-boot:run

The backend API will be available at http://localhost:8080/api

4. Start the Frontend

cd frontend
npm install
npm run dev

The frontend will be available at http://localhost:5173

Docker Commands

Command	Description
docker compose up -d	Start all services in background
docker compose down	Stop all services
docker compose down -v	Stop and remove volumes (deletes data)
docker compose logs -f mysql	View MySQL logs
docker compose ps	Check service status
docker compose restart mysql	Restart MySQL

Connect to MySQL CLI

docker compose exec mysql mysql -u learning_user -plearning_password learning_app

API Endpoints

Method	Endpoint	Description
GET	/api/health	Health check
GET	/api/health/ping	Ping endpoint

Tech Stack

Backend

• Spring Boot 3.4.1 - Application framework
• Spring Security - Authentication and authorization
• Spring Data JPA - Database access
• MySQL 8.0 - Database (via Docker)
• Lombok - Boilerplate reduction
• Java 21 - Runtime

Frontend

• React 19 - UI library
• Vite - Build tool
• Tailwind CSS - Styling
• React Router - Routing
• Axios - HTTP client

Infrastructure

• Docker Compose - Container orchestration
• Adminer - Database management UI

Development

Backend Development

• Hot reload is enabled via Spring DevTools
• API base path: /api
• Profile: dev (default)

Frontend Development

• Hot Module Replacement (HMR) enabled
• API proxy configured to http://localhost:8080
• Port: 5173

Database Management

• Adminer UI: http://localhost:8081
• MySQL CLI via Docker

Troubleshooting

MySQL Connection Issues

1. Ensure Docker is running:

   docker compose ps

2. Check MySQL logs:

   docker compose logs mysql

3. Verify MySQL is healthy:

   docker compose exec mysql mysqladmin ping -h localhost -u root -prootpassword

Reset Database

To completely reset the database:

docker compose down -v
docker compose up -d

License

MIT