Task Management Board - Full Stack Project

A modern, production-ready task management application built with React 18 (frontend) and Spring Boot 3 (backend). Perfect for showcasing full-stack development skills to potential employers.

📋 Table of Contents

Project Overview
Features
Tech Stack
Project Structure
Prerequisites
Quick Start
Backend Setup
Frontend Setup
API Documentation
Database Schema
Development
Testing
Deployment
Contributing
License

🎯 Project Overview

This is an Advanced Task Management Board - similar to Asana, Trello, or Monday.com but built from scratch. It's designed as a portfolio project to demonstrate:

✨ Modern React patterns (hooks, state management, components) ✨ Solid backend architecture (Spring Security, JPA, REST APIs) ✨ Full-stack development (database design, API design, UI/UX) ✨ Production-ready code (error handling, validation, testing)

✨ Features

Core Features

✅ User authentication (signup/login with JWT)
✅ Create and manage boards
✅ Kanban-style columns (To Do, In Progress, Done)
✅ Drag-and-drop tasks between columns
✅ Create/edit/delete tasks
✅ Task details modal

Advanced Features

✅ Task assignment to users
✅ Task priority levels (Low, Medium, High)
✅ Due dates for tasks
✅ Comments on tasks
✅ Real-time search and filtering
✅ Task statistics dashboard
✅ Role-based access control (Admin, User)

Polish Features

✅ Responsive design (mobile-friendly)
✅ Dark mode support
✅ Activity history/timeline
✅ User avatars and profiles
✅ Email notifications (optional)
✅ Performance optimization
✅ Comprehensive testing

🛠️ Tech Stack

Frontend

Technology	Purpose	Version
React	UI framework	18.x
Redux/Zustand	State management	Latest
Axios	HTTP client	Latest
React Beautiful DnD	Drag-and-drop	Latest
React Router	Client-side routing	6.x
Tailwind CSS	Styling	3.x
Vite	Build tool	Latest

Backend

Technology	Purpose	Version
Spring Boot	Web framework	3.2.0
Spring Security	Authentication	Latest
Spring Data JPA	ORM	Latest
PostgreSQL	Database	12+
JWT (JJWT)	Token authentication	0.12.3
Flyway	Database migrations	Latest
Maven	Build tool	3.8+

Development Tools

Tool	Purpose
Git	Version control
Docker	Containerization (optional)
Postman/Insomnia	API testing
VS Code	Code editor
IntelliJ IDEA	Java IDE (optional)

📁 Project Structure

task-management-board/
│
├── backend/                          # Spring Boot backend
│   ├── pom.xml                      # Maven dependencies
│   ├── src/
│   │   ├── main/java/com/taskboard/
│   │   │   ├── TaskboardApplication.java
│   │   │   ├── config/              # Configuration classes
│   │   │   ├── entity/              # JPA entities
│   │   │   ├── repository/          # Data access layer
│   │   │   ├── service/             # Business logic
│   │   │   ├── controller/          # REST endpoints
│   │   │   ├── security/            # JWT & Security
│   │   │   ├── dto/                 # Data transfer objects
│   │   │   └── exception/           # Error handling
│   │   ├── resources/
│   │   │   ├── application.yml      # Configuration
│   │   │   └── db/migration/        # Flyway migrations
│   │   └── test/
│   └── README.md
│
├── frontend/                         # React frontend
│   ├── package.json                 # Node dependencies
│   ├── vite.config.js               # Vite configuration
│   ├── src/
│   │   ├── App.jsx                  # Main app component
│   │   ├── main.jsx                 # Entry point
│   │   ├── pages/                   # Page components
│   │   ├── components/              # Reusable components
│   │   ├── store/                   # State management (Redux/Zustand)
│   │   ├── services/                # API services
│   │   ├── hooks/                   # Custom React hooks
│   │   ├── utils/                   # Utility functions
│   │   ├── styles/                  # Global styles
│   │   └── index.css
│   ├── public/                      # Static assets
│   └── README.md
│
├── docs/                            # Documentation
│   ├── API.md                       # API documentation
│   ├── DATABASE.md                  # Database schema
│   ├── ARCHITECTURE.md              # Architecture overview
│   └── SETUP.md                     # Setup guide
│
├── .gitignore
├── README.md                        # This file
└── LICENSE

