Workflow Guide

[Life932]

🛠️ Full-Stack Developer Handbook

Welcome to the team! This project is a full-stack Next.js application designed for scalability. We use a structured branching strategy to ensure that our production environment remains stable while allowing for rapid development.

🏗️ Technical Stack

• Framework: Next.js (App Router / Full-Stack)
• Package Manager: pnpm (Strictly enforced)
• Styling: Tailwind CSS + daisyUI
• Icons: Lucide React
• Database/Backend: Next.js API Routes & Server Actions (Check .env.example for DB config)
• Deployment: Vercel

---

1. 🌿 Branching Strategy & Workflow

We use a Git Flow inspired model. No one should ever push directly to main or dev.

The Hierarchy:

1. main (Production): Always reflects the current live site on Vercel. Only merges from dev.
2. dev (Development/Staging): The integration branch for all new features. Vercel creates "Preview Deployments" from this branch.
3. feat/ or fix/ (Feature Branches): Where all actual work happens. These branches merge into dev.

The Workflow:

1. Start: git checkout dev then git pull origin dev.
2. Branch: git checkout -b feat/your-feature-name.
3. Work: Commit your changes locally.
4. Sync: Periodically run git pull origin dev to stay updated with other team members.
5. Push: git push origin feat/your-feature-name.
6. PR: Open a Pull Request on GitHub: feat/your-feature → dev.
7. Finalize: Once the feature is tested in dev, a lead will merge dev → main for production release.

---

2. 🚀 Local Setup & Tools

Required Tools

• Node.js: v18.17.0+
• pnpm: v8.0.0+ (npm install -g pnpm)

Setup Instructions

1. Clone: git clone <repo-url>
2. Install: pnpm install
3. Environment: Create a .env.local file. This is crucial for backend functionality (Database URIs, API Secrets).

   cp .env.example .env.local

4. Dev Server: pnpm dev (Runs on localhost:3000).

---

3. 📝 Commit & Coding Standards

Commit Messages

We follow Conventional Commits: type(scope): description

• feat: New UI or Backend logic.
• fix: Bug fixes.
• db: Schema changes or database migrations.
• refactor: Code cleanup/AI optimization.
• style: daisyUI/Tailwind CSS changes.

Code Style

• Server vs. Client: Use 'use client' only when necessary (interactivity, hooks). Keep logic in Server Components for SEO and performance.
• Icons: Use lucide-react. Format: <IconName size={24} className="text-primary" />.

---

4. 🤖 AI & Design Workflow (Figma + Gemini AI Studio)

We use Gemini AI Studio to translate Figma designs into functional, optimized code.

Step 1: Figma to UI (daisyUI)

Extract the CSS/Design properties from Figma. Use Gemini to convert them to daisyUI classes.

Gemini Prompt: "I have a Figma design for a [Component Name]. It uses these colors: [HEX Codes]. Generate a Next.js functional component using Tailwind CSS and daisyUI classes that matches this layout. Use Lucide React for any icons."

Step 2: Backend & Logic Optimization

When building backend features (Server Actions or API Routes), use Gemini to ensure security and performance.

Gemini Prompt: "Optimize this Next.js Server Action for backend security. Check for proper error handling, type safety with TypeScript, and efficient database querying. [PASTE CODE]"

Step 3: Custom Theming

If the Figma template requires a new theme:

1. Generate the theme object in Gemini.
2. Add it to tailwind.config.ts under the daisyui: { themes: [...] } array.
3. Ensure the data-theme attribute in your layout.tsx is updated if necessary.

---

5. 🛠️ Backend Integration Notes

• Schema Changes: If you modify the database schema, you must update the team via the dev branch immediately.
• API Documentation: Document any new API endpoints or Server Actions using JSDoc comments (Gemini can generate these for you).
• Validation: Use zod for all backend data validation to prevent corrupt data entry.

---

Reminder: Always check the Vercel Preview build on your Pull Request before asking for a merge into dev. If the build fails there, it will fail in production!