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

#webdev #programming #productivity #learning

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:

Tech	Purpose
React + Vite	Frontend framework & fast dev server
TypeScript	Type safety and better DX
shadcn/ui + Tailwind CSS	UI and styling
Supabase	Auth, storage, and database backend
TipTap	Rich text editor
Highlight.js	Code block syntax highlighting
Tanstack Query	Data fetching and caching
Sonner	Toast notifications

🔐 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🤷‍♂️