Full Stack Professional - Customer Management System

A modern full-stack customer management application built with Spring Boot, React, and Angular, featuring JWT authentication, containerized deployment, and CI/CD automation.

🚀 Features

• Dual Frontend Support: Choose between React or Angular frontend
• JWT Authentication: Secure API with token-based authentication
• RESTful API: Well-structured REST endpoints for customer management
• File Upload: AWS S3 integration for profile image storage
• Database Migrations: Automated schema management with Flyway
• Containerization: Docker support for all components
• CI/CD Pipeline: Automated testing and deployment to AWS
• Health Monitoring: Spring Boot Actuator endpoints

🏗️ Architecture Overview

┌─────────────────────────────────────────────────────────────────┐
│                         Frontend Layer                          │
├──────────────────────────┬──────────────────────────────────────┤
│      React App (Vite)    │        Angular App (v15)             │
│      - Chakra UI         │        - PrimeNG                     │
│      - React Router v6   │        - Reactive Forms              │
│      - Formik & Yup      │        - RxJS                        │
└──────────────────────────┴──────────────────────────────────────┘
                                    │
                                    ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Spring Boot Backend (v3.0)                   │
│  ┌─────────────┐  ┌──────────────┐  ┌────────────────────┐    │
│  │ Controllers │  │   Services   │  │   Data Access      │    │
│  │   - REST    │──│   Business   │──│   - JPA/JDBC       │    │
│  │   - Auth    │  │    Logic     │  │   - Repository     │    │
│  └─────────────┘  └──────────────┘  └────────────────────┘    │
│                                                                 │
│  ┌──────────────────────┐  ┌──────────────────────────────┐   │
│  │   Spring Security    │  │      AWS Services          │   │
│  │   - JWT Auth Filter  │  │      - S3 Storage          │   │
│  │   - JWT Utilities    │  │      - File Upload         │   │
│  └──────────────────────┘  └──────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘
                                    │
                                    ▼
┌─────────────────────────────────────────────────────────────────┐
│                    PostgreSQL Database (v14.1)                  │
│                    - Flyway Migrations                          │
│                    - Customer Data                              │
└─────────────────────────────────────────────────────────────────┘

🛠️ Tech Stack

Backend

• Framework: Spring Boot 3.0
• Language: Java 17
• Security: Spring Security + JWT
• Database: PostgreSQL 14.1
• ORM: Spring Data JPA / JDBC
• Migrations: Flyway
• Cloud Storage: AWS S3
• Build Tool: Maven
• Testing: JUnit 5, Testcontainers

Frontend - React

• Build Tool: Vite
• UI Library: Chakra UI
• Routing: React Router v6
• Forms: Formik + Yup
• HTTP Client: Axios
• State Management: Context API

Frontend - Angular

• Framework: Angular 15
• UI Library: PrimeNG
• Forms: Reactive Forms
• HTTP Client: HttpClient
• JWT Handler: @auth0/angular-jwt
• State Management: RxJS

DevOps

• Containerization: Docker
• CI/CD: GitHub Actions
• Container Registry: Docker Hub
• Deployment: AWS Elastic Beanstalk
• Database Hosting: AWS RDS (Production)

📋 Prerequisites

• Java 17+
• Node.js 18+
• Docker & Docker Compose
• Maven 3.8+
• PostgreSQL 14+ (or use Docker)

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/jakr99/Spring-boot-dashboard.git
cd spring-boot-full-stack

2. Start the Database

docker-compose up -d

3. Run the Backend

cd backend
mvn spring-boot:run

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

4. Run the Frontend

Option A: React Frontend

cd frontend/react
npm install
npm run dev

Access the React app at http://localhost:5173

Option B: Angular Frontend

cd frontend/angular
npm install
npm start

Access the Angular app at http://localhost:4200

📝 API Documentation

Authentication Endpoints

Register

POST /api/v1/auth/register
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "password123",
  "age": 25,
  "gender": "MALE"
}

Login

POST /api/v1/auth/login
Content-Type: application/json

{
  "username": "john@example.com",
  "password": "password123"
}

Customer Endpoints

