Preliminary Phase: Project Initialization

Backend

1. Set up FastAPI:
   • Initialize a FastAPI project structure with the necessary files (e.g., main.py, app directory).
   • Configure the project to use a database (e.g., Postgres) and set up database connection handling.
2. Database Tables:
   • Users: Stores user information (e.g., ID, email, name, profile picture URL).
   • Albums: Stores album details (e.g., ID, title, privacy setting, creation date, admin ID).
   • Photos: Stores photo metadata (e.g., ID, album ID, URL, upload date, caption).
   • AlbumRole: Manages user roles in albums (e.g., user ID, album ID, role).
3. Create Database Models and Initial Migrations:
   • Define models for each table in the database.
   • Run initial migrations to set up these tables in the database.

Frontend

1. Initialize the Next.js Project:
   • Create a Next.js application with a basic project structure.
   • Set up essential dependencies like TailwindCSS for styling, and TypeScript if needed.
2. Install Auth.js for Authentication:
   • Configure the project to use Auth.js, setting up basic provider configuration (e.g., Google, Email).
   • Implement session handling with Auth.js, ensuring login state management is prepared for future pages.

UXUI

1. Project Branding and Style Guide:
   • Develop an initial style guide that includes colors, typography, and basic components.
   • Establish a branding identity for Ducky.pics, defining a visual direction that can be used consistently across wireframes.
2. Wireframe Overview:
   • Create a general wireframe structure for key pages based on the project’s needs.
   • This overview will serve as a guide for each specific wireframe task in later phases.

Phase 1: Authentication Integration and Wireframes

1. Backend
   • Set up Auth.js for Sign Up/Login using providers like Google and Email.
   • Configure Session Management within Auth.js to persist user sessions.
2. UXUI
   • Wireframes for Authentication Pages (/auth):
     • Create wireframes for Sign Up and Login pages.
3. Frontend
   • Implement the Sign Up page layout and components.
   • Implement the Login page layout and components.
   • Integrate Auth.js functionality for both pages, including Google/Email sign-in options.
   • Configure redirect logic after successful login.

Phase 2: Home Page, Album Management Wireframes, and Basic Album API Setup

1. UXUI
   • Wireframes for Home Page (/):
     • Create wireframes for the Home Page, including sections for all albums, filtering, and album creation.
   • Wireframes for Album Management Pages (/album/create and /album/:albumID):
     • Design the Create New Album page layout.
     • Design the Album View Page layout for displaying photos in a grid.
2. Backend
   • Album Management APIs:
     • Create API for Album Creation (POST).
     • Implement API for Album Retrieval (GET by ID).
     • Implement API to Get User’s Albums (GET by user).