> ## Documentation Index
> Fetch the complete documentation index at: https://docs.parvej.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Get your portfolio website running in 10 minutes

# Quick Start Guide

Get your portfolio website up and running quickly with this step-by-step guide.

## Prerequisites

Before starting, make sure you have:

| Requirement | Version | Check Command    |
| ----------- | ------- | ---------------- |
| Node.js     | 18+     | `node --version` |
| npm         | 9+      | `npm --version`  |
| Git         | Any     | `git --version`  |

You'll also need an [Appwrite Cloud](https://cloud.appwrite.io) account (free).

## Installation

<Steps>
  <Step title="Clone the Repository">
    ```bash theme={null}
    git clone <your-repo-url>
    cd portfolio
    ```
  </Step>

  <Step title="Install Dependencies">
    ```bash theme={null}
    npm install
    ```

    This installs all required packages including React, Vite, Tailwind, and Appwrite SDK.
  </Step>

  <Step title="Create Appwrite Project">
    1. Go to [cloud.appwrite.io](https://cloud.appwrite.io)
    2. Click **Create Project**
    3. Name it (e.g., "Portfolio")
    4. Copy your **Project ID**
  </Step>

  <Step title="Configure Environment">
    Create a `.env` file in the root directory:

    ```env theme={null}
    # Appwrite Configuration
    VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
    VITE_APPWRITE_PROJECT_ID=your_project_id_here
    VITE_APPWRITE_DATABASE_ID=portfolio_db
    VITE_APPWRITE_STORAGE_ID=reactbucket

    # Optional: PayPal (for shop)
    VITE_PAYPAL_CLIENT_ID=your_paypal_client_id
    ```

    <Warning>
      Never commit `.env` to version control. It's already in `.gitignore`.
    </Warning>
  </Step>

  <Step title="Add Platform in Appwrite">
    1. In Appwrite Console, go to **Settings** → **Platforms**
    2. Click **Add Platform** → **Web**
    3. Enter hostname: `localhost`
    4. Click **Create**

    <Note>
      This allows your local development server to communicate with Appwrite.
    </Note>
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

    Open [http://localhost:5173](http://localhost:5173) in your browser.

    You should see the portfolio homepage (with placeholder content until you set up the database).
  </Step>
</Steps>

## Database Setup

Your site needs database collections to store content. You have two options:

### Option A: Quick Setup (Recommended for Testing)

Create the minimum required collections:

1. Go to Appwrite Console → **Databases**
2. Click **Create Database** → ID: `portfolio_db`
3. Create these collections with basic attributes:

| Collection         | Required Attributes                                          |
| ------------------ | ------------------------------------------------------------ |
| `header_section`   | `name` (string), `roles` (string\[]), `description` (string) |
| `menubar_settings` | `showBlog` (boolean), `showProjects` (boolean)               |

See [Database Setup](/appwrite/database-setup) for complete schema.

### Option B: Full Setup

Follow the complete [Appwrite Setup Guide](/appwrite/overview) to create all collections and storage buckets.

## First-Time Admin Setup

<Steps>
  <Step title="Access Admin Panel">
    Go to [http://localhost:5173/admin](http://localhost:5173/admin)
  </Step>

  <Step title="Create Account">
    Click **Sign Up** and create an account with your email.
  </Step>

  <Step title="Verify Email (Optional)">
    If email verification is enabled in Appwrite, check your inbox and verify.
  </Step>

  <Step title="Add Content">
    Start adding your content:

    | Section  | What to Add                  |
    | -------- | ---------------------------- |
    | Header   | Your name, job titles, intro |
    | About    | Bio, skills, profile image   |
    | Projects | Your portfolio work          |
    | Blog     | Articles and posts           |
  </Step>
</Steps>

## Quick Content Checklist

After setup, add content in this order:

<Steps>
  <Step title="Header Section">
    `/admin/header` - Your name, rotating roles, description
  </Step>

  <Step title="About Section">
    `/admin/about` - Bio, skills, profile image
  </Step>

  <Step title="Project Categories">
    `/admin/project-categories` - Create 2-3 categories
  </Step>

  <Step title="First Project">
    `/admin/projects` - Add your best project
  </Step>

  <Step title="Blog Category">
    `/admin/blog-categories` - Create a category
  </Step>

  <Step title="First Blog Post">
    `/admin/blogs` - Write your first post
  </Step>
</Steps>

## Build for Production

```bash theme={null}
# Build optimized production bundle
npm run build

# Preview production build locally
npm run preview
```

The build output is in the `dist/` folder, ready for deployment.

## Common Issues

<AccordionGroup>
  <Accordion title="Site shows empty/no data">
    * Check `.env` file exists with correct values
    * Verify Appwrite project ID is correct
    * Ensure `localhost` is added to Appwrite platforms
  </Accordion>

  <Accordion title="CORS error in console">
    Add `localhost` to Appwrite Console → Settings → Platforms
  </Accordion>

  <Accordion title="npm install fails">
    * Delete `node_modules` and `package-lock.json`
    * Run `npm install` again
    * Ensure Node.js 18+ is installed
  </Accordion>
</AccordionGroup>

See [Troubleshooting](/troubleshooting) for more solutions.

## Next Steps

<CardGroup cols={2}>
  <Card title="Complete Appwrite Setup" icon="database" href="/appwrite/overview">
    Set up all collections and storage buckets
  </Card>

  <Card title="Deploy to Vercel" icon="rocket" href="/deployment">
    Make your portfolio live
  </Card>

  <Card title="Customize Theme" icon="palette" href="/developer/customization">
    Change colors, fonts, and styles
  </Card>

  <Card title="Explore Features" icon="sparkles" href="/features/blog-system">
    Learn about all available features
  </Card>
</CardGroup>