zerchaboi1152003/rule icon
public
Published on 3/25/2025
Rules template

Rules
rule
## Build & Development Commands
- Project Overview: Clearly explain the purpose of the portfolio site.

Technology Stack: Mention Next.js, Tailwind CSS, Appwrite (database), Firebase (authentication).

Component Documentation:

Navbar: Sticky, minimal design.

Hero Section: Full-screen introduction.

Portfolio Showcase: Grid layout with hover effects.

Testimonials: Carousel or grid format.

Contact Form: Integrated with Firebase authentication, storing inquiries in Appwrite.

Code Examples: Provide snippets for key functionalities.

SEO & Performance:

Use next/image for optimized images.

Implement lazy loading for non-critical components.

Add structured data for better SEO ranking.

## Testing Guidelines
- 

## Code Style & Guidelines 
Use JSX instead of TYPESCRIPT.

Follow ESLint and Prettier for code formatting.

Maintain a modular folder structure:

components/ → Reusable UI components

layouts/ → Page layouts

pages/ → Next.js pages

lib/ → Utility functions, API calls

Use Next.js Server Components where applicable.

Ensure accessibility:

Proper alt attributes for images.

Good color contrast for readability.
- 

## Documentation Guidelines 
- Project Overview: Provide a brief description of the architecture portfolio website, its purpose, and key features.

Technology Stack: Mention and link to the official documentation of the technologies used:

Next.js (Frontend Framework) → https://nextjs.org/docs

Tailwind CSS (Styling) → https://tailwindcss.com/docs

Appwrite (Database & Backend) → https://appwrite.io/docs

Firebase (Authentication) → https://firebase.google.com/docs

Folder Structure: Document the project's folder organization:

components/ → UI components (Navbar, Hero, Portfolio, etc.).

layouts/ → Page layouts.

pages/ → Next.js route pages.

lib/ → Utility functions and API handlers.

Component Documentation: Explain the purpose and props of each key component.

Example:

Navbar: Sticky, minimal design with navigation links.

Hero Section: Full-screen introduction with CTA.

Portfolio Showcase: Grid layout with hover effects.

Contact Form: Integrated with Firebase authentication.

API & Database Documentation:

Authentication: Email/password and Google OAuth using Firebase.

Database Structure: Appwrite collections for storing portfolio projects and user inquiries.

API Routes: Explain Next.js API routes for handling database interactions.

Code Examples: Provide essential snippets, such as setting up authentication, fetching data, and UI components.

SEO & Performance Optimization:

Use next/image for optimized images.

Implement lazy loading for non-critical components.

Add structured metadata for SEO improvements.

Deployment & Hosting: Document the deployment process with relevant links:

Netlify (Next.js Hosting) → https://netlify.com/docs

Firebase Hosting (Alternative) → https://firebase.google.com/docs/hosting