From Scratch to Sync: How I Built My Own Notepad App- Aurinote

Aurinote is a note-taking app built specifically with developers and modern productivity needs in mind. This post breaks down the tech stack, features, challenges, and development insights behind the project.

👇 Why I Built Aurinote

Honestly, i don't even know. I just wanted to build something like Notepad we usually get with the Windows by default and i end up with that.😭

🛠️ The Stack

Here’s a quick overview of the technologies used:

🔐 Supabase Auth + RLS

User accounts are powered by Supabase Auth with email + password. Each user has a profile including name and avatar, stored in Supabase storage.

(user_id = auth.uid())

This ensures that each user can only read, update, or delete rows where the user_id matches their authenticated ID. It’s a small line, but a huge step for securing user data. Supabase also handles session persistence, so users stay logged in across visits.

Rich Text Editing with TipTap

TipTap gives the editing experience a major boost, allowing:

• Headings, paragraphs, lists
• Code blocks with syntax highlighting
• Keyboard shortcuts for formatting
• Copy-paste support

All note data is stored in HTML format, giving flexibility in rendering.

Avatar Uploads + Compression

Users can upload a custom avatar, which is compressed client-side using a canvas API before uploading to Supabase Storage. This helps reduce storage size and improve loading performance.

Note Management

Notes are stored per-user and can be created, edited, and deleted from a dashboard view. The editor interface is simple and distraction-free, keeping the focus on writing.

Theming & UI

Built using Tailwind CSS and shadcn/ui, the interface is responsive, clean, and consistent across screen sizes. Features include:

• Dark/light/Vibe/Ocean/Sunrise/Forest mode
• Responsive design

App Structure Overview

While the codebase isn’t publicly available, here’s a quick look at how I structured the project internally for maintainability and scalability:

src/
  components/
  context/
  pages/
  services/
  types/
  hooks/

• Context handles global auth and theme state
• Hooks manage data fetching and session control
• Services handle Supabase API interactions
• Components include reusable UI building blocks

This modular structure helped keep the logic clean and organized, especially as features started to grow.

Challenges Faced

Authentication Refresh:
Keeping the app in sync after login/logout or profile updates was trickier than expected. Supabase session changes didn’t always propagate cleanly across components, so I implemented a global context and used a useEffect listener on onAuthStateChange to keep everything reactive.

Image Upload Optimization:
Raw uploads were slow and bulky. To reduce file sizes and improve UX, I compress images client-side using the HTML canvas API before sending them to Supabase Storage.

UI Sync & Cache Invalidation:
Some UI elements weren’t updating instantly after changes especially on note edits or theme toggles. I introduced conditional re-fetching and manual state updates in context to patch these sync delays.

Row-Level Security (RLS) Headaches:
Supabase's RLS is powerful, but even one wrong policy can block data or expose too much. Debugging policy logic while working with multiple users and shared notes was a bit of a minefield. Had to write precise rules and test thoroughly to avoid privilege leakage.

Supabase Rate Limits & Quotas:
When syncing notes across multiple sessions or devices rapidly (e.g., for real-time collab), I ran into some subtle Supabase request throttling. Caching responses locally and debouncing input saves helped reduce strain.

Responsive Design with State-Heavy UI:
Because of animations, theme toggles, and real-time syncing, managing layout shifts without UI jank (especially on mobile) was a major design+tech balancing act. I used Tailwind with media queries and conditional rendering to minimize unnecessary re-renders.

Features Completed

• User registration & login
• Profile management (avatar + name)
• Create/edit/delete notes
• Rich text editing
• Syntax-highlighted code blocks
• Responsive layout
• Light/dark theme toggle
• Keyboard shortcuts

Next Steps

Aurinote is still under development, but upcoming features might include:

• Real-time collaborative editing
• Offline mode
• Exporting notes (PDF, Markdown)
• Tagging and search functionality
• Mobile-friendly PWA

Whatever,,,

Aurinote started as a side project, but it’s grown into something genuinely useful for everyday writing and note taking. If you’re a developer who wants a focused space to think, plan, or write—this might be a good fit🤷‍♂️

CHECK IT OUT

Github

Feel free to share feedback or ideas in the comments!!!