✅ Prerequisites

Before you begin, ensure you have the following installed:

Required

Java 17+
```
java -version
```
Maven 3.8+
```
mvn -version
```
Node.js 16+ (with npm or yarn)
```
node --version
npm --version
```
PostgreSQL 12+
```
psql --version
```
Git
```
git --version
```

Optional but Recommended

Docker (for containerized development)
Postman/Insomnia (for API testing)
VS Code or IntelliJ IDEA (code editors)

🚀 Quick Start

🔧 Backend Setup

Detailed Backend Instructions

Step 1: Generate Project (using Spring Initializr)

Visit https://start.spring.io/ and configure:

Project: Maven
Language: Java
Spring Boot: 3.2.0+
Java: 17+
Group: com.taskboard
Artifact: taskboard-api

Dependencies to add:

Spring Web
Spring Security
Spring Data JPA
PostgreSQL Driver
Lombok
Spring Boot DevTools
Validation
Flyway Migration
Spring Security Test

Click Generate and extract the ZIP file.

Step 2: Configure Database

Edit src/main/resources/application.yml:

spring:
  datasource:
    url: jdbc:postgresql://localhost:5432/taskboard_db
    username: taskboard_user
    password: taskboard_pass
  jpa:
    hibernate:
      ddl-auto: validate

Step 3: Add JWT Secret

In application.yml, add:

jwt:
  secret: your-super-secret-key-at-least-32-characters-long
  expiration: 900000        
  refresh-expiration: 604800000

Step 4: Build & Run

mvn clean install
mvn spring-boot:run

Step 5: Verify

curl http://localhost:8080/api/auth
# Should return 401 Unauthorized

Backend API Endpoints

Base URL: http://localhost:8080/api

Authentication:

POST /auth/signup - Register new user
POST /auth/login - Login user
POST /auth/refresh - Refresh token
POST /auth/logout - Logout user

Boards:

GET /boards - Get all user's boards
GET /boards/{id} - Get board details
POST /boards - Create board
PUT /boards/{id} - Update board
DELETE /boards/{id} - Delete board

Columns:

GET /boards/{boardId}/columns - Get columns
POST /boards/{boardId}/columns - Create column
PUT /columns/{id} - Update column
DELETE /columns/{id} - Delete column

Tasks:

GET /columns/{columnId}/tasks - Get tasks
POST /columns/{columnId}/tasks - Create task
PUT /tasks/{id} - Update task
DELETE /tasks/{id} - Delete task
PATCH /tasks/{id}/move - Move task between columns
GET /tasks?search=...&priority=... - Search tasks

Comments:

GET /tasks/{taskId}/comments - Get comments
POST /tasks/{taskId}/comments - Add comment
PUT /comments/{id} - Update comment
DELETE /comments/{id} - Delete comment

🎨 Frontend Setup

Detailed Frontend Instructions

Step 1: Create React Project with Vite

npm create vite@latest taskboard-frontend -- --template react
cd taskboard-frontend
npm install

Step 2: Install Dependencies

npm install axios


npm install react-router-dom


npm install react-beautiful-dnd


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p


npm install @headlessui/react @heroicons/react

Step 3: Project Structure

Create the following structure in src/:

