Skip to main content

Repository Setup

Now that your accounts are configured, let's set up the project repositories. We'll fork the projects to your GitHub account and clone them to your local machine for development.

git reps

Understanding the Project Structure​

What are we building? We're creating a note-taking application with two separate repositories:

  • Frontend (blazenote-frontend): A React web application for the user interface
  • Backend (blazenote-backend): Serverless API functions for data management

Why two repositories? Separating frontend and backend allows for:

  • Independent deployment and scaling
  • Clear separation of concerns
  • Different development workflows
  • Better team collaboration

Step 1: Fork the Repositories​

What is forking? Forking creates a personal copy of someone else's repository in your GitHub account, allowing you to make changes without affecting the original.

Fork the Frontend Repository​

Navigate to the first repository:

  1. Open your web browser
  2. Go to: https://github.com/tve-cf/blazenote-frontend

Fork the blazenote repository:

  1. Look for the "Fork" button in the top-right corner of the page
  2. Click the "Fork" button
  3. You'll see a "Create a new fork" page

frontend fork

Configure the fork:

  1. Owner: Select your GitHub username (should be selected by default)
  2. Repository name: Keep as "blazenote-frontend" (don't change this)
  3. Description: Optional, you can leave this blank
  4. ❗ CRITICAL: Uncheck "Copy the main branch only"
    • This ensures you get all branches, including the "starter" branch we need
  5. Click "Create fork"
  6. Wait for GitHub to complete the forking process (usually takes 10-30 seconds)

Frontend​

uncheck main branch frontend

Fork the Backend Repository​

Repeat for the second repository:

  1. Go to: https://github.com/tve-cf/blazenote-backend
  2. Follow the exact same forking process
  3. Again, uncheck "Copy the main branch only"
  4. Keep the repository name as "blazenote-backend"

Backend​

uncheck main branch backend

Verify Fork Success​

After forking both repositories, verify they exist in your account:

  1. Go to your GitHub profile: https://github.com/[YOUR-USERNAME]
  2. Click on the "Repositories" tab
  3. You should see both:
    • blazenote-frontend
    • blazenote-backend

forked repository

Verify branches exist:​

  1. Click on the blazenote-frontend repository
  2. Look for the branch dropdown (usually says "main")
  3. Click it to see all branches
  4. Confirm you see both: main and starter
  5. Repeat verification for blazenote-backend

branches

Step 2: Clone Repositories to Your Local Machine​

info

What is cloning? Cloning downloads a copy of your GitHub repository to your local computer where you can edit the code.

Choose Your Workspace Directory​

First, decide where you want to store your projects. We recommend creating a dedicated folder:

terminal
# Navigate to your home directory
cd ~

# Create a projects folder (if it doesn't exist)
mkdir -p projects

# Navigate into the projects folder
cd projects

mkdir

Clone the Frontend Repository​

git clone https://github.com/[YOUR-USERNAME]/blazenote-frontend.git
warning

⚠️ Replace [YOUR-USERNAME] with your actual GitHub username!

Example: If your username is "johndoe", the command would be:

git clone https://github.com/johndoe/blazenote-frontend.git

Clone the Backend Repository​

git clone https://github.com/[YOUR-USERNAME]/blazenote-backend.git

git clone

Verify Cloning Success​

ls -la

You should see two directories:

  • blazenote-frontend/
  • blazenote-backend/

Check repository contents:

# Check frontend structure
ls -la blazenote-frontend/

# Check backend structure  
ls -la blazenote-backend/

ls -la

Step 3: Switch to Working Branches​

Why switch branches? The main branch contains the complete, finished application. The starter branch contains the basic setup where we'll begin building.

Switch Frontend Branch​

Navigate to the frontend project:

cd blazenote-frontend

Check current branch:

git branch

You should see you're on the main branch (indicated by an asterisk *).

Switch to starter branch:

git checkout starter

Verify the switch:

git branch

Now you should see an asterisk * next to starter.

switch branch frontend

Switch Backend Branch​

Navigate to the backend project:

cd ../blazenote-backend

Switch to starter branch:

git checkout starter

Verify backend branch switch:

git branch

You should see * starter indicating you're on the correct branch.

switch branch backend

Step 4: Install Dependencies​

Now that we have the repositories cloned and on the correct branches, let's install the project dependencies.

Install Frontend Dependencies​

Navigate to the frontend project:

cd ~/projects/blazenote-frontend

Install dependencies:

npm install

This will install all the React dependencies, build tools, and other packages needed for the frontend application.

Install Backend Dependencies​

Navigate to the backend project:

cd ~/projects/blazenote-backend

Install dependencies:

npm install

This will install all the Cloudflare Workers dependencies, database tools, and other packages needed for the backend API.

Verify Installation​

Check frontend dependencies:

cd ~/projects/blazenote-frontend
ls -la node_modules/
# Should show many directories with installed packages

Check backend dependencies:

cd ~/projects/blazenote-backend
ls -la node_modules/
# Should show many directories with installed packages
info

What are dependencies? Dependencies are external packages and libraries that your project needs to function. The package.json file lists all required dependencies, and npm install downloads and installs them locally.

Step 5: Understanding Branch Management​

Branch Purposes​

  • main branch: Complete, production-ready application (reference only)
  • starter branch: Basic setup with minimal functionality (your starting point)
  • Feature branches: Where you'll work on specific features (you'll create these)

