React Crash Course Workspace

This repo captures the finished exercises from Traversy Media's React Crash Course. The app in react-jobs/ is a job board that simulates a production workflow: it talks to a JSON Server API, uses React Router loaders/forms, and applies Tailwind-driven styling (plus niceties like React Toastify, React Icons, and ClipLoader).

Project Highlights

• Job listing UI – Implements the hero, cards, and listing grid from the course modules (see react-jobs/src/components).
• Routing exercises – react-jobs/src/App.jsx and react-jobs/src/pages cover nested layouts, loaders, and dynamic params exactly as demonstrated in the lessons.
• JSON Server practice – Running npm run server serves react-jobs/src/jobs.json, letting the Add/Edit/Details pages practice POST/PUT/DELETE calls without a custom backend.
• Feedback patterns – Tailwind utility classes plus the spinner/toast components (e.g. react-jobs/src/components/Spinner.jsx) mirror the course approach to loading and success states.

Tech Stack

• React 19 + React Router 7
• Vite 7 bundler with ESLint 9
• Tailwind CSS 4 via @tailwindcss/vite
• JSON Server 1.0 beta for local API prototyping
• React Toastify and React Icons for UI feedback

Prerequisites

• Node.js 18+ (npm included)
• Two terminal tabs or panes available for running the dev server and JSON Server simultaneously

Getting Started

1. cd react-jobs
2. npm install
3. In one terminal run npm run server (watches src/jobs.json on port 8000).
4. In another terminal run npm run dev (Vite dev server on http://localhost:5173 with the /api proxy).
5. Optional: npm run build && npm run preview to test the production bundle.

Scripts & Structure

Key Scripts

• npm run dev – start Vite in development mode with HMR.
• npm run build – emit the optimized production bundle.
• npm run preview – serve the build output locally.
• npm run lint – run ESLint with the base React/Vite rules.
• npm run server – boot JSON Server to enable the CRUD pages.

Notable Folders

• react-jobs/src/pages – route-level components for browsing, viewing, adding, and editing jobs.
• react-jobs/src/components – shared UI building blocks (Hero, Navbar, JobListings, toasts, etc.).
• react-jobs/src/layouts/MainLayout.jsx – wraps routes with the nav + toast container.
• react-jobs/src/jobs.json – seed data consumed by JSON Server.