src/
├── components/
│   ├── Auth/
│   │   ├── LoginForm.jsx
│   │   └── SignupForm.jsx
│   ├── Board/
│   │   ├── KanbanBoard.jsx
│   │   ├── Column.jsx
│   │   └── TaskCard.jsx
│   ├── Task/
│   │   ├── TaskModal.jsx
│   │   ├── CommentSection.jsx
│   │   └── TaskForm.jsx
│   └── Common/
│       ├── Header.jsx
│       ├── Sidebar.jsx
│       └── Loader.jsx
├── pages/
│   ├── HomePage.jsx
│   ├── BoardPage.jsx
│   └── LoginPage.jsx
├── store/
│   ├── authStore.js
│   ├── boardStore.js
│   └── taskStore.js
├── services/
│   ├── api.js
│   ├── authService.js
│   ├── boardService.js
│   └── taskService.js
├── hooks/
│   ├── useAuth.js
│   └── useFetchBoard.js
├── utils/
│   ├── constants.js
│   └── helpers.js
├── App.jsx
├── main.jsx
└── index.css

Step 4: Set API Base URL

Create src/utils/constants.js:

export const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8080/api';
export const ACCESS_TOKEN_KEY = 'access_token';
export const REFRESH_TOKEN_KEY = 'refresh_token';

Step 5: Run Development Server

npm run dev

Open http://localhost:5173

📊 Database Schema

Tables Overview

users

Stores user accounts
Fields: id, email, password, name, role, created_at, updated_at

boards

Stores task boards owned by users
Fields: id, name, description, owner_id, created_at, updated_at

board_columns

Stores columns within boards (To Do, In Progress, Done)
Fields: id, board_id, name, position, created_at, updated_at

tasks

Stores tasks within columns
Fields: id, column_id, title, description, assignee_id, priority, due_date, position, created_by, created_at, updated_at

comments

Stores comments on tasks
Fields: id, task_id, author_id, content, created_at, updated_at

See docs/DATABASE.md for detailed schema.

🔐 Authentication

How It Works

User Signs Up
- Sends email, password, name to /auth/signup
- Backend hashes password with BCrypt
- Creates user in database
- Returns JWT access token + refresh token
User Logs In
- Sends email, password to /auth/login
- Backend verifies credentials
- Returns JWT tokens
API Requests
- Frontend sends JWT in Authorization header: Bearer {token}
- Backend validates JWT
- Allows/denies request
Token Refresh
- Access token expires after 15 minutes
- Use refresh token to get new access token
- No need to login again

JWT Claims

{
  "sub": "user-uuid",
  "email": "user@example.com",
  "username": "user-name",
  "iat": 1234567890,
  "exp": 1234568790
}

💻 Development

Running in Development Mode

Terminal 1 - Backend:

cd backend
mvn spring-boot:run

Terminal 2 - Frontend:

cd frontend
npm run dev

Terminal 3 - Database (optional):

psql -U taskboard_user -d taskboard_db

Testing API Endpoints

Using Postman or Insomnia:

Sign Up

POST http://localhost:8080/api/auth/signup
Content-Type: application/json

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

Login

POST http://localhost:8080/api/auth/login
Content-Type: application/json

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

Create Board (requires Authorization header)

POST http://localhost:8080/api/boards
Authorization: Bearer {access_token}
Content-Type: application/json

{
  "name": "My Project",
  "description": "Project description"
}

Code Formatting

Backend:

mvn spotless:apply

Frontend:

npm run format

🧪 Testing

Backend Tests

cd backend


mvn test

mvn test -Dtest=AuthControllerTest

mvn test jacoco:report

Frontend Tests

cd frontend


npm run test

e
npm run test:coverage

npm run cypress:open

🚢 Deployment

Backend Deployment

Docker Deployment

Create Dockerfile:

FROM openjdk:17-jdk-slim
COPY target/taskboard-api-1.0.0.jar app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

Build & Run:

mvn clean package -DskipTests
docker build -t taskboard-api .
docker run -p 8080:8080 taskboard-api

Cloud Deployment

Heroku: Push to Heroku with Procfile
AWS: Deploy to Elastic Beanstalk
DigitalOcean: Use App Platform or Droplet
Railway: Simple git push deployment

Frontend Deployment

Netlify/Vercel

