How rohan-shirke/sticky-notes works
Sticky Notes is a React canvas application for authenticated users to create, arrange, format, and persist private notes. The principal workflow is: a user signs in, enters the notes workspace, creates or edits a note, drags it or changes its content, and the client persists those changes in Appwrite. Authentication, workspace state, note interaction, and persistence are distinct stages. The README also documents live synchronization, though the sampled source shows persistence rather than an explicit realtime subscription.
Components 17
Application Shell
- App Router
src/App.jsx
Authentication
- Login Page
src/pages/LoginPage.jsx - Auth Context
src/context/AuthContext.jsx
Notes Workspace
- Notes Context
src/context/NotesContext.jsx - Notes Page
src/pages/NotesPage.jsx - Note Controls
src/components/Controls.jsx - Add Button
src/components/AddButton.jsx - Note Card
src/components/NoteCard.jsx - Delete Button
src/components/DeleteButton.jsx - Color Presets
src/components/Color.jsx - Note Utilities
src/utils.js - Color Definitions
src/assets/colors.json
Appwrite Services
- Appwrite Auth
- Database API
src/appwrite/databases.js - Appwrite Config
src/appwrite/config.js - Notes Database
Other components
- User
Connections 23
- User → Login Page: submits credentials
- Login Page → Auth Context: calls auth
- Auth Context → Appwrite Auth: creates sessions
- Appwrite Auth → Auth Context: returns user
- Auth Context → App Router: provides user
- Auth Context → Notes Context: provides identity
- Notes Context → Database API: lists user notes
- Database API → Notes Database: reads documents
- Notes Database → Database API: returns documents
- Database API → Notes Context: returns notes
- Notes Context → Notes Page: provides notes
- Notes Page → Note Card: renders notes
- Notes Page → Note Controls: renders controls
- Add Button → Auth Context: reads user
- Add Button → Color Definitions: reads presets
- Add Button → Database API: creates note
- Add Button → Notes Context: adds note
- Note Card → Note Utilities: calculates position
- Note Card → Database API: updates note
- Note Card → Notes Context: selects note
- Delete Button → Database API: deletes note
- Database API → Appwrite Config: uses client config
- Database API → Notes Database: writes documents