# Project Overview

You are building a Todo paltform, where a user can do the following tasks:
1. User can authenticate himself via Google ( Login & Signup with Google), this app will save the user's name, email and picture to loca database and also generate a JWT token when user loges in, so later the app will use that local jwt token for authorization and it shoulbe be expired after 14 days, then user must have to re-authenticate with Google.

2. Authenticated user can: 
a. Create stand alone Todos, 
b. Create Teams to team up with other users to acomplish some tasks togather and in Team the owner (who's created that Team) will be the "Team Leader" by default for that Team, 
c. Create Projects to add multiple teams under a single project, in project, the owner ( who's created that project) can make another user "Manager" for that project, and manager can add other Teams and can view all the todos in all Teams under taht project,
d. Edit his own Todos, Teams, Projects
e. Eddit his profile infomration


# Core functionalaties
## For web-based frontend
1. First of all, there will be a home page to provide overview about the platform and a button for "Login with Google"
2. When a user logged in via google, he should be redirected to the Dashbaord page.
3. On the main dashbaord page, user should be able to view a mountain-level view of his Todos, Teams, and Projects.
4. On Dashboard page, user shold have options to navigate to other pages like Tasks ( to view the complete list of his Todos, where he should be able to filters Todos by Teams, by projects, by status and can also perform CRUD on those Todos), Teams ( to view the complete list of Teams along with the names/email of Team members for each team and should be able to filter the team by project), and Project ( To view the complete list of Projects along with the Teams under thos projects, he should be able to perform CRUD on his projects on this page.)
5. On main Dashboard page, user should be able to see analytics about his Todo's progress.


# Implementation guidelines

## Backend
1. Language and Framework: You will build the backend in the form of REST API using Python's FastAPI framework, use its latest version and the backend api should be asynchronous.
2. You have to implement all the required Database models and utilze sqlalchemy and pydantic data modeling.
3. Authentication: You have to implement Google OAuth2 for authentication.
4. Authorization: You have to implement JWT token generation and validation using PyJWT library, when a user authenticated via google-auth we will exchangeits google-atuh token with a local jwt-token whcih will expire afetr 14 days.
5. Database Modeling: Database models, should also implement the relationships like:
    A user can have mmultiple Todos, Teams and Projects, 
    A Team can have multiple users as team-members, multiple todos, and Project which can also be null if that Team is not assigned to a Project.
    A Project can have multiple Teams and a User as Manager and User as Owner.

6. Backend API should be in the form which can be utilize for any client, like web-based frameworks like NextJS, ios app like in Flutter, android app like in Flutter
7. You must have to follow the leat code and leat files principle, so we have little code and files to manage.

8. Backend API should be efficient in its performance, secure to manage all the data and operrations, and must be scalable, so we can scale it up in future.


## Web-based Frontend
1. Language and Framework: For the web-based frontend, You will be using NEXTJS 14, shadcn, tailwind, Lucid icons, React Query for data fetching and caching.
2. Web-basedd frontend should be Responsive and modern.
3. Web-based frontend should be able to communicate with the backend API to perform CRUD operations on Todos, Teams, and Projects.
4. Web-based frontend should be able to display the analytics about Todo's progress.
5. Web-based frontend should be able to display the user's profile information and allow him to edit



# Main Direcortory Structure:

1. As the project name will be "FocusFlow", so the main directtory for the project will be "FocusFlow"

2. Inside that we will have sub folders for backend and frontend.
3. In the frontend, we will have further sub-folders for each backend like the web, ios and android etc



## Backend Direcotry Strucutre:
Instructions:
1. You must have to use the least files, directories and code 
2. Here is a general direcotry structure for FastAPI backend:

FocusFlow/backend/
├── app/
│   ├── api/                      # API routes
│   │   ├── __init__.py           # API router initialization
│   │   ├── auth.py               # Google OAuth2, JWT login & signup routes
│   │   ├── user.py               # User routes (profile update, get user)
│   │   ├── todo.py               # Todo routes (CRUD for Todos)
│   │   ├── team.py               # Team routes (CRUD for Teams)
│   │   └── project.py            # Project routes (CRUD for Projects)
│   ├── models/                   # Database models (SQLAlchemy)
│   │   ├── __init__.py           # Initialize models
│   │   ├── user.py               # User model
│   │   ├── todo.py               # Todo model
│   │   ├── team.py               # Team model
│   │   └── project.py            # Project model
│   ├── schemas/                  # Pydantic models (input/output validation)
│   │   ├── __init__.py           # Initialize schemas
│   │   ├── user.py               # User schema
│   │   ├── todo.py               # Todo schema
│   │   ├── team.py               # Team schema
│   │   └── project.py            # Project schema
│   ├── core/                     # Core utilities (config, security, JWT)
│   │   ├── __init__.py           # Initialize core
│   │   ├── config.py             # App configuration (environment variables)
│   │   ├── security.py           # JWT handling, password hashing, OAuth2
│   │   ├── oauth.py              # Google OAuth2 configuration
│   │   └── utils.py              # Utility functions (e.g., email validation)
│   ├── db/                       # Database management (SQLAlchemy session)
│   │   ├── __init__.py           # Initialize DB
│   │   └── session.py            # DB session management, async engine
│   ├── deps/                     # Dependency injection (DB session, security)
│   │   ├── __init__.py           # Initialize dependencies
│   │   └── deps.py               # Dependency providers (current user, db)
│   └── main.py                   # FastAPI app instance, include routers
│
├── alembic/                      # Migrations folder (for database changes)
│   └── versions/                 # Versioned migration files (auto-generated)
├── alembic.ini                   # Alembic configuration file
├── requirements.txt              # Python dependencies (FastAPI, SQLAlchemy, etc.)
├── .env                          # Environment variables (DB_URL, secrets)
└── README.md                     # Project documentation


## Web-based Frontend direcotry structure:
Instructions:
1. You must have to use the least files, directories and code 
2. Here is a general direcotry structure for web-basefd frontend which is using NextJS:

frontends/web/
├── app/                            # App directory for routing and layouts
│   ├── layout.js                   # Root layout component (common layout)
│   ├── page.js                     # Homepage with "Login with Google" button
│   ├── dashboard/                  # Dashboard route
│   │   └── page.js                 # Dashboard page showing overview of Todos, Teams, Projects
│   ├── todos/                      # Todos-related route
│   │   └── page.js                 # List of all Todos with filters and CRUD
│   ├── teams/                      # Teams-related route
│   │   └── page.js                 # List of all Teams with member details
│   ├── projects/                   # Projects-related route
│   │   └── page.js                 # List of all Projects with Teams, CRUD on Projects
│   └── profile/                    # User profile route
│       └── page.js                 # User profile page (view and edit)
├── components/                     # Reusable UI components
│   ├── Dashboard/                  # Components specific to the dashboard
│   │   ├── OverviewCard.js         # Overview card for Todos, Teams, Projects
│   │   ├── AnalyticsChart.js       # Analytics chart component
│   ├── Todos/                      # Components specific to Todos
│   │   ├── TodoItem.js             # Individual Todo display
│   │   ├── TodoFilters.js          # Filters for Todos
│   ├── Teams/                      # Components specific to Teams
│   │   ├── TeamItem.js             # Individual Team display
│   ├── Projects/                   # Components specific to Projects
│   │   ├── ProjectItem.js          # Individual Project display
│   ├── Layout/                     # Layout components
│   │   ├── Navbar.js               # Navigation bar
│   │   ├── Sidebar.js              # Sidebar for navigation
│   │   └── Footer.js               # Footer component
├── public/                         # Static assets (images, logos)
│   └── logo.png                    # Platform logo
├── styles/                         # Global and component-specific styles
│   ├── globals.css                 # Global CSS (e.g., Tailwind CSS configuration)
│   └── Dashboard.module.css        # CSS modules for Dashboard components
├── utils/                          # Helper functions and utilities
│   ├── api.js                      # API utilities for CRUD operations
│   └── auth.js                     # Authentication utilities (e.g., Google OAuth)
├── context/                        # Context providers for global state management
│   ├── AuthContext.js              # Authentication context for user sessions
│   ├── TodosContext.js             # Context for managing Todos state
│   └── TeamsContext.js             # Context for managing Teams state
├── hooks/                          # Custom React hooks
│   ├── useAuth.js                  # Hook for managing authentication
│   ├── useTodos.js                 # Hook for managing Todos state and API calls
│   └── useTeams.js                 # Hook for managing Teams state and API calls
├── .env.local                      # Environment variables (API URLs, Google OAuth client ID)
├── next.config.js                  # Next.js configuration
├── tailwind.config.js              # Tailwind CSS configuration (if using Tailwind)
├── package.json                    # Project dependencies and scripts
└── README.md                       # Project documentation

------------
Above is project i want to build, How should i structure my project files? ( try to create as few files as possible)