Frontend Engineering Protocol

1. INTRODUCTION

This document defines the standard operating procedures for Frontend Development at Moustachir Com. It applies to all Frontend Developers (React, Next.js, Vue, etc.), whether internal team members or external partners.

For general engineering standards (Git Flow, Testing Strategy, Code Quality), refer to the General Engineering Protocol.

---

2. ONBOARDING CHECKLIST

Goal: First component deployed to staging in 48 hours.

2.1 Access Provisioning

• GitHub: Accept invite to the Organization.
• Vercel/Netlify: (If applicable) Access to deployment platforms.
• Notion: Access to the Development Board.
• Figma: Viewer access to design files for your project.

2.2 Environment Setup

• Node.js: Use the LTS version specified in .nvmrc (typically via nvm or fnm).
• Package Manager: We strictly use pnpm (unless specified otherwise).
• IDE: VS Code is recommended with the following extensions:
  • Biome
  • Tailwind CSS IntelliSense
  • Auto Rename Tag
  • GitLens
• Browser Tools: Install React DevTools and Redux DevTools (if applicable).

2.3 Repository Setup

1. Clone the main repository: git clone <repo-url>
2. Install dependencies: pnpm install
3. Copy .env.example to .env.local and populate keys (ask Team Lead for secrets).
4. Run the development server: pnpm dev
5. Verify the app runs at http://localhost:3000 (or specified port).

---

3. DAILY WORKFLOW

3.1 Component Development

• Design First: Always reference the Figma design before writing code.
• Component Structure: Follow the established folder structure (e.g., components/, features/, pages/).
• Naming Conventions: Use PascalCase for components, camelCase for functions/variables.
• Reusability: Check if a similar component exists before creating a new one.

3.2 Styling

• Tailwind CSS: Primary styling method. Avoid inline styles or custom CSS unless absolutely necessary.
• Responsive Design: Mobile-first approach. Test on multiple screen sizes.
• Dark Mode: If the project supports dark mode, ensure all components adapt correctly.

3.3 State Management

• Follow the project's state management pattern (React Context, Zustand, Redux, etc.).
• Keep state as local as possible. Only lift state when necessary.

3.4 Performance

• Code Splitting: Use dynamic imports for large components.
• Image Optimization: Use Next.js <Image> component or equivalent.
• Lazy Loading: Implement for off-screen content.

---

4. HANDOFF FROM DESIGN

• Figma Inspection: Use Figma's inspect panel for exact spacing, colors, and typography.
• Clarifications: If design is unclear, ask in Discord before implementing.
• Pixel Perfect: Aim for design accuracy, but prioritize usability over pixel perfection.