How mosh-hamedani/react-course-part1 works
This is a React and TypeScript course-example repository, not a single integrated business product. The active application workflow renders a user list, loads users through a cancellable hook, and supports optimistic create, update, and delete operations through an HTTP client. Separate source areas demonstrate reusable UI, validated forms, and expense-tracker components. The README documents broader course topics, but sampled source and the tree do not establish wiring for every example or deployment workflow.
Main entry points: UserList.tsx User list · user-service.ts User service · main.tsx React entry · App.tsx App
Components 16
Active application
- React entry
src/main.tsx - App
src/App.tsx - User list
src/components/UserList.tsx
User API
- User hook
src/hooks/useUsers.ts - User service
src/services/user-service.ts - HTTP service
src/services/http-service.ts - API client
src/services/api-client.ts
UI examples
- Selectable list
src/components/ListGroup/ListGroup.tsx - Styled button
src/components/Button/Button.tsx - Validated form
src/components/Form.tsx
Expense tracker
- Expense form
src/expense-tracker/components/ExpenseForm.tsx - Expense categories
src/expense-tracker/categories.ts - Expense filter
src/expense-tracker/components/ExpenseFilter.tsx - Expense list
src/expense-tracker/components/ExpenseList.tsx
Other components
- Browser user
- JSONPlaceholder API
Connections 10
- Browser user → React entry: opens app
- React entry → App: renders
- App → User list: renders
- User list → User hook: uses state
- User hook → User service: loads users
- User list → User service: mutates users
- User service → HTTP service: creates service
- HTTP service → API client: sends requests
- API client → JSONPlaceholder API: HTTP calls
- Expense form → Expense categories: uses options