How joaoptoaldo/laboratorio-rotas-react-ia works
Laboratório de Rotas is a didactic full-stack task manager with registration/login, JWT-protected task CRUD, and a React interface. A user registers or logs in, then creates, lists, edits, completes, or removes their tasks; the backend scopes task operations to the authenticated user and persists users and tasks in PostgreSQL through Drizzle. The graph separates frontend interactions, authentication, task routes, and persistence. Relationships reflect shown calls or HTTP endpoints; deployment files and unsampled implementation details are omitted.
Main entry points: App.jsx App state · tarefaRoute.js Task routes · server.js Auth endpoints · Auth.jsx Auth form
Components 12
Task interface
- App state
frontend/src/App.jsx - Auth form
frontend/src/Auth.jsx - Task input
frontend/src/components/input.jsx - Task list
frontend/src/components/TarefaList.jsx - Task card
frontend/src/components/TarefaList.jsx - Theme toggle
frontend/src/components/ui/ThemeToggle.jsx
Authentication
- Auth endpoints
backend/server.js
Task API
- Task routes
backend/routes/tarefaRoute.js
Persistence
- Drizzle client
backend/database/db.js - User and task schema
backend/database/schema.js
Other components
- User
- PostgreSQL
Connections 15
- User → Auth form: submits credentials
frontend/src/Auth.jsx - User → App state: uses task views
- Auth form → Auth endpoints: posts credentials
frontend/src/Auth.jsx - Auth endpoints → Drizzle client: queries users
backend/server.js - Auth endpoints → User and task schema: uses user table
backend/server.js - App state → Auth form: renders unauthenticated
frontend/src/App.jsx - App state → Task input: renders
frontend/src/App.jsx - App state → Task list: renders
frontend/src/App.jsx - Task input → Task routes: posts task
frontend/src/components/input.jsx - App state → Task routes: fetches and toggles
frontend/src/App.jsx - Task card → Task routes: edits and deletes
frontend/src/components/TarefaList.jsx - Task list → Task card: renders cards
frontend/src/components/TarefaList.jsx - Task routes → Drizzle client: runs task queries
backend/routes/tarefaRoute.js - Task routes → User and task schema: uses task table
backend/routes/tarefaRoute.js - Drizzle client → PostgreSQL: connects
backend/database/db.js