NOTED.

🧠 Inspiration In a world overflowing with information, quick and private note-sharing remains fragmented. We wanted a lightweight, no-fuss tool where users can jot down thoughts and control exactly who sees them — without depending on cloud accounts or complex setups. NOTED. was born from the idea that note-sharing should be instant, private, and beautiful.

📝 What it does NOTED. is a minimalist web-based note-sharing application that allows users to:

Sign up & Login securely with email and password

Create notes with a title, content, and visibility level (Only Me, Friends, Public)

View a curated dashboard of notes filtered by privacy rules

Open any note to see full details including author and privacy status

Delete notes if they're the owner

Everything runs in the browser with zero backend — fast, private, and offline-capable.

🛠 How we built it Layer Technology Frontend Vanilla HTML5, CSS3, JavaScript (ES6) Icons Font Awesome 6 (CDN) Data Storage Browser localStorage — simulates a users collection and a notes collection Architecture Single Page Application (SPA) with screen-based navigation Design Deep blue (#0b2b5e) + clean white, glassmorphism-inspired cards, rounded UI We used a component-like rendering pattern where each screen (Login, Dashboard, Add Note, Note Detail) dynamically re-renders based on state changes — all in a single HTML file.

⚠️ Challenges we ran into State management in vanilla JS – Without a framework, syncing UI across screens required careful manual DOM updates.

Visibility logic – Implementing three-tier privacy (Only Me, Friends, Public) with client-side filtering needed precise rules to avoid leaking private notes.

Responsive single-file structure – Keeping CSS modular and readable while fitting everything in one file was tricky.

User session persistence – Managing logged-in state across page refreshes using only localStorage.

🏆 Accomplishments that we're proud of Built a fully functional CRUD app with zero dependencies (except icons)

Clean, modern UI that looks and feels like a native mobile app

Working authentication system with localStorage-based user storage

Smart privacy filter that respects visibility per note in real-time

Everything fits in one HTML file — portable and instantly runnable

📚 What we learned Deepened understanding of localStorage as a NoSQL-like store

Mastered SPA navigation patterns without libraries

Learned to implement role-based visibility logic on the client side

Improved skills in minimalist UI design with a constrained color palette

The power of keeping things simple — no build tools, no config, just code

🚀 What's next for NOTED. Feature Description Backend Integration Move from localStorage to Firebase or Node.js + MongoDB Real Sharing Share notes via link or email Friends System Actual friend requests and connections Rich Text Editor Bold, italic, lists, and images in notes Dark Mode Toggle between light and deep blue themes PWA Support Installable on mobile with offline access Encryption End-to-end encryption for Only Me notes Tags & Search Organize and find notes quickly

Built With

• gemmi
• google