React Notes

Where we dive deeper into React and construct a realtime collaborative post-it note app with React!

live-notes-1080p.webm

We’ll be building something like the above. A collaborative platform where multiple people can create and edit content together. What that content is, and how it all looks, is all up to you! The basic functionality though is demonstrated above.

Let’s Start

🚀 To start grab the classmoji.brunchlabs.com repository. Then you’ll pull in your vite+babel+eslint+(with the prior short react additions) starter code like so:

#make sure you are in your new github project created for you by classroom
git remote add starter your-starterpack-github-url
git pull starter main --allow-unrelated-histories

# also don't forget to run:
npm install #to fetch all your webpack dependencies

What are we building?!

A post it note style app where users can add notes, move them around, edit them, and delete them. This React app will use Firebase as its backend to store collections of notes. The position of notes will also be stored, so people in multiple browsers can edit and arrange them in realtime. The notes themselves will support markdown notation and editing.

Here are the overall specs of the full project.

Minimal Functional Specs

• Notes App:
  • Add a note:
    • can either be a single title input + create button
    • or a modal if you prefer with all fields
  • Delete a note
  • Move a note in x, y
    • optionally in z (zIndex)
  • Edit a note:
    • title, content
  • Notes:
    • have title and content
    • display with some formatting
  • Persists all changes to Firebase in realtime
  • Updates based on Firebase events
  • is at least as stylish as these mockups

Note: you are welcome to use CSS frameworks to help with styling (but be careful as the JS that comes with some of them does not play nice with react).

Plan

Ok, so what’s the plan?

You tell me!