Skip to main content

​
Get Started in Three Steps

Follow this guide to clone, install, and run DevJobs locally on your machine.
1

Clone the Repository

Clone the DevJobs repository from GitHub:
git clone https://github.com/tavowb/DevJobs-bootcamp.git
cd DevJobs-bootcamp
This downloads the complete source code including all components, hooks, pages, and configuration files.
2

Install Dependencies

Install all required packages using your preferred package manager:
npm install
This installs:
  • React 19.2.0
  • React Router DOM 7.9.6
  • Vite 7.2.2
  • Snarkdown 2.0.0
  • Development dependencies (ESLint, Vite plugins, etc.)
Installation typically takes 1-2 minutes depending on your internet connection.
3

Start the Development Server

Run the development server with hot module replacement:
npm run dev
The application will be available at http://localhost:5173
The page automatically reloads when you make changes to the source code!

​
Verify Installation

Once the development server is running, verify everything works:
Visit http://localhost:5173 in your browser. You should see:
  • Hero section with “Encuentra el trabajo de tus sueños”
  • Search input field
  • Three feature cards explaining the benefits
  1. Enter any text in the search input (e.g., “React”)
  2. Click the “Buscar” button
  3. You should navigate to /search?text=React with job results
On the search page:
  1. Select a technology from the dropdown (e.g., “JavaScript”)
  2. Select a location (e.g., “Remoto”)
  3. The URL updates and results filter automatically
  4. URL should look like: /search?text=React&technology=javascript&type=remoto
  1. Click on any job card from the search results
  2. You should navigate to /jobs/:jobId
  3. See the full job description with markdown formatting
  4. Click technology tags to filter by that technology

​
What’s Next?

Now that DevJobs is running, explore the application and documentation:

Architecture Overview

Understand the application structure, routing, and data flow patterns.

Component Library

Explore reusable UI components like JobCard, Pagination, and SearchForm.

Custom Hooks

Learn about the three custom hooks: useFilters, useRouter, and useSearchForm.

Contributing Guide

Learn how to add features, create components, and submit changes.

​
Common Tasks

To create a new component:
# Create component directory
mkdir src/components/MyComponent

# Create component file
touch src/components/MyComponent/MyComponent.jsx
touch src/components/MyComponent/MyComponent.css
Add your component code and export it from src/components/index.js:
export * from './MyComponent/MyComponent.jsx'
See the Contributing Guide for details.

​
Development Workflow

Here’s a typical development workflow:
1

Start Dev Server

npm run dev
2

Make Changes

Edit components, hooks, or pages in the src/ directory. The browser automatically reloads.
3

Check Linting

npm run lint
Ensure code follows ESLint rules.
4

Test in Browser

Manually test your changes across different routes and user flows.
5

Build and Preview

npm run build
npm run preview
Test the production build before committing.

​
Available Scripts

DevJobs provides several npm scripts for development:
ScriptCommandDescription
devnpm run devStart development server with HMR
buildnpm run buildCreate optimized production build
previewnpm run previewPreview production build locally
lintnpm run lintRun ESLint to check code quality

​
Troubleshooting

Vite will automatically try the next available port (5174, 5175, etc.). Check the terminal output for the actual URL.To specify a custom port:
npm run dev -- --port 3000
If you see module resolution errors:
  1. Delete node_modules and package-lock.json
  2. Clear npm cache: npm cache clean --force
  3. Reinstall: npm install
If hot module replacement isn’t working:
  1. Check that your component exports are correct
  2. Restart the dev server
  3. Clear browser cache and refresh
DevJobs uses an external API at https://jscamp-api.vercel.app/api/jobs. If you see API errors:
  • Check your internet connection
  • Verify the API is accessible
  • Check browser console for specific error messages
For detailed installation instructions including prerequisites and IDE setup, see the Installation Guide.

​
Need Help?

Build docs developers (and LLMs) love

Get started for freeTalk to us