Construct a realtime collaborative post-it note app with React
For this lab 3, I created a collaborative post-it note app. In particular, I used one main app and two components to construct my lab: Index.js, Note.js and InputNoteBar.js. Within each of the components, there are a few functions that handle specific features, e.g. (In Note.js --> handleDrag, handleEditTitle, handleResize, etc.).
In part 2 of the lab, I connected the app to Firebase so that all changes persist to Firebase in realtime, and updates are made based on Firebase events.
Finally, I added some extra credit features such as: Show Organized and Resizable Notes
Click URL here: deployed url
All MVPs completed!
Notes App:
- Add a note:
- a single title input + create button
- Delete a note
- Move a note in x, y
- 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
- I tried to implement Z index sorting, but did not have enough time to complete it!
- Implemented a method of note organization that neatly shows all notes
- Implemented resizable feature for notes
- Fancy CSS animated button
