React Slide-Creater App (using Firebase)
This React application is a note-taking tool with a split view interface. Users can create, edit, and delete notes, with changes automatically synced to Firestore. The app features a sidebar for note navigation and an editor for note content. It uses Firebase for data management and implements debouncing to optimize updates.
Technologies Used
- React: For building the user interface and managing state.
- Firebase Firestore: For real-time data synchronization and storage of notes.
- React-Split: For creating a resizable split-view interface.
- CSS: For styling the components and layout.
React Hooks Used
-
useState: Manages state for notes, the current note ID, and temporary note text. -
useEffect: Handles side effects such as syncing data from Firestore, updating the current note ID when notes change, and implementing debouncing for note updates.
Firebase Functions Used
-
addDoc: Adds new notes to Firestore. -
onSnapshot: Listens for real-time updates to the notes collection. -
setDoc: Updates existing notes in Firestore. -
deleteDoc: Deletes notes from Firestore.
#Project Screenshots