Homework 8

Due: Thursday June 4, 11pm

Submit to: https://www.crowdgrader.org/crowdgrader/venues/view_venue/4654

The Assignment

This is the last homework assignment. In it, you have to demonstrate that you can build a small site, by yourself, with little starter code. The assignment per se is not hard, as it reuses many of the things we have seen throughout the class.

The Basics

You have to build a self-notes site, similar to Apple Notes, or Google Keep. This is more or less how the site should look like:

The app should be a single-page app that lets user create and edit notes. Every note has a title, in boldface, and has a body, that consists of general text. You can probably use a textarea input element to display the text, using the readonly mode when displaying it (see https://bulma.io/documentation/form/textarea/) but it is really up to you.

It should be possible to create simple lists (fancy checkboxes not needed) or normal text.

You should be able to star notes, and to choose the color of notes. Starred notes should be listed on top; then the non-starred ones follow; among each starred or non-starred category, the latest modified notes should be displayed on top (use a last_modified date associated with a note, and use this field to sort notes).

Clicking on the star toggles the star value, and clicking on one of the colored squares (or circles, as you like) at the bottom changes the color of the note. I suggest that you use classes like is-note-red etc, and you use Vue style bindings to associate colors to notes, but it's really up to you. I would prefer you to create a css stylefile in which you define nice pastel colors for is-note-red, etc, rather than use the far too garish colors that Bulma uses (should it be named Bunta rather? [you need to know German to get the joke]).

The plus button at the top adds a new note. The trash icon in each note deletes it, showing first a confirmation (example: you click on the trash, it shows somewhere a confirmation that says "Delete?", you click on Yes, and it's gone, or something like that -- just make sure there is a confirmation). To edit a note, you just click on it and you can edit title and content.

You have to display 2-4 notes per row, arranged somehow. Of course, the notes (and their colors, etc) are stored in the database, so that when you reload the page, they are not lost. You need to be logged in to create/view/edit notes.

The Optionals

Once you implement these basics, you can add some features to make your app awesome.

• Allow users to upload images with their notes. You don't need to implement GCS uploads; you can upload and serve from the filesystem; we covered in class code to upload or else look at the examples app.
• Allow users to share their notes. Note: this is hard, it's extra credit only. Add a share icon to each node, and when you click it, you can edit a text field with a list of email addresses of users who can see the note (e.g., alpha@example.com, beta@example.com). Represent this via a many-to-many relation in the database between users and notes. Every user who has the note shared can delete or edit the note, or share it, too. Again, this is hard, implement this only as extra credit.

Evaluation Criteria

Your app will be evaluated both for functionality (does it do what is supposed to do?) and cleanliness (is it nice and easy to use and well laid out?).

Starer Code

The point of this app is to have you setup the app and solve the problem from scratch. You can use the vue_start app as a starting point if you like, or any other app too.