Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 2

Building a Full-Stack Repository with GitHub Integration

Recommended resources

In our previous lesson, we set up the basic folder structure for your e-commerce project using the terminal inside VS Code. You now have a project directory containing client and server folders, ready for code. Today, we'll transform that simple structure into a professional-grade project repository.

This lesson addresses the learning outcome: Create a full-stack repository with client and server folders, a .gitignore, a clear README, and a GitHub remote. We'll use Git, the industry-standard version control system, to track your project's history and GitHub to host it online. This is a foundational workflow for any developer, allowing you to save your progress, collaborate, and showcase your work.

Why a Professional Project Setup Matters

Before we start typing commands, it's essential to understand the "why." A well-organized repository is easier to manage, understand, and share. It's a hallmark of a professional developer. Let's watch a short video that discusses the value of a deliberate project structure, starting version control early, and the role of documentation.

How To Structure A Programming Project…

This video from Tech With Tim offers great advice on setting up programming projects.

First, watch the segment on directory structure, which reinforces the client/server separation we established. Next, focus on the rationale for using version control from the very beginning of a project. Finally, learn about the importance of project documentation, particularly the README file we'll create.

As you saw, setting these things up now isn't just about good housekeeping; it's about building a maintainable project and a strong professional habit.

Step 1: Initializing the Git Repository

First, we need to tell Git to start tracking our ecommerce-store project. This process is called "initializing a repository." It creates a hidden .git directory inside your project folder, where Git will store all the history and metadata.

Ensure you have your ecommerce-store project open in VS Code and the integrated terminal is open (Ctrl+``). The terminal prompt should show you are in the ecommerce-store` directory.

Now, run the following command:

git init -b main

This command initializes an empty Git repository and sets the name of your primary branch to main, which is the current standard.

You can also do this directly from the VS Code interface. The following short clip from the official VS Code channel demonstrates how.

Using Git with Visual Studio Code (Official Beginner Tutorial)

This video from the Visual Studio Code channel shows how to use its built-in Git features.

Watch the section from the beginning to see how to initialize a repository using the Source Control panel in VS Code. If you've already run the command above, you'll see VS Code's Source Control panel update to reflect the new repository.

Step 2: Ignoring Files with .gitignore

Not every file in your project folder should be saved in your project's history. Examples include:

  • Secret information like API keys or passwords.
  • Large, auto-generated folders of dependencies (e.g., node_modules).
  • Operating system files (like .DS_Store on macOS).
  • Log files.

We can tell Git to ignore specific files and folders by creating a special file called .gitignore.

Ignoring files - GitHub Docs

This official GitHub documentation explains the purpose and basic usage of a .gitignore file.

Read the first section, Configuring ignored files for a single repository. This covers how to create the file and where to place it.

Following the guide, let's create this file in your project's root directory (ecommerce-store) from your integrated terminal:

touch .gitignore

Now, open the newly created .gitignore file in VS Code and add the following lines. These are common for web development projects and will serve us well later in the course.




# Operating system files
.DS_Store




# Log files
*.log




# Environment variables
# We will create this file later to store secrets
.env




# Dependency directories
# These will be created when we add project dependencies
node_modules/

Step 3: Documenting Your Project with a README

The README.md file is the front door to your project. It's the first thing other developers (or potential employers) will see. It should explain what the project is and how to use it. The .md extension stands for Markdown, a simple syntax for formatting text.

In your terminal, create the file:

touch README.md

Now open README.md and add some initial content. Here is a template to get you started.




# E-Commerce Store

This repository contains the code for a full-stack e-commerce application, built as part of a web development course.




## Project Structure

- `/client`: Contains the frontend storefront application (built with HTML, CSS, and eventually a JavaScript framework).
- `/server`: Contains the backend API and database logic.




## Getting Started

*(Instructions on how to install and run the project will be added here later.)*

Step 4: Saving Your First Snapshot (Commit)

Now that we have our initial project files, we need to save this version into Git's history. This is a two-step process:

  1. Staging: You choose which changes you want to include in the next snapshot.
  2. Committing: You save the staged changes as a snapshot with a descriptive message.

The official GitHub documentation outlines the commands for this process.

Adding locally hosted code to GitHub

This guide covers the command-line workflow for getting a local project onto GitHub. We'll revisit it in the next step.

Focus on steps 4 and 5 in the "Initializing a Git repository" section. These explain the git add and git commit commands.

Let's apply this. In your terminal:

  1. Stage all new files: The . tells Git to stage all new and modified files in the current directory and subdirectories.

    git add .

  2. Commit the staged files: The -m flag allows you to provide a commit message directly.

    git commit -m "Initial commit: Add project structure, gitignore, and README"

Your first commit is now saved locally! VS Code's Source Control panel provides a great visual way to handle staging and committing, as you can see in the next clip.

Using Git with Visual Studio Code (Official Beginner Tutorial)

Let's return to the VS Code Git tutorial.

Watch the segment from staging and committing to see how this two-step process works in the VS Code UI. You can click the + icon to stage files and type your message in the text box.

Step 5: Publishing to GitHub

Our repository currently exists only on your computer. To share it, back it up, and build your portfolio, we need to push it to a "remote" repository hosted on GitHub.

Adding locally hosted code to GitHub

Now, let's use the second part of the GitHub documentation.

Follow the instructions in the section "Adding a local repository to GitHub using Git". Stop before the "Further reading" section.

Let's walk through those steps together:

  1. Create a new repository on GitHub.com. Go to your GitHub account, click the + icon in the top right, and select "New repository".

    • Give it a name (e.g., ecommerce-store).
    • Provide an optional description.
    • Crucially, leave it as a "Public" repository and DO NOT initialize it with a README, license, or .gitignore file. We have already created these locally.
    • Click "Create repository".

  2. Link your local repository to the remote. GitHub will show you a page with some commands. Copy the repository URL (it should end with .git). Then, run this command in your terminal, replacing REMOTE-URL with the URL you just copied:

    git remote add origin REMOTE-URL

    This command tells your local repository that there's a remote destination named origin at that URL.

  3. Push your local commits to GitHub. Now, upload your main branch and its commits to the origin remote:

    git push -u origin main

    The -u flag sets the local main branch to track the remote main branch, so in the future, you can simply run git push.

Once again, VS Code provides a convenient way to do this with a single click.

Using Git with Visual Studio Code (Official Beginner Tutorial)

Finally, let's see how VS Code handles publishing.

Watch the clip on publishing to GitHub. If you've already authenticated VS Code with your GitHub account, you can use the "Publish Branch" button to perform steps 2 and 3 automatically.

If you refresh your GitHub repository page, you will see all your files—client and server folders, .gitignore, and README.md—are now online!

Conclusion

Congratulations! You've successfully set up a professional, full-stack project repository. This workflow is a fundamental part of modern software development.

Here are the key takeaways from this lesson:

  • A repository is initialized with git init.
  • The .gitignore file tells Git which files and folders to exclude from version control.
  • The README.md file serves as the project's homepage, explaining its purpose and structure.
  • Changes are saved using a two-step process: git add (staging) and git commit (committing).
  • A local repository is connected to a GitHub remote using git remote add origin <URL>.
  • Local commits are uploaded to GitHub with git push.

In our next lesson, we'll dive deeper into the day-to-day use of Git. You will learn how to stage changes more selectively, write meaningful commit messages for specific features, and inspect your project's history.