Notes App

Intro

Frontend Mentor is a great site I have used for inspiration a few times when I've wanted a non-trivial project to practice building web applications with. You get a brief of the required features and a set of Figma assets to build from. This is my solution for their Note Taking App challenge.

The app is built using the Django web framework and styled with Tailwind, with an SQLite database. It runs on Docker inside a Digital Ocean VPS on its own subdomain hosted here. The repo for the app is available here.

Feel free to edit / delete notes with the test login details - they all reset every hour (on the hour) via a cron job.

App Features

Session based authentication
Registration of new users
Creating, editing and deleting user notes
Creating custom category tags and tagging notes
Filtering notes by category tag
Searching via category tag or note title
Archiving / unarchiving notes
Light, dark and system modes, saved to the user profile
Changeable font themes, saved to the user profile

App Screenshots

Application overview filtered by 'React' — Application overview

Database Schema

Although this was a pretty small application from a data structure standpoint, it does include the three main database relations.

Many to one from NoteModel to CustomUser
Many to many from NoteModel to TagModel, via the join table
One to one from CustomUser to ProfileModel