https://github.com/fazle-rabbi-dev/rainbownote

📝 A vibrant MERN note app with GitHub login, trash management, and public note sharing. Personalize notes with covers, icons, and enjoy the sleek TinyMCE editor. Powered by Vite React, Appwrite, React-Hook-Form, React-Query, and Tailwind CSS.
https://github.com/fazle-rabbi-dev/rainbownote

note-taking-app notes-app notion react react-app react-notes-app vite vite-react

Last synced: 17 days ago
JSON representation

📝 A vibrant MERN note app with GitHub login, trash management, and public note sharing. Personalize notes with covers, icons, and enjoy the sleek TinyMCE editor. Powered by Vite React, Appwrite, React-Hook-Form, React-Query, and Tailwind CSS.

• Host: GitHub
• URL: https://github.com/fazle-rabbi-dev/rainbownote
• Owner: fazle-rabbi-dev
• Created: 2023-12-24T15:38:42.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-12T13:17:48.000Z (9 months ago)
• Last Synced: 2024-04-12T20:43:49.288Z (9 months ago)
• Topics: note-taking-app, notes-app, notion, react, react-app, react-notes-app, vite, vite-react
• Language: JavaScript
• Homepage: https://rainbownote.vercel.app
• Size: 1.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Rainbownote



A vibrant MERN note app with GitHub login, trash management, and public note sharing. Personalize notes with covers, icons, and enjoy the sleek TinyMCE editor. Powered by Vite React, Appwrite, React-Hook-Form, React-Query, and Tailwind CSS.

## 🔴 Unveiling the Journey of Building Rainbownote

> [!Note]

> I created this note app to practice Appwrite and enhance my React-Query skills. Building this app supercharged my React-Query and Appwrite proficiency. I implemented various features, drawing inspiration from other note-taking apps. I thoroughly enjoyed this project-building journey.

### Project Created at

- 🗓 *Dec 2023*

### Technologies Used ⚒️

- Vite + React

- TailwindCSS

- React-Query

- React-Hook-Form

- Appwrite (for Authentication & Storage)

### Features

- 🔐 Authentication with appwrite

- 🌐 OAuth Provider (Social login with GitHub)

- ✅ Share note with public by publishing

- 📝 CRUD operation with note

- ❤️ Mark note as favourite

- 🗑️ Move note to trash

- ↩️ Restore from Trash

- 🔥 Rich text editor (TinyMCE)

- 🔍 Search functionality

- ⚙️ Logout functionality

- 🖼️ Icon & cover adding functionality

### Live Demo 🎉

Explore the live version of Rainbownote [here](https://rainbownote.vercel.app).

## Getting Started 🚀

1. Clone the repository: `git clone https://github.com/yourusername/rainbownote.git`

2. Install dependencies: `npm install`

3. Configure Appwrite: Set up your Appwrite backend and update the configuration.

4. Start the app: `npm run dev`

5. Setup **.env**

```.env

VITE_APPWRITE_URL=https://cloud.appwrite.io/v1

VITE_APPWRITE_PROJECT_ID=

VITE_APPWRITE_DATABASE_ID=

VITE_APPWRITE_STORAGE_ID=

VITE_APPWRITE_USER_COLLECTION_ID=

VITE_APPWRITE_NOTE_COLLECTION_ID=

VITE_MCE_EDITOR_API_KEY=

VITE_GITHUB_AUTH_SUCCESS_CALLBACK=http://localhost:5173/sign-in?authstatus=success

VITE_GITHUB_AUTH_FAILURE_CALLBACK=http://localhost:5173/sign-in?authstatus=fail

VITE_APP_DOMAIN=https://rainbownote.vercel.app

```

### Contributions 🤝

Contributions are welcome! Feel free to fork the repository, open issues, and submit pull requests to enhance Rainbownote further.

*Happy note-taking with Rainbownote! 🎈*

### 📬 Connect with me

> Let's connect! Reach out for collaborations, projects, or just a friendly chat.