Project Overview

Instagram Clone Project Plan (rrv7 & Fastify)

Project Overview

This project is a 5-day plan to build a simplified Instagram clone. It features a Server-Side Rendered (SSR) frontend using React Router v7 and a decoupled backend API built with Fastify. The architecture emphasizes a clean separation of concerns into two distinct repositories. The backend will follow a modular, self-sufficient structure inspired by NestJS, and all error handling will be standardized using the amparo library.

Core Technologies

• Runtime: Node
• Backend: Fastify, TypeScript, SQLite, Zod, amparo-fastify.
• Frontend: React Router v7 (SSR), TypeScript, Axios, Zustand, Zod, Tailwind CSS.
• Repositories: Two separate Git repos (frontend vs. backend).

High-Level Development Plan 🚀

Phase 1: Foundation (Days 1-2)

• Objective: Establish the backend architecture, scaffold the frontend, and build core viewing features.
• Key Milestones:
  • Initialize the Fastify backend, configure tooling, and build the posts module using TDD.
  • Scaffold the React Router v7 frontend and create the global app layout.
  • Implement the /profile page with the reels module, connecting frontend to backend.

---

Phase 2: Feature Expansion (Days 3-4)

• Objective: Rapidly expand functionality and enable content creation.
• Key Milestones:
  • Implement Tagged and Highlights modules with dynamic routing for highlight details.
  • Enable file uploads for creating posts, implementing backend multipart support and frontend forms.
  • Deploy both the frontend and backend applications to production environments (e.g., Vercel).

---

Phase 3: Refinement & Portfolio (Day 5)

• Objective: Polish the user interface and prepare the project for presentation.
• Key Milestones:
  • Apply comprehensive styling across the application using Tailwind CSS.
  • Implement optional advanced features like profile editing.
  • Finalize the project for the portfolio showcase with clean code and documentation.