Get All Customers

GET /api/v1/customers
Authorization: Bearer {token}

Get Customer by ID

GET /api/v1/customers/{customerId}
Authorization: Bearer {token}

Update Customer

PUT /api/v1/customers/{customerId}
Authorization: Bearer {token}
Content-Type: application/json

{
  "name": "Updated Name",
  "email": "newemail@example.com",
  "age": 26
}

Delete Customer

DELETE /api/v1/customers/{customerId}
Authorization: Bearer {token}

Upload Profile Image

POST /api/v1/customers/{customerId}/profile-image
Authorization: Bearer {token}
Content-Type: multipart/form-data

file: {image-file}

Health Check

GET /actuator/health
GET /actuator/info

🧪 Testing

Backend Tests

Run all tests (unit + integration)

cd backend
mvn clean verify

Run only unit tests

mvn test

Run only integration tests

mvn failsafe:integration-test

Run a specific test class

mvn test -Dtest=CustomerServiceTest

Frontend Tests

Angular Tests

cd frontend/angular
npm test

🐳 Docker

Build Backend Docker Image

cd backend
mvn compile jib:build -Ddocker.image.tag=latest

Build React Frontend Docker Image

cd frontend/react
docker build -t amigoscode-react:latest .

Run with Docker Compose

# Start all services
docker-compose up -d

# Stop all services
docker-compose down

🚢 Deployment

CI/CD Pipeline

The project uses GitHub Actions for continuous integration and deployment:

1. Backend CI (backend-ci.yml): Runs on PRs to main branch

   • Sets up PostgreSQL service
   • Runs all tests
   • Validates build

2. Backend CD (backend-cd.yml): Deploys on push to main

   • Builds Docker image using Jib
   • Pushes to Docker Hub
   • Deploys to AWS Elastic Beanstalk
   • Sends Slack notifications

3. Frontend React CD (frontend-react-cd.yml): Deploys React app

   • Builds Docker image
   • Pushes to Docker Hub
   • Deploys to AWS

Environment Variables

Backend Production

SPRING_DATASOURCE_URL=jdbc:postgresql://your-rds-endpoint:5432/dbname
SPRING_DATASOURCE_USERNAME=your-username
SPRING_DATASOURCE_PASSWORD=your-password
AWS_ACCESS_KEY_ID=your-aws-key
AWS_SECRET_ACCESS_KEY=your-aws-secret

Frontend Production

VITE_API_BASE_URL=https://your-api-domain.com

📦 Project Structure

full-stack-professional/
├── backend/
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/amigoscode/
│   │   │   │   ├── auth/          # Authentication logic
│   │   │   │   ├── customer/      # Customer domain
│   │   │   │   ├── exception/     # Exception handling
│   │   │   │   ├── jwt/           # JWT utilities
│   │   │   │   └── s3/            # AWS S3 integration
│   │   │   └── resources/
│   │   │       ├── db/migration/  # Flyway migrations
│   │   │       └── application.yml
│   │   └── test/                  # Test files
│   └── pom.xml
├── frontend/
│   ├── react/                     # React application
│   │   ├── src/
│   │   │   ├── components/
│   │   │   └── services/
│   │   └── package.json
│   └── angular/                   # Angular application
│       ├── src/
│       │   ├── app/
│       │   └── environments/
│       └── package.json
├── .github/workflows/             # CI/CD pipelines
├── docker-compose.yml
├── Dockerrun.aws.json            # AWS EB configuration
└── README.md

🔧 Configuration

Database Configuration

The application uses PostgreSQL with the following default settings:

• Host: localhost
• Port: 5332 (mapped from container's 5432)
• Database: customer
• Username: amigoscode
• Password: password

CORS Configuration

In development, CORS is configured to allow all origins. Update for production in application.yml.

AWS S3 Configuration

Configure S3 bucket details in application.yml:

aws:
  region: us-east-1
  s3:
    buckets:
      customer: your-bucket-name

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Spring Boot team for the excellent framework
• React and Angular communities
• AWS for cloud services
• All contributors and maintainers

📞 Support

For support, please open an issue in the GitHub repository.