Skip to main content

​
Quick Start Guide

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

​
Prerequisites

Before starting, make sure you have:
RequirementVersionCheck Command
Node.js18+node --version
npm9+npm --version
GitAnygit --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: 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:
CollectionRequired Attributes
header_sectionname (string), roles (string[]), description (string)
menubar_settingsshowBlog (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:
SectionWhat to Add
HeaderYour name, job titles, intro
AboutBio, skills, profile image
ProjectsYour portfolio work
BlogArticles 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

  • Check .env file exists with correct values
  • Verify Appwrite project ID is correct
  • Ensure localhost is added to Appwrite platforms
Add localhost to Appwrite Console → Settings → Platforms
  • 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