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 account (free).

Installation

1. Clone the Repository

   git clone <your-repo-url>
   cd portfolio
   
2. Install Dependencies

   npm install
   

   This installs all required packages including React, Vite, Tailwind, and Appwrite SDK.

3. Create Appwrite Project

   1. Go to cloud.appwrite.io
   2. Click Create Project
   3. Name it (e.g., “Portfolio”)
   4. Copy your Project ID
4. Configure Environment

   Create a .env file in the root directory:

   # 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
   

   Never commit .env to version control. It’s already in .gitignore.

5. Add Platform in Appwrite

   1. In Appwrite Console, go to Settings → Platforms
   2. Click Add Platform → Web
   3. Enter hostname: localhost
   4. Click Create

   This allows your local development server to communicate with Appwrite.

6. Start Development Server

   npm run dev
   

   Open http://localhost:5173 in your browser.

   You should see the portfolio homepage (with placeholder content until you set up the database).

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 for complete schema.

Option B: Full Setup

Follow the complete Appwrite Setup Guide to create all collections and storage buckets.

First-Time Admin Setup

1. Access Admin Panel

   Go to http://localhost:5173/admin

2. Create Account

   Click Sign Up and create an account with your email.

3. Verify Email (Optional)

   If email verification is enabled in Appwrite, check your inbox and verify.

4. 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

Quick Content Checklist

After setup, add content in this order:

1. Header Section

   /admin/header - Your name, rotating roles, description

2. About Section

   /admin/about - Bio, skills, profile image

3. Project Categories

   /admin/project-categories - Create 2-3 categories

4. First Project

   /admin/projects - Add your best project

5. Blog Category

   /admin/blog-categories - Create a category

6. First Blog Post

   /admin/blogs - Write your first post

Build for Production

# 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

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

CORS error in console

Add localhost to Appwrite Console → Settings → Platforms

npm install fails

• Delete node_modules and package-lock.json
• Run npm install again
• Ensure Node.js 18+ is installed

See Troubleshooting for more solutions.

Next Steps

Complete Appwrite Setup

Set up all collections and storage buckets

Deploy to Vercel

Make your portfolio live

Customize Theme

Change colors, fonts, and styles

Explore Features

Learn about all available features