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

Clone the Repository

git clone <your-repo-url>
cd portfolio

Install Dependencies

npm install

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

Create Appwrite Project

Go to cloud.appwrite.io
Click Create Project
Name it (e.g., “Portfolio”)
Copy your Project ID

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.

Add Platform in Appwrite

In Appwrite Console, go to Settings → Platforms
Click Add Platform → Web
Enter hostname: localhost
Click Create

This allows your local development server to communicate with Appwrite.

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:

Go to Appwrite Console → Databases
Click Create Database → ID: portfolio_db
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

Access Admin Panel

Go to http://localhost:5173/admin

Create Account

Click Sign Up and create an account with your email.

Verify Email (Optional)

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

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:

Header Section

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

About Section

/admin/about - Bio, skills, profile image

Project Categories

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

First Project

/admin/projects - Add your best project

Blog Category

/admin/blog-categories - Create a category

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

Getting Started

Appwrite Setup

Features

Admin Panel

Developer Guide

Quick Start

Quick Start Guide

Prerequisites

Installation

Database Setup

Option A: Quick Setup (Recommended for Testing)

Option B: Full Setup

First-Time Admin Setup

Quick Content Checklist

Build for Production

Common Issues

Next Steps

Complete Appwrite Setup

Deploy to Vercel

Customize Theme

Explore Features

​Quick Start Guide

​Prerequisites

​Installation

​Database Setup

​Option A: Quick Setup (Recommended for Testing)

​Option B: Full Setup

​First-Time Admin Setup

​Quick Content Checklist

​Build for Production

​Common Issues

​Next Steps

Complete Appwrite Setup

Deploy to Vercel

Customize Theme

Explore Features

Quick Start Guide

Prerequisites

Installation

Database Setup

Option A: Quick Setup (Recommended for Testing)

Option B: Full Setup

First-Time Admin Setup

Quick Content Checklist

Build for Production

Common Issues

Next Steps