Real World Example

Real projects group files by purpose so a team can find things quickly.

src/
├── api/client.js          axios instance with the base URL and auth token
├── pages/Jobs.jsx         /jobs page
├── pages/JobDetails.jsx   /jobs/:id page
├── components/JobCard.jsx reusable card used on many pages
├── hooks/useJobs.js       fetch + filter jobs
├── context/AuthContext.jsx logged-in user
├── App.jsx                routes
└── main.jsx               providers (Router, Redux, Auth)