Rawabi Notes

A modern and elegant note-taking platform that helps users create, organize, and manage notes through a clean, responsive, and intuitive workspace.

Live Demo

🔗 https://rawabi-notes.netlify.app/

📸 Project Preview

Dashboard	All Notes

AI Assistant	Categories

Profile	Settings

Key Features

• Create, edit, and manage notes
• Organize notes with categories
• Search and filter notes instantly
• Pin and favorite important notes
• AI-powered writing assistant
• Productivity dashboard with insights
• Secure user authentication
• Fully responsive interface
• Backend-ready architecture for future Spring Boot integration

---

🛠 Tech Stack

• HTML5
• CSS3
• JavaScript
• Tailwind CSS
• LocalStorage

---

Project Overview

Rawabi Notes is designed as a modern productivity workspace that enables users to create, organize, and manage notes through an intuitive interface. The current version focuses on a fully interactive frontend powered by localStorage while maintaining a backend-ready architecture for future integration with Spring Boot and MySQL.

---

Quick start

No build step, no dependencies. Serve the folder with any static server:

# from the project root
python3 -m http.server 5500
# then open http://localhost:5500/index.html

Opening the files directly via file:// also works, but a local server is recommended so relative asset paths resolve consistently.

Demo login

A demo account and a populated sample workspace are seeded on first run:

Email:    demo@rawabi.app
Password: demo1234

Or use Create an Account to register a fresh user — everything is stored locally in your browser.

---

Screens

File	Screen
index.html	Splash → routes to dashboard / login
login.html	Sign in
register.html	Create account (two-column branding)
dashboard.html	Dashboard: stats, quick actions, recent notes
all-notes.html	Notes grid: filter, sort, pin / favorite / delete
create-note.html	Editor: create & edit (?id= to edit)
categories.html	Category cards + create / delete
ai-assistant.html	AI actions (summarize / title / tags) + output
search-results.html	Search with match highlighting (?q=)
settings.html	Appearance / language / notifications / AI
profile.html	Editable profile, export data, stats
empty-state.html	Empty notes state
404.html	Not-found page (mouse parallax)

---

Project structure

rawabi-notes/
├── index.html · login.html · register.html · dashboard.html · …   # screens
├── css/
│   └── styles.css            # app shell, component classes, toasts, drawer
├── js/
│   ├── tailwind.config.js    # design tokens (colors, type, spacing) from DESIGN.md
│   ├── api.js                # RawabiAuth + RawabiApi — mock store, REST-ready
│   └── shell.js              # injects the shared sidebar + top bar into every page
├── DESIGN.md                 # the source design system / brand guide
├── LICENSE
└── README.md

Shared foundation

• js/tailwind.config.js — a 1:1 translation of DESIGN.md: the full color system, the Geist/Inter type scale (each token carries its own weight, line-height and tracking), the 8pt spacing scale, radii and container widths.
• css/styles.css — the custom layer on top of the tokens: the app shell layout, card-shadow / note-card-hover / modal-* / input-focus-ring, toasts, the mobile drawer, and a defensive Material Symbols base rule so icons always render as glyphs.
• js/api.js — a unified RawabiAuth + RawabiApi data layer. Runs on a localStorage mock (USE_BACKEND = false) so every screen is interactive with no server. Its method surface matches the planned REST endpoints exactly.
• js/shell.js — injects the canonical sidebar + top bar into every app page (driven by each page's data-active / data-title) and provides RawabiShell.toast().

---

Tech stack

• Markup / styling: HTML5, Tailwind CSS (Play CDN, forms + container-queries)
• Logic: vanilla JavaScript (no framework, no bundler)
• Type: Geist (chrome) + Inter (content) via Google Fonts
• Icons: Material Symbols Outlined
• Persistence (Phase 1): browser localStorage
• Planned backend (later phase): Java Spring Boot · MySQL · REST (Controller / Service / Repository / Entity / DTO)

---

Going to a real backend

The client is written so backend integration is a switch, not a rewrite:

// js/api.js
const USE_BACKEND = false;   // → true to call the Spring Boot REST API
const API_BASE   = '/api';

The mock and the REST shim expose an identical surface (RawabiApi.auth / notes / categories), so no screen changes when the flag flips.

---

Deploy to GitHub Pages

1. Push this folder to a GitHub repository.
2. Settings → Pages → Build and deployment → Source: Deploy from a branch.
3. Select your default branch and the / (root) folder, then Save.
4. Your site publishes at https://<user>.github.io/<repo>/.

Because it's fully static, it also drops straight onto Netlify, Vercel, Cloudflare Pages or any static host.

---

License

Released under the MIT License.