https://github.com/vk-sigma17/react-firebase-slide-app
App's Deployment Link
https://github.com/vk-sigma17/react-firebase-slide-app
css3 es6 firebase firestore html5 javascript react-hooks reactjs useeffect-hook usestate
Last synced: 4 months ago
JSON representation
App's Deployment Link
- Host: GitHub
- URL: https://github.com/vk-sigma17/react-firebase-slide-app
- Owner: vk-sigma17
- Created: 2024-08-28T12:13:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-04T10:02:14.000Z (almost 2 years ago)
- Last Synced: 2025-01-31T21:34:22.814Z (over 1 year ago)
- Topics: css3, es6, firebase, firestore, html5, javascript, react-hooks, reactjs, useeffect-hook, usestate
- Language: JavaScript
- Homepage: https://slide-creater-app.netlify.app/
- Size: 43 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
