Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dhrypt/shiny-pancake
Fullstack Drag & Drop Notes App
https://github.com/dhrypt/shiny-pancake
appwrite backend css drag-and-drop frontend fullstack javascript note-taking note-taking-app notes-app react real-time vite webapp
Last synced: 5 days ago
JSON representation
Fullstack Drag & Drop Notes App
- Host: GitHub
- URL: https://github.com/dhrypt/shiny-pancake
- Owner: dhrypt
- License: gpl-3.0
- Created: 2024-08-10T14:05:13.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-23T16:49:45.000Z (2 months ago)
- Last Synced: 2024-10-09T19:21:24.559Z (27 days ago)
- Topics: appwrite, backend, css, drag-and-drop, frontend, fullstack, javascript, note-taking, note-taking-app, notes-app, react, real-time, vite, webapp
- Language: JavaScript
- Homepage:
- Size: 81.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# shiny-pancake
Shiny Pancake is a fully functional, interactive notes application built with **React** for the frontend and **Appwrite.io** as the backend-as-a-service platform. This application allows users to create, edit, drag, drop, and customize notes with different colors. It features real-time updates and automatic note saving, providing a smooth and seamless user experience.
## Demo
## Features
- **Create & Edit Notes:** Add new notes with just a click, and edit existing ones effortlessly.
- **Drag & Drop:** Reposition notes on the board by simply dragging and dropping them.
- **Customization:** Choose from a variety of colors to customize your notes.
- **Real-Time Updates:** Changes are instantly saved and synced across sessions.
- **Backend Powered by Appwrite.io:** Utilizing Appwrite.io's database and real-time features.
## Getting Started
To get started with the project, follow these steps:
### Prerequisites
- **Node.js** (v14 or later)
- **npm** or **yarn**
- **Appwrite.io Account** (If you don't have one, sign up at [Appwrite.io](https://appwrite.io))
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/dhrypt/shiny-pancake.git
cd shiny-pancake
```
2. **Install dependencies:**
```bash
npm install
```
3. **Configure environment variables:**
- Rename the `.env.example` file to `.env`.
- Fill in the following values in your `.env` file:
```env
VITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_PROJECT_ID=your_project_id
VITE_DATABASE_ID=your_database_id
VITE_COLLECTION_NOTES_ID=your_collection_notes_id
```
4. **Start the development server:**
```bash
npm run dev
```
The app should now be running on `http://localhost:5173`.