A modern, full-stack task management application built with Reflex (Python reactive web framework) and FastAPI. Features a responsive web interface with real-time updates, comprehensive REST API, and full bilingual support (English/Chinese).
Task Statistics Dashboard
Task Management Interface
- Modern, responsive UI with multi-page navigation (Tasks/Statistics)
- Kanban-style columns: Todo, In Progress, Done
- Real-time updates between web UI and database
- Task statistics dashboard with gradient cards and progress indicators
- Responsive design works on desktop, tablet, and mobile
- Dark/light mode toggle with smooth transitions
- Modern gradient cards for task counts and completion rates
- Real-time statistics with circular progress indicators
- Task breakdown by status with visual progress bars
- Priority analytics with progress tracking
- Responsive grid layout for all screen sizes
- Filter by status: All, Todo, In Progress, Done
- Search functionality across titles and descriptions
- Sort by: Created date, due date, priority, or title
- Ascending/descending order options
- Real-time filtering with instant results
- Full English and Chinese language support
- Instant language switching with reactive updates
- Comprehensive coverage: 60+ translated UI elements
- Professional localization for all user-facing text
- REST API: Full CRUD operations with filtering and search
- SQLite by default with MySQL production support
- API documentation: Auto-generated Swagger/OpenAPI docs
- Health monitoring: Built-in health check endpoints
- Comprehensive testing suite with pytest
- Create, read, update, delete tasks with full validation
- Priority levels: Low, Medium, High with color coding
- Due dates with quick selection buttons (Today, Tomorrow, Next Week)
- Status tracking: Todo → In Progress → Done workflow
- Modern task cards with gradient backgrounds based on priority
- Python 3.8+
- pip (Python package manager)
- Clone the repository:
git clone <repository-url>
cd task-dashboard- Install dependencies:
pip install -r requirements.txt- Start the development server:
reflex run- Open your browser to http://localhost:3000
# Development server with hot reload
reflex run
# Access at http://localhost:3000# Run API server on port 8000
python -m task_dashboard.api
# Or with uvicorn directly
uvicorn task_dashboard.api:api_app --reload --port 8000# Generate static build for deployment
reflex exportThe application supports both SQLite (default for development) and MySQL (for production).
.env- Development configuration (default: SQLite).env.production- Production configuration (MySQL)
DB_TYPE=sqlite
DB_PATH=task_dashboard.dbDB_TYPE=mysql
DB_HOST=your_mysql_host
DB_PORT=3306
DB_USER=your_mysql_user
DB_PASSWORD=your_mysql_password
DB_NAME=task_dashboardTo use MySQL, either:
- Set
DB_TYPE=mysqlin your .env file - Or use the
.env.productionfile
The application includes deployment configuration files in the deploy/ directory:
nginx.conf- Nginx reverse proxy configurationtask-dashboard.service- Systemd service file for running the applicationdeploy.sh- Automated deployment script that uses environment variablesREADME.md- Deployment instructions
-
Set the required environment variables:
export DOMAIN_NAME=your-domain.com export SSL_CERT_PATH=/path/to/certificate.crt export SSL_KEY_PATH=/path/to/private.key export APP_PATH=/path/to/task-dashboard export VENV_PATH=/path/to/venv export SERVICE_USER=www-data
-
Run the automated deployment script:
cd deploy/ ./deploy.sh all -
Start the service:
sudo systemctl start task-dashboard
-
Configure nginx:
sudo cp deploy/nginx.conf /etc/nginx/sites-available/task-dashboard sudo ln -s /etc/nginx/sites-available/task-dashboard /etc/nginx/sites-enabled/ sudo nginx -t && sudo systemctl reload nginx -
Configure systemd service:
sudo cp deploy/task-dashboard.service /etc/systemd/system/ sudo systemctl daemon-reload sudo systemctl enable task-dashboard -
Start the service:
sudo systemctl start task-dashboard
Run the comprehensive test suite:
# Run all tests
python -m pytest tests/ -v
# Run specific test file
python tests/test_api.py -v
# Run with coverage
python -m pytest tests/ --cov=task_dashboardThe REST API is available at http://localhost:8000 when running the API server.
All API endpoints require authentication via Bearer token. Use the following endpoints to manage authentication:
- POST
/auth/register- Register new user account - POST
/auth/login- Login and receive Bearer token - GET
/auth/me- Get current user information
All task endpoints require Bearer token authentication:
- GET
/tasks- List all tasks with optional filtering - POST
/tasks- Create a new task - GET
/tasks/{id}- Get a specific task - PUT
/tasks/{id}- Update a task - PATCH
/tasks/{id}/status- Update task status only - DELETE
/tasks/{id}- Delete a task - GET
/health- Health check endpoint
# Register new user
curl -X POST http://localhost:8000/auth/register \
-H "Content-Type: application/json" \
-d '{
"username": "user1",
"email": "user1@example.com",
"password": "password123"
}'
# Login to get Bearer token
curl -X POST http://localhost:8000/auth/login \
-H "Content-Type: application/json" \
-d '{
"username": "user1",
"password": "password123"
}'
# List all tasks (with Bearer token)
curl -H "Authorization: Bearer user1" http://localhost:8000/tasks
# Filter tasks by status and priority
curl -H "Authorization: Bearer user1" "http://localhost:8000/tasks?status=todo&priority=high"
# Search tasks
curl -H "Authorization: Bearer user1" "http://localhost:8000/tasks?search=urgent"
# Create a new task (with Bearer token)
curl -X POST http://localhost:8000/tasks \
-H "Content-Type: application/json" \
-H "Authorization: Bearer user1" \
-d '{
"title": "Complete project documentation",
"description": "Write comprehensive README and API docs",
"priority": "high",
"due_date": "2024-12-31"
}'
# Update task status
curl -X PATCH http://localhost:8000/tasks/1/status \
-H "Content-Type: application/json" \
-H "Authorization: Bearer user1" \
-d '{"status": "done"}'
# Get current user info
curl -H "Authorization: Bearer user1" http://localhost:8000/auth/meInteractive API documentation is available at:
- Swagger UI: http://localhost:8000/docs
- ReDoc: http://localhost:8000/redoc
The application supports both English and Chinese languages with instant switching:
- Language Selector: Located in the top-right corner of the web interface
- Instant Translation: All UI elements update immediately when switching languages
- Comprehensive Coverage: 60+ translated elements including buttons, labels, messages, and help text
- English (en): Default language
- 中文 (zh): Simplified Chinese
To add support for additional languages:
- Edit
task_dashboard/translations.py - Add new language dictionary in the
translationsdictionary - Add language to
get_available_languages()method - Restart the application
Example structure for new language:
"es": {
"app_title": "Panel de Tareas",
"sign_in": "Iniciar Sesión",
# ... add all required translation keys
}The codebase follows a modular architecture with clear separation of concerns:
- task_dashboard.py: Main Reflex application entry point
- api.py: FastAPI REST endpoints with authentication
- auth.py: JWT-based authentication utilities
- database.py: SQLAlchemy models and database configuration
- models.py: Pydantic data models for API responses
- state.py: Centralized state management with translation support
- components.py: Reusable UI components
- modals.py: Modal dialogs for forms
- translations.py: Multi-language support system
- Frontend: Reflex (Python reactive web framework)
- Backend: FastAPI with SQLAlchemy ORM
- Database: SQLite (development) / MySQL (production)
- Styling: Tailwind CSS with Reflex components
- Testing: pytest with FastAPI TestClient
task-dashboard/
├── task_dashboard/
│ ├── __init__.py
│ ├── task_dashboard.py # Main Reflex app
│ ├── api.py # FastAPI endpoints
│ ├── auth.py # Authentication utilities
│ ├── database.py # SQLAlchemy models and DB config
│ ├── models.py # Pydantic data models
│ ├── state.py # Reflex State class with business logic
│ ├── components.py # Reusable UI components
│ ├── modals.py # Modal dialogs for forms
│ └── translations.py # Multi-language support (EN/ZH)
├── tests/
│ ├── __init__.py
│ ├── test_api.py # API tests
│ └── test_api_auth.py # Authentication tests
├── assets/
│ └── favicon.ico
├── requirements.txt # Python dependencies
├── rxconfig.py # Reflex configuration
└── task_dashboard.db # SQLite database
The application uses Reflex's reactive state management:
- User actions trigger state methods
- State methods update the database
- Database changes automatically re-render the UI
- All state is synchronized between web UI and database
- Bilingual Support: Language switching handled through reactive translation system
Each task contains:
- title: Task title (required)
- description: Detailed description (optional)
- status: todo, in_progress, or done
- priority: low, medium, or high
- due_date: Optional due date (YYYY-MM-DD format)
- created_at: Auto-generated creation timestamp
- updated_at: Auto-generated update timestamp
- Kanban-style columns: Todo, In Progress, Done
- Task statistics: Real-time counters and completion rates
- Advanced filtering: Filter by status, priority, search terms
- Sorting: Sort by creation date, due date, priority, or title
- Quick actions: Edit, delete, and update status
- Responsive design: Works on desktop, tablet, and mobile
- Bilingual UI: Switch between English and Chinese with instant translation
- Full CRUD operations: Create, read, update, delete tasks
- Filtering: Filter by status, priority, and search terms
- Validation: Input validation and error handling
- Pagination: Support for large datasets
- Health checks: API health monitoring endpoint
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Make your changes
- Add tests for new functionality
- Run the test suite:
python -m pytest tests/ - Commit your changes:
git commit -am 'Add new feature' - Push to the branch:
git push origin feature-name - Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
For questions or issues:
- Check the API documentation
- Review the test files for usage examples
- Open an issue on the repository