Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fernando9200/notes
The app allows users to create, update, delete, and manage sticky notes with customizable colors and positions on a web page.
https://github.com/fernando9200/notes
appwrite css javascript reactjs
Last synced: 5 days ago
JSON representation
The app allows users to create, update, delete, and manage sticky notes with customizable colors and positions on a web page.
- Host: GitHub
- URL: https://github.com/fernando9200/notes
- Owner: Fernando9200
- Created: 2024-07-24T04:03:28.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-28T13:23:15.000Z (8 days ago)
- Last Synced: 2024-10-28T16:57:29.972Z (8 days ago)
- Topics: appwrite, css, javascript, reactjs
- Language: JavaScript
- Homepage: https://notes-webapp-react.vercel.app/
- Size: 79.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notes
This project was built with React and Appwrite. The app allows users to create, update, delete, and manage sticky notes with customizable colors and positions on a web page.
## Features
- Create new sticky notes with default colors and position.
- Drag and drop notes to reposition them.
- Change the color of the notes.
- Automatically save notes' content, position, and colors to the database.
- Delete notes.
## Technologies Used
- **React**: JavaScript library for building user interfaces.
- **Appwrite**: Backend-as-a-Service (BaaS) platform for managing databases, authentication, and more.
- **JavaScript**: Programming language used for app logic.
- **CSS**: Styling the user interface.
## Installation
To run this project locally, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/Fernando9200/notes.git
cd notes
```
2. **Install dependencies:**
```bash
npm install
```
3. **Set up environment variables:**
Create a `.env` file in the root of your project and add the following environment variables. Replace the placeholders with your actual Appwrite endpoint, project ID, and collection IDs:
```bash
VITE_ENDPOINT=https://appwrite.io/v1
VITE_PROJECT_ID=your_project_id
VITE_DATABASE_ID=your_database_id
VITE_COLLECTION_NOTES_ID=your_notes_collection_id
```
4. **Start the development server:**
```bash
npm run dev
```
The app should now be running on `http://localhost:5173`
## Usage
- **Creating Notes:** Click the "+" button to create a new sticky note. A note will be created with a default position and color.
- **Editing Notes:** Click on a note to edit its content. The content is automatically saved after you stop typing.
- **Moving Notes:** Click and drag a note by its header to reposition it.
- **Changing Color:** Click on one of the color options to change the color of the selected note.
- **Deleting Notes:** Click the trash icon on the note's header to delete it.