Skip to content

README.md

Latest commit

 

History

History
185 lines (139 loc) · 6.38 KB

README.md

File metadata and controls

185 lines (139 loc) · 6.38 KB

🚀 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

✨ 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.

Landing Page

User Registration:

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

User Registration

Secure Login:

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

Secure Login

Personal Dashboard:

Successful login leads to a customized workspace with instant success notifications

Personal Dashboard

Task Creation:

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

Task Creation

Progress Tracking:

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

Progress Tracking

Flexible Task Management:

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

Flexible Task Management

Instant Search:

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

Instant Search:

Smart Filtering (Completed):

Focused view showing only finished objectives via the interactive filter.

Smart Filtering (Completed)

Smart Filtering (Pending):

Streamlined view of remaining work to help prioritize current goals.

Smart Filtering (Pending)

Secure Deletion:

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

Secure Deletion

🛠️ 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.