Final Project - Spy Notes

For your final project, you will be creating a privacy-focused note taking web application. Users can sign up for an anonymous "account" on the site and they will be assigned both a QR Code and a random-looking user ID. They can use either to "sign in" to the application. Once signed in, they can create and delete secret notes that only somebody with their user ID can see. To create users and store notes, you will need to use the fetch function to communicate with a note-taking API that I wrote.

The application will most likely be composed of a few separate pages but as long as all of the requirements listed below are met, you are free to approach this problem how you like. We will build toward this final project over the course of the next few labs. You will get a chance to work on this project incrementally rather than as one huge effort.

For an example of a finished version of the kind of thing I'm looking for, check out https://spy-notes.rk0.xyz/. This site has a few more bells and whistles than you'll need for your final project but the general idea is captured there.

Part 1: Registration

Your app should have a page (or a form somewhere) that allows a user to sign up for an account. Because we are building a privacy-focused note-taking app, your site should not collect any information from its users. Instead, the user simply clicks a button and you make an account for them. A server (at https://spy-notes-api.rk0.xyz) will generate a unique user code and a QR code to go along with it. When the user signs in in the future, they can either present their QR code or enter the text code on the sign up page. This is not necessarily super secure but it's kinda fun

Details

Your job is to create a registration page with a single button. When the user clicks the button, your page should make a POST request to https://spy-notes-api.rk0.xyz/users (no parameters or request body). If this request succeeds, the server will send back a new user ID. Your page should display this code as text. Additionally, the code can be used to generate a URL that you can use in an <img> tag to create a QR code. If the user ID is abc-123 for example, you would create an image like <img src="https://spy-notes-api.rk0.xyz/users/abc-123/qr"> somewhere on the page.

Part 2: Sign In

Your secure note-taking app should have a sign-in page. This is the page where the user can either enter their unique user ID from before or present their QR Code (via webcam). To enter their user ID, they should just be able to copy-paste it into a textbox. Presenting the QR Code will be a bit more interesting (but not too hard!). To read a QR code, you should use a JavaScript library. Don't try to do it by hand. In my sample lab, I used https://github.com/cozmo/jsQR. There may be an easier QR code reader library out there but I haven't experimented too much. The QR code library should help you extract a a User ID string from the QR Code. This is the same code that the user would be entering manually if they opted for that approach (if the text version is abc-123, the QR Code library should also extract the ID abc-123 from the QR Code).

You can use this code to redirect the user to the final page of your app, where the user will actually enter their notes. Once you have the user code, you should use it to redirect the user to a URL like /notes.html?userId=abc-123.

Part 3: Taking Notes

The final part of your app should be a place for the user to take notes. When the user loads the page, you should make a GET request to https://spy-notes-api.rk0.xyz/users/abc-123/notes. This will load any notes the user had previously saved on the server. If the user had saved notes, you should display these notes in a list. Notes should have a title and content property but will also have a noteId field with a unique ID.

There should also be a text input for the user to take more notes. If the user saves a note, you should make a POST request to https://spy-notes-api.rk0.xyz/users/abc-123/notes. The body of your POST request should be a JSON string that contains a title property and a content property. Making this request saves the user's note so that next time you run the GET request above, you will see their new note.

Finally, users should have an option to delete their notes (you can decide how that looks). If the user decides to delete a note, you will need to make a DELETE request to https://spy-notes-api.rk0.xyz/notes/def-456 (where def-456 is the note's unique ID).

Other Requirements

  • Your site should be responsive
  • You should have clean HTML and CSS code with no syntax errors

Hints

  • Don't try to do this all at the last minute
  • The QR code reader portion may seem daunting but it actually ends up being ~10 lines of code with the help of a library. You don't necessarily need to understand everything in the example to make it work.
  • You'll need to use Live Server (or some other server) for this assignment. Loading files directly in the browser will not let you make some of the server calls you need for this assignment. Please let me know if you have issues making this work.

Sample Site: https://spy-notes.rk0.xyz