🚀 Professional Task Management System

A full-stack Task Management application built with FastAPI (Backend) and React (Frontend), featuring secure JWT authentication and full CRUD capabilities.

🌐 Live Links

• Frontend (Live Application Link): https://fastapi-task-manager-seven.vercel.app

• Backend (API Docs): https://fastapi-task-manager-p29n.onrender.com/docs

✨ Features

Secure Auth:

• Full Login and Registration system using password hashing (Bcrypt) and token-based sessions.

• Tasks are strictly linked to the account holder. A user can only view, edit, or delete their own tasks.

• Protected API endpoints that require a valid JWT Bearer Token.

Task CRUD:

• Create, read, update, and delete tasks with ease.

Smart Filtering:

• Filter tasks by status (Completed/Pending).

Pagination:

• Efficiently handle large lists of tasks.

Responsive UI:

• Glassmorphism design that works on mobile and desktop.

📸 App Walkthrough

Click to view screenshots

Landing Page:

A clean, modern entry point prompting users to authenticate to manage their private tasks.

User Registration:

Secure account creation with validated credentials and a sleek, centered UI.

Secure Login:

JWT-based authentication ensuring data privacy and individual task isolation.

Personal Dashboard:

Successful login leads to a customized workspace with instant success notifications

Task Creation:

Effortlessly add new tasks with real-time feedback and automatic list updating.

Progress Tracking:

Easily toggle task status with immediate visual cues and success alerts.

Flexible Task Management:

Ability to revert task status back to pending for accurate workflow tracking.

Instant Search:

Real-time task filtering as you type, allowing users to quickly locate specific entries within a large list.

Smart Filtering (Completed):

Focused view showing only finished objectives via the interactive filter.

Smart Filtering (Pending):

Streamlined view of remaining work to help prioritize current goals.

Secure Deletion:

Safety-first approach with a confirmation modal to prevent accidental task loss.

🛠️ Tech Stack

Frontend:

• React.js
• Tailwind CSS
• Axios

Backend:

• FastAPI (Python 3.11)
• SQLAlchemy
• Pydantic

Database:

• SQLite (Development) / PostgreSQL (Production).

Deployment:

• Vercel (Frontend)
• Render (Backend)

🚀 Local Setup

1. Clone the repo: git clone https://github.com/amirthasaravanan/FastAPI-Task-Manager.git
2. Backend Setup:
   • cd backend
   • pip install -r requirements.txt
   • Create a .env file based on .env.example.
   • uvicorn app.main:app --reload
3. Frontend Setup:
   • cd frontend
   • npm install
   • npm start

🔑 Environment Variables

To run this project, you will need to add the following environment variables to your .env file:

Backend:

• DATABASE_URL: Your SQLite or PostgreSQL connection string.
• SECRET_KEY: A random string for JWT signing.
• ALGORITHM: Usually HS256.
• ACCESS_TOKEN_EXPIRE_MINUTES: e.g., 30.

Frontend:

• REACT_APP_API_URL: Use http://localhost:8000 for local development or your deployed Render URL for production.

📂 Project Structure

This repository maintains a strict separation between the frontend and backend folders.

FastAPI-Task-Manager/
├── backend/                # FastAPI Backend Application
│   ├── app/                # Core Application Logic
│   │   ├── api/            # API Route Endpoints
│   │   ├── core/           # Security, JWT & Config
│   │   ├── db/             # Database Connection & Engine
│   │   ├── models/         # SQLAlchemy Database Models
│   │   ├── schemas/        # Pydantic Validation Schemas
│   │   └── main.py         # App Entry Point & Middleware
│   ├── tests/              # Pytest Unit & Integration Tests
│   ├── .env.example        # Template for Env Variables
│   ├── Dockerfile          # Containerization Setup
│   └── requirements.txt    # Backend Dependencies
├── frontend/               # React Frontend Application
│   ├── public/             # Static Assets
│   ├── src/                # React Components & Services
│   ├── package.json        # Frontend Dependencies & Scripts
│   └── README.md           # Frontend-specific Docs
├── screenshots/            # App Walkthrough Visuals
├── .gitignore              # Files excluded from Version Control
└── README.md               # Main Project Documentation

📖 API Documentation

Once the backend is running, you can access the interactive API documentation at:

• Swagger UI: http://127.0.0.1:8000/docs
• ReDoc: http://127.0.0.1:8000/redoc

Note: These are also available on the live backend link provided above.

🐳 Docker Support

Run the backend using Docker:

docker build -t task-backend ./backend
docker run -p 8000:8000 task-backend

🧪 Running Tests

This project includes a comprehensive suite of tests using Pytest to ensure API reliability and security.

To run the tests:

1. Navigate to the backend: cd backend
2. Run pytest: pytest

Key Tests Included:

• User Registration & Authentication (JWT)
• Task Creation & Ownership Logic
• Pagination and Filter functionality

🔒 Security & Implementation Details

• JWT Authentication: Implemented stateless user sessions using Bearer Tokens[cite: 21].
• Password Safety: Uses bcrypt for secure, one-way hashing before storage[cite: 22].
• Database Isolation: Enforces strict ownership; users can only interact with tasks linked to their unique ID[cite: 31].
• CORS Management: Configured to allow secure cross-origin requests between Vercel and Render.