Building a Note Taker

I'd like to have a template app that's a little more complex than keeping todo lists. The app should present a more natural CRUD usage pattern with separate viewing and update interfaces. Moreover, there should be some many-to-one and many-to-many relations among the application data models.

Overview

My goal is for beginners to have some sense about what basic programming skills are needed, and typical frameworks out there that help people build web apps. It would be also great if the resulting application templates can be used as a starting pointing for further adaption.

Not attempting to enumerate all, here are some technology stacks I will probably explore, without a particular order:

• Python, Flask, and plain SQL
• Node.js, Express, and plain SQL
• Golang, command line interface, plain SQL
• Golang, Bubble Tea, plain SQL
• Golang, Gin, plain SQL
• Python, Flask, and SQLAlchemy
• Node.js, Express, and MongoDB
• Node.js, Express, and Sequelize
• Node.js, Express, MongoDB backend, and React frontend
• Python, Django
• Python, Django backend, HTMX and Alpine.JS frontend
• Strapi headless CMS + React frontend
• Possibly more...

Why do I want to spend so much effort on such things where there are already many excellent materials out there?

• To have a shared application model to illustrate common features of applications, to help distinguish the differences among different technologies, yet allowing people to know what happen beneath
• Since I am also rewriting and creating on-line course materials for programming, I'd like to use this opportunity to document important encounters when learning and using tools.

The Data Model

To be useful and reusable later, I choose a simple note taking app as the basis. Basically:

• A user can create many notes; each note has exactly one owner.
• A note can have multiple tags (not repeated); the same tag can be included in multiple notes.

With the basis given above, common queries to the database include:

• List users, notes, and tags with some basic filters
• List notes of a given user, and/or with certain tags

Basic actions to update the database include:

• Create, update, or remove users, notes and tags with certain criteria

For UI and styling I'll use Bootstrap.js for its ease of use, knowing that there are a lot of choices out there these days.