A modern, interactive note-taking application designed for students, developers, writers, and professionals to capture ideas, organize knowledge, and create beautifully structured notes.
Live Demo: syntaxnote.appwrite.network
- 3D Page-Flip Animation: Dynamic, physics-based page curl and flip animations on load and interaction
- Beautiful Welcome Experience: Engaging book-style interface with paper texture and decorative elements
- Responsive Design: Seamlessly adapts to desktop, tablet, and mobile devices
- Doodle Canvas: Sketch and draw directly on your notes with interactive canvas tools
- Draggable Post-its: Create, drag, and arrange colorful sticky notes anywhere on your workspace
- Text Editor Support: Full text editor for formatting and structuring your content
- Rich Text Editing: Powered by TipTap editor with extensive formatting capabilities
- Supabase Integration: Secure authentication and real-time database synchronization
- User Workspace: Personalized workspace with local storage persistence
- Cloud Sync: Automatic synchronization of notes across devices
- Built with modern TypeScript for type safety
- Next.js 16 App Router for optimal performance
- Tailwind CSS with custom animations for beautiful styling
- Accessible component library (shadcn/ui, Radix UI, React Aria)
- Node.js 18+ and npm/pnpm/yarn
- Git
-
Clone the repository
git clone https://github.com/imrajmishra/SyntaxNote.git cd SyntaxNote -
Install dependencies
npm install # or pnpm install # or yarn install
-
Set up environment variables Create a
.env.localfile in the root directory:NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Run the development server
npm run dev # or pnpm dev # or yarn dev
-
Open your browser Navigate to http://localhost:3000 and start taking notes!
SyntaxNote/
├── app/ # Next.js App Router
│ ├── page.tsx # Welcome/Entry page with 3D flip animation
│ ├── layout.tsx # Root layout and metadata
│ └── globals.css # Global styles and animations
├── components/ # Reusable React components
│ ├── WelcomePage/ # Interactive welcome experience
│ ├── Loader/ # Loading states (PencilLoader)
│ └── ui/ # shadcn/ui components
├── lib/ # Utility functions and helpers
├── utils/ # Common utilities
├── public/ # Static assets
├── proxy.ts # API proxy configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies
- Framework: Next.js 16.2.9
- Language: TypeScript 5
- Styling: Tailwind CSS 4 + Custom Animations
- UI Components:
- shadcn/ui - Modern component library
- Radix UI - Primitive accessibility components
- React Aria - Accessibility hooks
- Lucide React - Beautiful icons
- TipTap - Headless Vue-less rich text editor (v3.26.1)
- ProseMirror - Collaborative editing foundation
- Supabase - PostgreSQL, Auth, and Real-time APIs
- Authentication (SSR support with
@supabase/ssr) - Real-time database synchronization
- User management
- Authentication (SSR support with
- Motion - Animation library
- Axios - HTTP client
- Zod - TypeScript-first schema validation
- Class Variance Authority - Type-safe component variants
- clsx - Utility for conditional classNames
npm run build
npm startThe project is optimized for Vercel:
- Push your code to GitHub
- Connect your repository to Vercel
- Set environment variables in Vercel dashboard
- Deploy with a single click
Learn more in the Next.js deployment documentation.
- Docker
- Self-hosted Node.js servers
- AWS, Google Cloud, Azure
- Visit the welcome page with the interactive book interface
- Click the flip button to enter your personal workspace
- Start typing in the Markdown editor
- Use drag-and-drop sticky notes for quick reminders
- Draw on the canvas for visual notes and sketches
- Format Text: Use Markdown syntax or toolbar for bold, italic, lists, code blocks
- Organize: Drag sticky notes to organize your workspace
- Auto-Save: Changes are automatically saved to your workspace
- End-to-End Ready: Supabase provides secure authentication
- User Data: All notes are stored securely in Supabase PostgreSQL
- Local Storage: Browser local storage for instant access
- No Tracking: Privacy-focused, no analytics or third-party trackers
Contributions are welcome! Here's how to get started:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'Add your feature' - Push to the branch:
git push origin feature/your-feature - Open a Pull Request
- TypeScript for type safety
- ESLint configuration in
eslint.config.mjs - Tailwind CSS for styling
- Component-based architecture
npm run dev # Start development server
npm run build # Build for production
npm start # Start production server
npm run lint # Run ESLint- ✅ Interactive welcome experience
- ✅ Basic note editing with Markdown
- ✅ Sticky note management
- ✅ User authentication
- 🚧 Export to HTML
- Real-time collaborative editing
- Advanced note organization (folders, tags, search)
- Dark mode toggle
- Mobile app (React Native)
- AI-powered note suggestions
- Voice notes with transcription
This project is open source and available under the MIT License.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: [(raj212558@gmail.com)]
- Next.js - The React framework
- Supabase - Open-source Firebase alternative
- TipTap - Powerful rich text editor
- shadcn/ui - High-quality UI components
- Tailwind CSS - Utility-first CSS framework
- All our amazing contributors and users!
Made with ❤️ by imrajmishra
⭐ If you find this project helpful, please consider giving it a star!