Note Taking Upleveled
Note Taking Upleveled
A sophisticated note-taking app I built with a decoupled architecture - Express.js backend API and Next.js frontend. It handles markdown editing, LaTeX math rendering, real-time collaboration, and hierarchical organization. Basically, a Notion alternative with better math support and real-time features.
What It Does
- Rich markdown editor with live preview and LaTeX math rendering
- Real-time collaborative editing with multiple users
- Hierarchical organization with nested groups and folders
- Secure authentication and granular note sharing
- Export to Markdown and PDF formats
- Version history and edit tracking
- Responsive design across all devices
How It Works
The app uses a decoupled setup - Express backend handles the API and Supabase manages the database, real-time subscriptions, and auth. The frontend processes markdown through a unified pipeline and renders math with KaTeX.
Backend Structure
// Express server with auth middleware
app.use('/api/auth', authRouter);
app.use('/api/notes', notesRouter);
app.use('/api/groups', groupsRouter);
// JWT auth middleware
const isAuthenticated = async (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1];
const { data: { user } } = await supabase.auth.getUser(token);
req.user = user;
req.supabase = createClient(SUPABASE_URL, token);
next();
};
Real-time Collaboration
// Broadcasting note updates to collaborators
const channel = supabase.channel(`note-edit:${id}`);
channel.send({
type: 'broadcast',
event: 'note:update',
payload: { ...data, editor_id: user_id },
});
Markdown Processing
// Unified pipeline with math support
const renderedHtml = unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkMath)
.use(remarkRehype)
.use(rehypeKatex)
.use(rehypeStringify)
.processSync(content);
Technical Stack
- Backend: Node.js + Express.js
- Frontend: Next.js + React
- Database: PostgreSQL with Supabase
- Real-time: WebSocket subscriptions
- Auth: JWT tokens + Supabase Auth
- Markdown: Unified/remark + KaTeX
- Security: Row-Level Security (RLS)
- Deployment: Vercel for both services
Key Features
- Markdown Editor: Full markdown support with live preview
- Math Rendering: LaTeX expressions using KaTeX
- Real-time Sync: Multiple users editing simultaneously
- Hierarchical Org: Nested groups and folders
- Secure Sharing: Granular permissions system
- Version History: Track all changes with attribution
- Auto-save: Smart saving with debouncing
- Export Options: Markdown and PDF output
- Responsive UI: Works on all device sizes
Why I Built It
Wanted to create a modern note-taking solution that shows off full-stack skills while actually being useful. It demonstrates scalable architecture, real-time features, and proper security practices. Plus, it's a tool I actually use for my own note-taking needs.
Future Plans
- Add Tiptap-based rich text editor (Notion-style)
- End-to-end encryption for sensitive notes
- AI-powered note organization
- Mobile apps with React Native
- Advanced search and indexing
- Note templates system
- Plugin architecture