ProductiveFlow - Full-Stack Productivity Application

A comprehensive productivity application built with React TypeScript frontend, Spring Boot backend, and MongoDB Atlas database. Features JWT authentication and real-time synchronization capabilities.

🏗️ Project Structure

ProductiveFlow/
├── frontend/                  # React TypeScript application
│   ├── public/               # Public assets
│   ├── src/                  # Source code
│   │   ├── components/       # Reusable React components
│   │   ├── pages/           # Page components
│   │   ├── services/        # API services
│   │   ├── hooks/           # Custom React hooks
│   │   ├── context/         # React context providers
│   │   ├── types/           # TypeScript type definitions
│   │   └── utils/           # Utility functions
│   ├── package.json         # Frontend dependencies
│   └── .env.example         # Environment variables template
├── backend/                  # Spring Boot application
│   ├── src/main/java/com/productiveflow/
│   │   ├── config/          # Configuration classes
│   │   ├── controller/      # REST controllers
│   │   ├── model/           # Data models
│   │   ├── repository/      # Data repositories
│   │   ├── service/         # Business logic services
│   │   └── security/        # Security configurations
│   ├── src/main/resources/  # Configuration files
│   └── pom.xml              # Backend dependencies
├── docs/                    # Project documentation
├── .gitignore              # Git ignore rules
└── README.md               # This file

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• Java (v17 or higher)
• Maven (v3.6 or higher)
• MongoDB Atlas account
• Git

1. Clone the Repository

git clone <repository-url>
cd ProductiveFlow

2. MongoDB Atlas Setup

1. Create a MongoDB Atlas account at https://www.mongodb.com/atlas
2. Create a new cluster
3. Create a database user with read/write permissions
4. Get your connection string
5. Whitelist your IP address

3. Backend Setup

Install Dependencies

cd backend
mvn clean install

Configure Database Connection

1. Copy the MongoDB Atlas connection string
2. Update src/main/resources/application.properties:

# Replace with your actual MongoDB Atlas connection string
spring.data.mongodb.uri=mongodb+srv://<username>:<password>@<cluster-name>.mongodb.net/productiveflow?retryWrites=true&w=majority

Generate JWT Secret

For production, generate a secure JWT secret:

# Generate a secure random string for JWT secret
openssl rand -hex 32

Update application.properties:

jwt.secret=your-generated-secure-secret-key

Run Backend

mvn spring-boot:run

The backend will start on http://localhost:8080

4. Frontend Setup

Install Dependencies

cd frontend
npm install

Configure Environment

1. Copy the environment template:

cp .env.example .env

2. Update .env if needed (default values should work for local development)

Run Frontend

npm start

The frontend will start on http://localhost:3000

🔧 Configuration Details

Backend Configuration (application.properties)

# Server Configuration
server.port=8080
server.servlet.context-path=/api

# MongoDB Configuration
spring.data.mongodb.uri=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/productiveflow
spring.data.mongodb.database=productiveflow

# JWT Configuration
jwt.secret=your-secret-key
jwt.expiration=86400000

# CORS Configuration
cors.allowed-origins=http://localhost:3000
cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS
cors.allowed-headers=*

# Logging
logging.level.com.productiveflow=DEBUG

Frontend Configuration (.env)

# API Configuration
REACT_APP_API_URL=http://localhost:8080/api

# App Configuration
REACT_APP_NAME=ProductiveFlow
REACT_APP_VERSION=1.0.0

# WebSocket Configuration
REACT_APP_WS_URL=ws://localhost:8080/ws

📦 Key Dependencies

Backend (Spring Boot)

• Spring Boot Web - REST API framework
• Spring Boot Security - Authentication and authorization
• Spring Data MongoDB - MongoDB integration
• JWT (jjwt) - JSON Web Token implementation
• Spring Boot WebSocket - Real-time communication
• Spring Boot DevTools - Development utilities

Frontend (React)

• React 19 - UI library
• TypeScript - Type safety
• React Router DOM - Client-side routing
• Axios - HTTP client
• Material-UI or Tailwind CSS (to be added)

🔐 Authentication Flow

JWT Authentication Setup

1. User Registration/Login → Backend validates credentials
2. JWT Token Generation → Backend creates signed JWT token
3. Token Storage → Frontend stores token in localStorage
4. API Requests → Frontend includes token in Authorization header
5. Token Validation → Backend validates token on protected routes

Security Features

• Password hashing with BCrypt
• JWT token-based authentication
• CORS configuration for cross-origin requests
• Input validation and sanitization
• Role-based access control ready

🌐 API Endpoints

Authentication Endpoints

POST /api/auth/register  - User registration
POST /api/auth/login     - User login
POST /api/auth/logout    - User logout
GET  /api/auth/me        - Get current user
POST /api/auth/refresh   - Refresh JWT token

Protected Endpoints (Coming Soon)

GET    /api/tasks        - Get user tasks
POST   /api/tasks        - Create new task
PUT    /api/tasks/:id    - Update task
DELETE /api/tasks/:id    - Delete task

🔄 Real-time Features (Future)

The application is prepared for real-time features using:

• WebSocket support in Spring Boot
• Socket.IO or native WebSocket in React
• Real-time task updates
• Live collaboration features
• Instant notifications

🛠️ Development Commands

Backend Commands

# Compile the project
mvn compile

# Run tests
mvn test

# Package the application
mvn package

# Run with specific profile
mvn spring-boot:run -Dspring-boot.run.profiles=dev

Frontend Commands

# Start development server
npm start

# Run tests
npm test

# Build for production
npm run build

# Type check
npx tsc --noEmit

📝 Environment Profiles

Development Environment

• Database: MongoDB Atlas development cluster
• CORS: Permissive (localhost only)
• Logging: Debug level
• JWT: Development secret (change in production)

Production Environment

• Database: MongoDB Atlas production cluster
• CORS: Restricted to production domain
• Logging: Info/Error level
• JWT: Secure secret key
• HTTPS: Required

🚀 Deployment

Backend Deployment

1. Build the application:

   mvn clean package

2. Deploy JAR file to your hosting service

3. Set production environment variables

4. Configure MongoDB Atlas for production

Frontend Deployment

1. Build the application:

   npm run build

2. Deploy build folder to static hosting (Netlify, Vercel, etc.)

3. Configure production API URL

🧪 Testing

Backend Testing

# Run all tests
mvn test

# Run specific test class
mvn test -Dtest=UserServiceTest

# Run with coverage
mvn test jacoco:report

Frontend Testing

# Run all tests
npm test

# Run tests with coverage
npm test -- --coverage

# Run specific test file
npm test -- UserService.test.ts

📚 Additional Resources

• Spring Boot Documentation
• React Documentation
• MongoDB Atlas Documentation
• JWT.io - JWT token debugging
• TypeScript Documentation

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

📄 License

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

📞 Support

For support and questions:

• Create an issue in the repository
• Check the documentation in the docs/ folder
• Review the API documentation (generated with Swagger - coming soon)

---

Happy coding! 🎉