Frontend Engineering | VoidX Academy

5. Workflows, Version Control & Tooling

Professional Tooling: Working Like an Engineer

Writing code is only half of an engineer's job. The other half is managing that code, tracking changes, downloading external libraries, and packaging the application for the browser. This module covers the essential tools used in every professional agency.

Git: The Time Machine

Git is a version control system installed on your computer. It takes snapshots of your codebase. If you make a mistake and break your app, you can instantly revert back to a previous, working snapshot.

# 1. Initialize a new Git tracking system in your current folder
git init

# 2. Add all your modified files to the "staging area" (preparing them to be saved)
git add .

# 3. Take the snapshot, attaching a descriptive message
git commit -m "Added the hero section to the homepage"

GitHub: The Cloud Hub

If Git is the local time machine, GitHub is the cloud storage for those time machines. It allows you to back up your code and collaborate with other developers.

# Connect your local repository to a blank GitHub repository
git remote add origin https://github.com/YourUsername/voidx-project.git

# Upload (push) your local commits to GitHub
git push -u origin main

NPM: Node Package Manager

You don't need to write every feature from scratch. NPM allows you to download "packages" (libraries of code written by others) directly into your project.

# Creates a package.json file, which acts as the 'brain' of your project
npm init -y

# Installs a library (e.g., 'axios' for making API requests)
npm install axios

The Importance of .gitignore

When you run `npm install`, NPM downloads thousands of files into a folder called `node_modules`. This folder is massive. You should NEVER upload this to GitHub. The `.gitignore` file tells Git to ignore it.

# Inside your .gitignore file
node_modules/
.env  # Also ignore secret API keys!

Vite: The Modern Bundler

Browsers only understand basic HTML, CSS, and JS. They do not understand React (JSX) or TypeScript. A Bundler translates your advanced code into basic code that browsers can read. Vite is the incredibly fast, modern standard.

# Command to instantly generate a new React project using Vite
npm create vite@latest EcoStore-app -- --template react

cd EcoStore-app

# Download the default React dependencies
npm install

# Start a local development server to view your app
npm run dev

5. Workflows, Version Control & Tooling

Professional Tooling: Working Like an Engineer

Git: The Time Machine

# 1. Initialize a new Git tracking system in your current folder
git init

# 2. Add all your modified files to the "staging area" (preparing them to be saved)
git add .

# 3. Take the snapshot, attaching a descriptive message
git commit -m "Added the hero section to the homepage"

GitHub: The Cloud Hub

If Git is the local time machine, GitHub is the cloud storage for those time machines. It allows you to back up your code and collaborate with other developers.

# Connect your local repository to a blank GitHub repository
git remote add origin https://github.com/YourUsername/voidx-project.git

# Upload (push) your local commits to GitHub
git push -u origin main

NPM: Node Package Manager

You don't need to write every feature from scratch. NPM allows you to download "packages" (libraries of code written by others) directly into your project.

# Creates a package.json file, which acts as the 'brain' of your project
npm init -y

# Installs a library (e.g., 'axios' for making API requests)
npm install axios

The Importance of .gitignore

# Inside your .gitignore file
node_modules/
.env  # Also ignore secret API keys!

Vite: The Modern Bundler

# Command to instantly generate a new React project using Vite
npm create vite@latest EcoStore-app -- --template react

cd EcoStore-app

# Download the default React dependencies
npm install

# Start a local development server to view your app
npm run dev

5. Workflows, Version Control & Tooling

Professional Tooling: Working Like an Engineer

Git: The Time Machine

GitHub: The Cloud Hub

NPM: Node Package Manager

The Importance of .gitignore

Vite: The Modern Bundler

Knowledge Check

5. Workflows, Version Control & Tooling

Professional Tooling: Working Like an Engineer

Git: The Time Machine

GitHub: The Cloud Hub

NPM: Node Package Manager

The Importance of .gitignore

Vite: The Modern Bundler

Knowledge Check