Where we dive deeper into React and construct a realtime collaborative post-it note app with React!
We will start with a version of the app that does not have a backend, it’ll use state for notes but if you refresh the page all your hard work will disappear — and it’ll only work in one browser window.
🖼️ FYI, you all allowed to use component libraries now! So if you wanted to use something like https://ui.shadcn.com/ or https://chakra-ui.com/ or https://mantine.dev/ or https://mui.com/, you are welcome to!
Then we will add in Firebase for persistent storage. Firebase is a backend as a service (BAAS). It provides a simple JSON data store (Firebase Realtime Database) that has some nice realtime properties. You can subscribe to change events on collections of objects, this is perfect to use with React!
This will involve a small bit of refactoring, but will demonstrate how you can prototype frontend and then add in server side later.
In this version your notes will persist and will synchronize in real-time so multiple people can collaborate.
🚀 Assuming you did the pre-lab, then you have already started!
If not then remember to use the repo provided for you by classmoji.brunchlabs.com. 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 project directory
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 package dependencies
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 real-time. The notes themselves will support markdown notation and editing.
For Part 1, the app will store state in memory only and won’t use Firebase yet. But here are the overall specs of the full project.