Project Setup and File Structure

Setting Up Your Development Environment

Before building real projects, you need the right tools installed on your computer.

Node.js and npm

Node.js is a JavaScript runtime that lets you run JavaScript outside the browser. npm (Node Package Manager) comes bundled with Node.js and lets you install third-party packages.

# Check if Node.js and npm are installed
node --version   # Should show v18.x or higher
npm --version    # Should show v9.x or higher

Download Node.js from nodejs.org if you have not installed it. Choose the LTS (Long-Term Support) version.

Vite vs Create React App

For years, Create React App (CRA) was the standard tool for starting React projects. Today, Vite has replaced it as the recommended choice because it is dramatically faster — development server starts in milliseconds, hot module replacement is instant.

# Create a new React project with Vite
npm create vite@latest my-portfolio -- --template react

# Navigate into the project
cd my-portfolio

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:5173 to see your running app.

Understanding the Project Structure

A freshly created Vite React project looks like this:

my-portfolio/
├── public/              # Static files served as-is (favicon, robots.txt)
│   └── vite.svg
├── src/                 # Your application source code
│   ├── assets/          # Images, fonts, SVGs used in components
│   ├── App.jsx          # Root component
│   ├── App.css          # Root component styles
│   ├── main.jsx         # Entry point — mounts App into the DOM
│   └── index.css        # Global styles
├── index.html           # HTML shell — Vite injects your JS here
├── package.json         # Project metadata and dependencies
├── package-lock.json    # Locked dependency versions
├── vite.config.js       # Vite configuration
└── .gitignore           # Files Git should ignore (node_modules, .env)

A Scalable Folder Structure

As your project grows, organise your src/ folder by type:

src/
├── components/          # Reusable UI components
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── Button.module.css
│   └── Navbar/
│       ├── Navbar.jsx
│       └── Navbar.module.css
├── pages/               # Page-level components (one per route)
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
├── hooks/               # Custom React hooks
│   ├── useFetch.js
│   └── useLocalStorage.js
├── utils/               # Pure utility functions
│   ├── formatDate.js
│   └── validators.js
├── context/             # React Context providers (global state)
│   └── AuthContext.jsx
├── assets/              # Images, fonts, SVGs
├── App.jsx
└── main.jsx

package.json — Your Project's Blueprint

package.json lists your project's metadata, scripts, and dependencies:

{
  "name": "my-portfolio",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.22.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.1.4"
  }
}

• dependencies — packages needed to run your app
• devDependencies — packages only needed during development (build tools, linters)

Environment Variables

Sensitive values like API keys should never be hardcoded in your source code. Use environment variables instead:

# .env.local (never commit this file!)
VITE_API_URL=https://api.careerex.io
VITE_API_KEY=your_secret_key_here

In Vite, environment variables must start with VITE_ to be accessible in your code:

// src/config.js
const apiUrl = import.meta.env.VITE_API_URL;
const apiKey = import.meta.env.VITE_API_KEY;

Always add .env.local to your .gitignore to prevent committing secrets.

Key Takeaways

• Node.js and npm are prerequisites; use Vite (not Create React App) to scaffold new React projects
• Vite's development server starts in milliseconds and supports instant hot module replacement
• Organise src/ into components, pages, hooks, utils, and context for maintainability as projects grow
• package.json lists your project scripts and separates runtime dependencies from dev dependencies
• Environment variables in Vite must start with VITE_ and are accessed via import.meta.env
• Never commit .env files or API keys to Git — use .gitignore to exclude them

Practice Exercise

1. Create a new Vite React project called my-portfolio using the command from this lesson
2. Create the full folder structure described above inside src/
3. Create a components/Navbar/Navbar.jsx component that renders a nav with links to Home, Projects, and Contact
4. Create a utils/formatDate.js file that exports a function formatting a date as "28 August 2026"
5. Add a .env.local file with a VITE_PORTFOLIO_NAME variable and display its value in your App component