A freemium productivity and note-taking web application. It offers folder based features where you can write your notes using blocknote editor which gives features like image uploading, text decoration, color pickers, headings and sub-headings, etc. Check out project live here.
Features of the Project
- Folder-based note organization with a rich text block editor.
- Image uploads, headings, subheadings, color pickers, and text formatting.
- Secure authentication using Clerk with social logins & OTP support.
- Real-time data sync using Convex backend & ACID-compliant DB.
- Cloud storage for images and files powered by Edgestore.
- Zustand state management for fast and efficient UI updates.
- Built using Next.js + Tailwind CSS with responsive, mobile-friendly UI.
- Supportd both Light and Dark mode theme toggle.
Project Walkthrough
Notecraft — Features Breakdown
(Freemium productivity & note-taking web app)
Core Features
Rich Note-Taking with Blocknote Editor– Supports image uploads, headings, subheadings, text formatting, color pickers, and more.Folder-Based Note Organization– Organize notes into folders for better management and navigation.Freemium Model– Core features are free, with potential premium add-ons.Multiple Project Images– Showcase screenshots within the app.
Authentication & Security
Clerk Authentication– Secure user authentication via email/password, social logins, and OTP-based verification.User Profiles– Seamless session handling and profile management.
Backend & Database
Convex Backend– Handles queries, mutations, and real-time updates.ACID-Compliant Database– Ensures data integrity, consistency, and fast sync across devices.Real-Time Data Updates– Notes auto-sync across sessions without manual refresh.
File Handling
Edgestore Integration– Secure, scalable cloud storage for note attachments and images.Easy File Uploads– Supports multiple file types with a smooth user experience.
State Management
Zustand Store– Simplifies global state management and avoids heavy prop drilling.Lightweight & Performant– Optimized for speed and scalability.
Performance & UI
Tailwind CSS UI– Clean, responsive, and fully customizable UI.Next.js SSR & Optimization– Server-Side Rendering (SSR) for faster performance and SEO benefits.Dark & Light Mode Support- Toggle theme for light and dark mode.