How sif8d/mern-todo-app works
This is a full-stack todo manager: users browse all, completed, or pending tasks, create and edit entries, change completion, and delete them. The React interface dispatches Redux async actions that call the Express API; the API validates relevant title and YouTube-link constraints, operates on MongoDB records, and returns refreshed lists. The client also provides task details, empty/loading states, and theme switching. The README is empty, so capability and wiring evidence comes from the supplied source excerpts; some component and store internals were not sampled.
Main entry points: Todos.tsx Todo views · TodoSlice.ts Todo state and API · store.ts Redux store · todoRouter.js Todo routes
Components 15
React client
- Client entry
client/src/main.tsx - App shell
client/src/App.tsx - Todo views
client/src/components/Todos.tsx - Todo item
client/src/components/Todo.tsx - Task dialogs
client/src/components/Dialogs.tsx - Empty states
client/src/components/Empty.tsx - Redux store
client/src/app/store.ts - Todo state and API
client/src/features/TodoSlice.ts - Toast UI
client/@/components/ui/toast.tsx
Todo API
- Todo routes
server/routes/todoRouter.js - HTTP server
server/app.js
MongoDB persistence
- DB connection
server/config/db.js - Todo model
server/models/Todo.js
Other components
- User
- MongoDB
Connections 16
- User → Todo views: uses
- Client entry → App shell: renders
- App shell → Todo views: shows
- Todo views → Todo item: renders tasks
- Todo views → Empty states: shows states
- Todo views → Task dialogs: opens dialogs
- Todo views → Redux store: selects and dispatches
- Task dialogs → Redux store: dispatches actions
- Redux store → Todo state and API: holds state
- Todo state and API → Todo routes: sends HTTP requests
- Todo state and API → Toast UI: queues notifications
- HTTP server → Todo routes: mounts routes
- HTTP server → DB connection: connects
- Todo routes → Todo model: queries and mutates
- Todo model → MongoDB: persists records
- DB connection → MongoDB: opens connection