How josh-ay/todo-app works
This is a server-rendered Todo app: users view and filter active or completed items, add, complete, uncheck, remove, and clear todos. Express routes in app.js coordinate MongoDB reads and writes and render the EJS view; browser JavaScript submits item actions and manages theme and sorting behavior. The README also documents responsive layouts and system-preferred themes. Source excerpts do not establish the implementation of the drag-and-drop library or every visual detail, so those links are omitted.
Main entry points: list.ejs Todo view · script.js Browser interactions · app.js Todo routes · header.ejs Page header
Components 14
Server workflow
- Express app
app.js - Todo routes
app.js - Todo view
views/list.ejs - Page header
views/partials/header.ejs - Page footer
views/partials/footer.ejs
Todo persistence
- Active todos
app.js - Completed todos
app.js - MongoDB
Browser experience
- Browser interactions
public/js/script.js - Theme preference
- System theme
- Responsive styling
public/styles/scss/style.scss - Public assets
public
Other components
- Todo user
Connections 16
- Todo user → Express app: requests pages
- Express app → Todo routes: dispatches routes
- Todo routes → Active todos: reads and writes
- Todo routes → Completed todos: reads and writes
- Active todos → MongoDB: persists todos
- Completed todos → MongoDB: persists todos
- Todo routes → Todo view: renders results
- Todo view → Page header: includes
- Todo view → Page footer: includes
- Todo view → Browser interactions: loads interactions
- Todo view → Responsive styling: uses styling
- Todo view → Public assets: references assets
- Todo user → Browser interactions: uses controls
- Browser interactions → Express app: submits item actions
- Browser interactions → Theme preference: reads and saves
- Browser interactions → System theme: checks preference