Triphop (2015): An Exploration of a Real-Time TODO Application

Source: Dev.to

Overview

Released in 2015 by developer Árpád Kiss (@rpi1337), Triphop is a real‑time TODO application that demonstrates the web development practices of its time. It combines a robust frontend framework with an event‑driven backend to build a reactive single‑page application (SPA).

Technology Stack

• Frontend: AngularJS (v1.3.14) for data binding and application logic; Bootstrap (v3.3.1) for styling.
• Backend: Node.js with the Express framework.
• Real‑Time Communication: Socket.IO for instant updates across all connected users.
• Storage: Custom file‑based JSON store (store/data.json) instead of a traditional database.

Architecture

The backend follows a Model‑View‑Controller (MVC) pattern adapted for an API‑first design.

Models and Data Store

• List – contains an id and a title.
• Todo – contains an id, listId (associates it with a specific list), a title, and a description.

The Store module (store/index.js) reads from and writes to data.json. It provides methods such as findAll, find, add, remove, and commit to manipulate in‑memory data and synchronize it with the file system.

Controllers and Routing

The central router (api/index.js) maps HTTP methods and endpoints to controller actions, e.g.:

GET  /api/lists          → ListsController.getLists
POST /api/lists/:id      → TodosController.addTodo

Controllers (lists.js and todos.js) interact directly with the Store and use the SocketService to broadcast changes to clients.

Client‑Side Structure

The client code (app/js/main.js) follows classic AngularJS conventions, separating concerns into controllers and services.

Services

• SocketService – initializes the Socket.IO connection and provides a subscribe method for server events.
• ListsService & TodosService – handle core business logic, perform HTTP requests to the Express API, and listen for real‑time WebSocket events to keep internal data arrays up‑to‑date.

Controllers

• MainController – manages navigation state (switching between all lists and tasks within a specific list).
• HeaderController – handles creation of new lists via the navigation bar.
• ListController & TodosController – bind service data to HTML views and expose UI functions for modifying and deleting items.

Real‑Time Flow

When a user adds a new TODO item, the following sequence occurs:

1. Frontend: TodosController calls TodosService.add(), sending a POST request to the server.
2. Backend: TodosController receives the request, updates the Store, and invokes SocketService.publish('new-todo', todo.toJSON()).
3. SocketService broadcasts the event to all connected WebSocket clients.
4. Frontend: TodosService, subscribed to the new-todo event, receives the payload, appends the new item to its data array, and updates the UI.

This flow ensures that any list or task created, modified, or deleted by one user is instantly reflected on every other user’s screen without a page refresh.

Conclusion

Triphop (2015) is a clean, lightweight example of a real‑time SPA. By combining AngularJS, Express, and Socket.IO, it demonstrates how to keep server state and client state tightly synchronized. While modern frameworks such as React or Vue and databases like PostgreSQL or Firebase are more common today, Triphop offers valuable insight into the foundational concepts of real‑time web architecture.

Source code: