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.
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.
- 🗓 Dec 2023
- Vite + React
- TailwindCSS
- React-Query
- React-Hook-Form
- Appwrite (for Authentication & Storage)
- 🔐 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
Explore the live version of Rainbownote here.
- Clone the repository:
git clone https://github.com/yourusername/rainbownote.git - Install dependencies:
npm install - Configure Appwrite: Set up your Appwrite backend and update the configuration.
- Start the app:
npm run dev - Setup .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.appContributions are welcome! Feel free to fork the repository, open issues, and submit pull requests to enhance Rainbownote further.
Happy note-taking with Rainbownote! 🎈
Let's connect! Reach out for collaborations, projects, or just a friendly chat.
