A complete full-stack web application — React + TypeScript frontend with a Java Spring Boot + PostgreSQL backend — demonstrating end-to-end product development with authentication, real-time UI updates, and responsive design.
Deploy to Vercel (frontend) + Railway/Render (backend) — add link here
Add screenshots of the login page, dashboard, and task board here
| Technology | Purpose |
|---|---|
| React 18 + TypeScript | UI framework |
| Redux Toolkit | Global state management |
| React Router v6 | Client-side routing |
| Axios | HTTP client with JWT interceptors |
| TailwindCSS | Utility-first styling |
| React Hook Form + Zod | Form validation |
| Technology | Purpose |
|---|---|
| Java 17 + Spring Boot 3 | REST API framework |
| Spring Security + JWT | Authentication & authorization |
| Spring Data JPA | ORM layer |
| PostgreSQL 15 | Primary database |
| Docker + Docker Compose | Containerization |
- User registration and login with JWT authentication
- Auto token refresh on expiry
- Create, view, edit, and delete tasks
- Filter tasks by status (Open / In Progress / Done) and priority
- Responsive layout — works on mobile and desktop
- Protected routes — unauthenticated users redirected to login
┌─────────────────────────────┐
│ React Frontend │
│ (Vercel / Nginx) │
│ │
│ Auth Context → Redux Store │
│ Axios (JWT interceptor) │
└────────────┬────────────────┘
│ HTTPS REST
┌────────────▼────────────────┐
│ Spring Boot REST API │
│ (Railway / EC2) │
│ │
│ /api/auth /api/tasks │
└────────────┬────────────────┘
│
┌────────────▼────────────────┐
│ PostgreSQL │
└─────────────────────────────┘
- Node.js 18+
- Java 17+
- Docker & Docker Compose
cd backend
docker-compose up -dBackend runs at http://localhost:8080
cd frontend
npm install
cp .env.example .env
npm run devFrontend runs at http://localhost:5173
VITE_API_BASE_URL=http://localhost:8080/api
DB_URL=jdbc:postgresql://localhost:5432/taskdb
DB_USERNAME=postgres
DB_PASSWORD=postgres
JWT_SECRET=your-256-bit-secret
fullstack-task-app/
├── backend/ # Spring Boot API (see spring-boot-jwt-api repo)
│ ├── src/
│ ├── docker-compose.yml
│ └── pom.xml
└── frontend/ # React + TypeScript app
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Route-level page components
│ ├── services/ # Axios API clients
│ ├── hooks/ # Custom React hooks
│ ├── context/ # Auth context
│ └── types/ # TypeScript interfaces
├── package.json
└── vite.config.ts
npm run build
# Push to GitHub, connect repo to Vercel
# Set VITE_API_BASE_URL to your backend URL# Connect GitHub repo to Railway
# Add environment variables in Railway dashboard
# Railway auto-detects Spring Boot and builds it