Installation

Prerequisites

Before installing DevJobs, ensure you have the following installed on your system:

Node.js

Version 16.x or higher required

Package Manager

npm, yarn, or pnpm

Git

For cloning the repository

Code Editor

VS Code, WebStorm, or your preferred editor

Verify Prerequisites

Check your Node.js and npm versions:

node --version
# Should output v16.x.x or higher

npm --version
# Should output 7.x.x or higher

Installation Methods

npm
yarn
pnpm

Using npm

Clone the Repository

Clone the DevJobs repository from GitHub:

git clone https://github.com/tavowb/DevJobs-bootcamp.git
cd DevJobs-bootcamp

Install Dependencies

Install all required packages:

npm install

This will install:

React 19.2.0
React Router DOM 7.9.6
Snarkdown 2.0.0
Vite 7.2.2
And all dev dependencies

Start Development Server

Run the development server:

npm run dev

The application will be available at http://localhost:5173

Using Yarn

Clone the Repository

Clone the DevJobs repository from GitHub:

git clone https://github.com/tavowb/DevJobs-bootcamp.git
cd DevJobs-bootcamp

Install Dependencies

Install all required packages:

yarn install

Start Development Server

Run the development server:

yarn dev

The application will be available at http://localhost:5173

Using pnpm

Clone the Repository

Clone the DevJobs repository from GitHub:

git clone https://github.com/tavowb/DevJobs-bootcamp.git
cd DevJobs-bootcamp

Install Dependencies

Install all required packages:

pnpm install

Start Development Server

Run the development server:

pnpm dev

The application will be available at http://localhost:5173

Project Structure

After installation, your project structure will look like this:

DevJobs-bootcamp/
├── public/              # Static assets
│   └── background.webp  # Hero background image
├── src/
│   ├── components/      # Reusable UI components
│   ├── hooks/          # Custom React hooks
│   ├── pages/          # Page components
│   ├── assets/         # Asset files
│   ├── App.jsx         # Main App component
│   ├── App.css         # App styles
│   ├── index.css       # Global styles
│   ├── main.jsx        # Application entry point
│   └── data.json       # Mock data (if applicable)
├── index.html          # HTML template
├── package.json        # Dependencies and scripts
├── vite.config.js      # Vite configuration
├── eslint.config.js    # ESLint configuration
└── jsconfig.json       # JavaScript configuration

Available Scripts

DevJobs comes with several npm scripts defined in package.json:

npm run dev
# Starts the Vite development server with hot module replacement
# Accessible at http://localhost:5173

Configuration Files

Vite Configuration

The vite.config.js includes:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

This enables:

React Fast Refresh with SWC
Path alias (@ → src/) for cleaner imports

ESLint Configuration

The project uses a flat ESLint configuration with:

React recommended rules
React Hooks rules
React Refresh rules

JavaScript Configuration

The jsconfig.json provides IDE support for the @ path alias:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Verifying Installation

After installation, verify everything works correctly:

Check Development Server

Visit http://localhost:5173 in your browser. You should see the DevJobs homepage with a search form.

Test Navigation

Click on the search button to navigate to the search results page. Filtering and pagination should work.

Check Hot Reload

Make a small change to any component file (e.g., change text in src/pages/Home.jsx). The browser should automatically reload with your changes.

Run Linter

Execute npm run lint to ensure there are no code quality issues.

Troubleshooting

Port 5173 is already in use

If port 5173 is occupied, Vite will automatically try the next available port (5174, 5175, etc.). Check the terminal output for the actual URL.To use a specific port:

npm run dev -- --port 3000

Module not found errors

If you see module resolution errors:

Delete node_modules and package-lock.json:

rm -rf node_modules package-lock.json

Clear npm cache:

npm cache clean --force

Reinstall dependencies:

npm install

EACCES permission errors

If you encounter permission errors during npm install:Don’t use sudo! Instead, configure npm to use a different directory:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

Add to your .bashrc or .zshrc:

export PATH=~/.npm-global/bin:$PATH

Vite not starting

If Vite fails to start:

Check Node.js version (must be 16+)
Clear Vite cache:

rm -rf node_modules/.vite

Restart the dev server

React Fast Refresh not working

If hot module replacement isn’t working:

Ensure your component files export components (not just render functions)
Check that file names match component names
Restart the dev server

Next Steps

Quick Start Guide

Follow our quick start guide to understand the application flow

Architecture Overview

Learn about the application architecture and design patterns

Component Library

Explore available components and how to use them

Contributing

Learn how to contribute to the project

IDE Setup Recommendations

VS Code Extensions

For the best development experience with VS Code, install:

ES7+ React/Redux/React-Native snippets: Code snippets for React
ESLint: Real-time linting feedback
Prettier: Code formatting
Auto Rename Tag: Automatically rename paired HTML/JSX tags
Path Intellisense: Autocomplete for file paths

VS Code Settings

Add to your .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

The project is configured to use path aliases with @/ pointing to src/. This keeps imports clean and makes refactoring easier.Example: import { Header } from '@/components' instead of import { Header } from '../../components'

Production Build

To create a production-ready build:

Build the Application

npm run build

This creates an optimized build in the dist/ directory with:

Minified JavaScript and CSS
Code splitting for better loading performance
Optimized assets

Preview Locally

npm run preview

Preview the production build at http://localhost:4173

Deploy

The dist/ directory can be deployed to any static hosting service:

Vercel
Netlify
GitHub Pages
AWS S3 + CloudFront

The production build is optimized for performance with tree-shaking, minification, and code splitting. Always test the production build before deploying.

Get Started

Architecture

Components

Custom Hooks

Pages

Development

Prerequisites

Node.js

Package Manager

Git

Code Editor

Verify Prerequisites

Installation Methods

Using npm

Using Yarn

Using pnpm

Project Structure

Available Scripts

Configuration Files

Vite Configuration

ESLint Configuration

JavaScript Configuration

Verifying Installation

Troubleshooting

Next Steps

Quick Start Guide

Architecture Overview

Component Library

Contributing

IDE Setup Recommendations

VS Code Extensions

VS Code Settings

Production Build

Build docs developers (and LLMs) love

Get Started

Architecture

Components

Custom Hooks

Pages

Development

​Prerequisites

Node.js

Package Manager

Git

Code Editor

​Verify Prerequisites

​Installation Methods

​Using npm

​Using Yarn

​Using pnpm

​Project Structure

​Available Scripts

​Configuration Files

​Vite Configuration

​ESLint Configuration

​JavaScript Configuration

​Verifying Installation

​Troubleshooting

​Next Steps

Quick Start Guide

Architecture Overview

Component Library

Contributing

​IDE Setup Recommendations

​VS Code Extensions

​VS Code Settings

​Production Build

Build docs developers (and LLMs) love

Prerequisites

Verify Prerequisites

Installation Methods

Using npm

Using Yarn

Using pnpm

Project Structure

Available Scripts

Configuration Files

Vite Configuration

ESLint Configuration

JavaScript Configuration

Verifying Installation

Troubleshooting

Next Steps

IDE Setup Recommendations

VS Code Extensions

VS Code Settings

Production Build