Branch Protection​

  • The main branch is protected - you cannot push directly to it
  • All changes must go through Pull Requests
  • This simulates real-world development workflows

Working with Branches​

As you progress through the workshop:

  1. Work on the starter branch or create feature branches from starter
  2. Make your changes in your working branches
  3. Test your changes locally
  4. Push branches to your fork
  5. Create Pull Requests if needed

Step 6: Repository Verification​

Let's verify everything is set up correctly:

Check Repository Structure​

# Verify you're in the right location
pwd
# Should show something like: /Users/[username]/projects

# List projects
ls -la
# Should show: blazenote/ and blazenote-backend/

repository structure

Check Branches​

# Check frontend branch
cd ~/projects/blazenote-frontend && git branch
# Should show: * starter

# Check backend branch  
cd ~/projects/blazenote-backend && git branch
# Should show: * starter

check branches

Check Remote Origins​

# Check frontend remote
cd ~/projects/blazenote-frontend
git remote -v
# Should show your GitHub fork URLs

# Check backend remote
cd ~/projects/blazenote-backend  
git remote -v
# Should show your GitHub fork URLs

check remote origin

Repository Setup Checklist​

Before proceeding, verify all items below:

Repository Forking​

  • blazenote-frontend repository forked to your account
  • blazenote-backend repository forked to your account
  • Both repositories contain main and starter branches
  • Both repositories visible in your GitHub account

Local Cloning​

  • Both repositories cloned to local machine
  • Repositories located in organized directory structure
  • Can navigate to both project directories

Branch Management​

  • Currently on starter branch in both projects
  • Can see branch status with git branch
  • Understand the purpose of different branches

Remote Configuration​

  • Git remotes properly configured
  • Can see remote URLs with git remote -v
  • SSH or HTTPS authentication working

Dependencies Installation​

  • Frontend dependencies installed with npm install
  • Backend dependencies installed with npm install
  • node_modules/ directories created in both projects
  • No error messages during installation

What's Next?​

Perfect! Your repositories are now set up and ready for development.

Next Step: Environment Configuration - Install project dependencies and configure your development environment.

Common Git Commands​

Here are some useful Git commands you'll use throughout the workshop:

# Check current branch
git branch

# Switch branches
git checkout [branch-name]

# Check repository status
git status

# View commit history
git log --oneline

# Check remote repositories
git remote -v

# Pull latest changes
git pull origin starter

Need Help?​

Repository Issues:

  • Ensure you used your correct GitHub username in clone URLs
  • Verify repositories were successfully forked
  • Check internet connection for cloning

Branch Issues:

  • Use git branch -a to see all available branches
  • Ensure you unchecked "Copy the main branch only" during forking

Permission Issues:

  • Set up SSH keys for easier authentication
  • Use personal access tokens if needed
  • Check the Troubleshooting Guide

Great job! Your code repositories are ready for development! 🎯