A full-stack Team Task Manager application I built with a Flask REST API backend and React frontend featuring a Kanban-style board for managing tasks. I built this to get hands-on experience running a complete web application stack locally — from setting up PostgreSQL, running the Flask API, to serving the React frontend.
- React 18 with TypeScript
- Vite for build tooling
- Tailwind CSS for styling
- Lucide React for icons
- React Router for navigation and protected routes
- Python Flask REST API
- Flask-SQLAlchemy for database ORM
- Flask-CORS for cross-origin requests
- PyJWT for JWT authentication
- PostgreSQL database
taskapp/
|-- src/ # React frontend
| |-- components/ # React components
| |-- services/ # API service layer
| |-- types/ # TypeScript types
| └-- App.tsx
|-- backend/ # Flask backend
| |-- app/
| | |-- __init__.py # Application factory
| | |-- models.py # SQLAlchemy models
| | └-- routes.py # API endpoints
| |-- requirements.txt
| |-- schema.sql # Database schema
| └-- run.py # Application entry point
|-- package.json
└-- README.md
- Kanban-style dashboard with 3 columns (To Do, In Progress, Done)
- Drag and drop tasks between columns
- Create, read, update and delete tasks
- Task priorities (low, medium, high)
- Responsive design for mobile and desktop
- RESTful API architecture with JWT authentication
- Login/logout functionality with persisted sessions
- Protected routes that require authentication
- Pre-seeded demo users for testing
Creating the database user and granting privileges via psql
API running locally on http://localhost:5000
Vite dev server running on http://localhost:5173
Full stack application running locally in the browser
- Python 3.8 or higher
- Node.js 16 or higher
- npm or yarn
- PostgreSQL 12 or higher
First ensure PostgreSQL is installed and running on your system.
Create a new PostgreSQL database:
sudo -i -u postgres
psql
CREATE USER taskapp_user WITH PASSWORD 'taskapp_password';
CREATE DATABASE taskapp OWNER taskapp_user;
GRANT ALL PRIVILEGES ON DATABASE taskapp TO taskapp_user;
\q
Initialize the database schema:
psql -U postgres -d taskmanager -f backend/schema.sql
This will create the tasks table and insert sample data.
Navigate to the backend directory:
cd backend
Create a Python virtual environment:
python3 -m venv venv
Activate the virtual environment:
source venv/bin/activate
Install Python dependencies:
pip install -r requirements.txt
Create a .env file in the backend directory:
cp .env.example .env
Edit the .env file and update the database connection string:
DATABASE_URL=postgresql://taskapp_user:taskapp_password@localhost/taskapp
PORT=5000
FLASK_ENV=development
Run the Flask application:
python run.py
The backend API will be available at http://localhost:5000
Open a new terminal and navigate to the project root directory.
Install frontend dependencies:
npm install
Create a .env file in the root directory:
cp .env.example .env
The default configuration should work:
VITE_API_URL=http://localhost:5000/api
Run the development server:
npm run dev
The frontend will be available at http://localhost:5173
- POST /api/auth/login — Login with username and password
- POST /api/auth/signup — Register a new user
All task endpoints require an Authorization: Bearer token header.
- GET /api/tasks — Get all tasks
- POST /api/tasks — Create a new task
- PUT /api/tasks/:id — Update a task
- DELETE /api/tasks/:id — Delete a task
{
"id": 1,
"title": "Task title",
"description": "Task description",
"priority": "low | medium | high",
"status": "todo | in_progress | done",
"created_at": "2024-01-01T00:00:00",
"updated_at": "2024-01-01T00:00:00"
}
Build the frontend for production:
npm run build
Preview the production build:
npm run preview
For production deployment:
-
Set FLASK_ENV=production in your environment
-
Use a production WSGI server like Gunicorn:
pip install gunicorn gunicorn -w 4 -b 0.0.0.0:5000 'app:create_app()'
- Navigate to the landing page at http://localhost:5173
- Click "Get Started" to go to the login page
- Use demo credentials:
- Admin account: username admin, password admin123
- User account: username user, password user123
- Upon successful login you will be redirected to the dashboard
- The auth token is stored in localStorage
- Click "Logout" to clear the session
- Tokens are valid for the session and stored in localStorage
- Tokens are automatically included in all API requests
- Invalid or expired tokens will redirect you to the login page
- Start PostgreSQL database
- Run backend: cd backend && source venv/bin/activate && python run.py
- Run frontend: npm run dev
- Access the application at http://localhost:5173
- Use demo credentials to login and manage tasks
psql -U postgres -d taskmanager -f backend/schema.sql
pg_dump -U postgres taskmanager > backup.sql
psql -U postgres taskmanager < backup.sql
Issue: ModuleNotFoundError: No module named flask Solution: Make sure you have activated the virtual environment
Issue: sqlalchemy.exc.OperationalError: could not connect to server Solution: Ensure PostgreSQL is running and .env details are correct
Issue: CORS errors in browser Solution: Verify Flask-CORS is installed and the backend is running
Issue: Failed to fetch tasks Solution: Check that the backend is running on port 5000
Issue: Redirect to login when accessing dashboard Solution: Make sure you have logged in with valid credentials
Issue: Unauthorized error on API calls Solution: The token may have expired. Try logging out and back in
Anthony Chidi
DevOps Engineer | Cloud Engineer | Local Deployment