DEV Community

Khe Ai
Khe Ai Subscriber

Posted on • Edited on • Originally published at kheai.com

Blaze 3 Unofficial Simple Todos Tutorial with Meteor 3.4.1 + Rspack + PicoCSS

Welcome! In this tutorial, we will create a simple To-Do app using Blaze and Meteor 3.4.1.

Blaze is Meteor's original, deeply integrated UI framework. It uses an easy-to-learn, Handlebars-like template syntax. Compared to traditional tools, Blaze eliminates the need to manually update the DOM when your database changes. Instead, it integrates directly with Meteor's transparent reactivity. Change a document in your database, and the UI updates instantly.

With Meteor, a single developer can build a fully functional, real-time app in the time it takes a team of architects to decide on their communication protocols. Let's start building.

Blaze 3 Unofficial Simple Todos Tutorial with Meteor 3.4.1 + Rspack + PicoCSS

PS: Tutorial originally adapted from the official Meteor Blaze Guide.

Github Repo:

📝 Simple Todos (Meteor 3 + Blaze)

Meteor Version Frontend Bundler CSS Framework Deployed on Galaxy

A reactive, full-stack To-Do application built to demonstrate the power and speed of Meteor 3.4.1 using its native Blaze templating engine.

This project showcases modern Meteor features including Rspack for lightning-fast bundling, fully asynchronous database operations (Async/Await), user authentication, and Optimistic UI.

🚀 Live Demo

Play with the live app here! (Deployed via Meteor Galaxy)

✨ Features

  • Real-time Reactivity: Changes in the database are instantly reflected in the UI without manual DOM manipulation.
  • Optimistic UI: When a user checks or deletes a task, the UI updates instantly (zero latency) while the server processes the request securely in the background.
  • User Authentication: Built-in secure login system using accounts-password and bcrypt.
  • Data Security: Strict data-flow control using Meteor Publications/Subscriptions and secure Remote Procedure Calls (Meteor Methods).
  • State Management: Client-side state filtering (hiding completed tasks) managed via reactive-dict.
  • Semantic Styling: Zero-config, responsive…

Updated Full step-by-step Tutorial had been moved to https://www.kheai.com/posts/6001-meteor-todo-tutorial-unofficial/

Conclusion

You have just built a reactive, full-stack application with a real database, user authentication, and secure remote procedure calls. What you've learned here applies to applications of massive scale. Welcome to the Meteor ecosystem!

Top comments (0)