# 🎨 Design Vibes – Setup Guide

Welcome to **Design Vibes**! This guide will walk you through setting up your local development environment and running the app. Follow the steps below to get started.

---

## 🚀 Step 1: Install GitHub Desktop

1. [Download GitHub Desktop](https://desktop.github.com/)
2. Install and launch the application
3. Sign in using your GitHub account

---

## 📁 Step 2: Clone the Repository

1. In GitHub Desktop, click **"Clone a repository from the Internet..."**
2. Enter the repository URL or choose it from your GitHub account
3. Select a local path (e.g., `~/Desktop/design-vibes`)
4. Click **"Clone"**

---

## 🌿 Step 3: Create Your Own Branch

1. In GitHub Desktop, click on the current branch name (e.g., `main`) in the top navigation bar
2. Click **"New branch"**
3. Give your branch a name and create it
4. Make sure to **switch to your new branch** before making changes

---

## 🧠 Step 4: Install VS Code

1. [Download Visual Studio Code](https://code.visualstudio.com/)
2. Install and launch the application

---

## 🧭 Step 5: Open the Project in VS Code

1. In VS Code, go to **File → Open Folder**
2. Navigate to your cloned `design-vibes` folder
3. Select it and open the project

---

## 🛠 Step 6: Install Node.js

1. [Download Node.js (LTS version)](https://nodejs.org/)
2. Install Node.js (includes npm)
3. Verify installation:
   ```bash
   node --version
   ```

---

## 📦 Step 7: Install Project Dependencies

1. In VS Code, open the terminal: **Terminal → New Terminal**
2. Run:
   ```bash
   npm install
   ```
3. Wait for all dependencies to finish installing

---

## 🤖 Step 8: Install Claude Code

1. Sign up or log in at [Claude](https://claude.ai/)
2. Ask **@pat** for access if you don't have it
3. Follow Claude Code [installation instructions](https://www.anthropic.com/products/claude)
4. Authenticate Claude Code with your Anthropic account

---

## 🧪 Step 9: Test the Setup

1. Start the development server (New terminal window):
   ```bash
   cd ~/Desktop/design-vibes
   npm start
   ```
2. Then run (Another new terminal window):
   ```bash
   cd ~/Desktop/design-vibes
   claude
   ```
3. Open [http://localhost:3000](http://localhost:3000) in your browser
4. Try making a small change using Claude Code to verify everything works!

---

Need help? Reach out to your team or ping **@pat** for claude access. For all other questions reach out to **@yamill**.