Rattib رتّب

$ brief

The brief

Help college students in Oman who find out about deadlines the night before, from group chats in mixed Arabic and English.

$ built

What I built

• A bilingual parser that turns a pasted group chat into deadline cards, and highlights the words behind each date, time and weight
• A knot of deadline threads that untangles into a Sunday-to-Thursday week
• A week plan around classes and prayer times, at most 6 hours a day, with "Why here?" on every block
• A panic check that finds the deadline really at risk, and a polite extension email in English or Arabic
• Full Arabic (right to left) and English, on laptop and phone; nothing leaves the browser

$ problems

Three hard problems

1. Problem Deadlines arrive as messy WhatsApp lines: timestamps, names, stickers, Arabic-Indic digits, English and Arabic in one message.

   How I solved it Strip the chat prefixes first, map Arabic-Indic digits one to one so highlights still line up, then read weight, hours, date, time, type and course in a fixed order. Every match is highlighted, and a line with no date asks for one instead of guessing.

2. Problem A plan has to fit real life: classes, prayer times, sleep and a sensible day.

   How I solved it The week is cut into 15-minute slots. Classes, prayer times (±15 minutes), sleep and the past are blocked, each day is capped at 6 hours with a break after 2, and the earliest deadline goes first, finishing 4 hours early.

3. Problem Arabic broke in display type: letters stopped joining, and the gradient headline cut off the shadda and hamza.

   How I solved it Letter-spacing is 0 in Arabic so the letters join, and the Arabic headline gets extra top padding, offset by a negative margin, so the marks show without moving the layout.

$ learned

What I learned

• Reading code and understanding what each part does.
• Solving problems: tracking down a lot of small glitches and fixing them.
• Building a modern website with HTML, CSS and JavaScript, and learning to tell what makes a site feel modern.
• UI and UX: how an interface should look, flow and feel for the person using it.
• Using AI as an assistant for part of the work, not all of it.

What makes Rattib different: no AI reads your chats. Its own rules read them in your browser, highlight the words behind every date, and nothing you paste ever leaves your device.

$ stack

The stack

• HTML, CSS and JavaScript in one file
• Canvas (verlet physics)
• Web Audio
• localStorage
• Google Fonts (Figtree, Fraunces, IBM Plex Sans Arabic, Amiri)