Build the project:
```
npm run build
```
Deploy:
- Connect GitHub repository
- Set build command: npm run build
- Set publish directory: dist

AWS S3 + CloudFront

npm run build
aws s3 sync dist/ s3://your-bucket-name

Environment Variables

Backend (.env or application-prod.yml):

DATABASE_URL=jdbc:postgresql://prod-db:5432/taskboard
JWT_SECRET=production-secret-key
SPRING_PROFILE=production

Frontend (.env.production):

VITE_API_URL=https://api.yourdomain.com

📖 Additional Documentation

API Documentation: See docs/API.md
Database Schema: See docs/DATABASE.md
Architecture: See docs/ARCHITECTURE.md
Setup Guide: See docs/SETUP.md

🤝 Contributing

We welcome contributions! Here's how:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit changes (git commit -m 'Add AmazingFeature')
Push to branch (git push origin feature/AmazingFeature)
Open a Pull Request

Coding Standards

Follow REST API conventions
Use meaningful commit messages
Write unit tests for new features
Update documentation

📋 Checklist for Portfolio

📸 Screenshots

(Add screenshots of your application here)

🎓 Learning Outcomes

By completing this project, you'll have learned:

Frontend:

React hooks and state management
Component composition
API integration with Axios
Routing and navigation
Drag-and-drop implementation
Responsive design with Tailwind CSS
Form validation

Backend:

Spring Boot REST APIs
Spring Security with JWT
Database design and JPA
Service-oriented architecture
Exception handling
Input validation
Database migrations

Full-Stack:

Authentication flow
Request/response handling
CORS configuration
Error handling across layers
Testing strategies
Deployment processes

📞 Support

For questions or issues:

Check existing documentation
Search GitHub issues
Create a new issue with details
Contact project maintainer

📄 License

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

🙏 Acknowledgments

Spring Boot documentation
React official guides
PostgreSQL documentation
JWT best practices
Icons from Heroicons

🎯 Project Status

Current Phase: Boilerplate Complete

👨‍💻 Author

Placide FOLEU

LinkedIn: linkedin.com/in/placide-rigole-foleu
GitHub: @rigole
Email: foplacide@gmail.com

📄 License

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

Built with passion using Spring Boot · Angular · PostgreSQL

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
taskboardbackend		taskboardbackend
README.md		README.md
taskboardbackend.zip		taskboardbackend.zip

Folders and files

Latest commit

History

Repository files navigation

Task Management Board - Full Stack Project

📋 Table of Contents

🎯 Project Overview

✨ Features

Core Features

Advanced Features

Polish Features

🛠️ Tech Stack

Frontend

Backend

Development Tools

📁 Project Structure

✅ Prerequisites

Required

Optional but Recommended

🚀 Quick Start

🔧 Backend Setup

Detailed Backend Instructions

Step 1: Generate Project (using Spring Initializr)

Step 2: Configure Database

Step 3: Add JWT Secret

Step 4: Build & Run

Step 5: Verify

Backend API Endpoints

🎨 Frontend Setup

Detailed Frontend Instructions

Step 1: Create React Project with Vite

Step 2: Install Dependencies

Step 3: Project Structure

Step 4: Set API Base URL

Step 5: Run Development Server

📊 Database Schema

Tables Overview

🔐 Authentication

How It Works

JWT Claims

💻 Development

Running in Development Mode

Testing API Endpoints

Code Formatting

🧪 Testing

Backend Tests

Frontend Tests

🚢 Deployment

Backend Deployment

Docker Deployment

Cloud Deployment

Frontend Deployment

Netlify/Vercel

AWS S3 + CloudFront

Environment Variables

📖 Additional Documentation

🤝 Contributing

Coding Standards

📋 Checklist for Portfolio

📸 Screenshots

🎓 Learning Outcomes

📞 Support

📄 License

🙏 Acknowledgments

🎯 Project Status

👨‍💻 Author

📄 License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages