5sosy — خصوصي الذكي

An Arabic-first AI tutor prototype for students. Single-page React app, RTL/LTR aware, no build step.

Live demo: https://hesham88.github.io/5sosy-prototype/#home

Screens (hash routes)

Route	Screen
#onboarding	3-step setup wizard (language, subjects, textbooks)
#home	Dashboard with intent input and today's plan
#subjects	Subjects list
#plan	Today's plan
#books	Textbook library
#book-study	Textbook study mode with chat
#session	Smart lesson + audio summary + Q&A chat
#quiz	Adaptive diagnostic quiz
#oral	Mock oral exam (mic-orb + transcript stream + rubric)
#progress	Heatmap, mastery rings, concept graph, badges
#settings	Language, TTS accent, data controls

Suggested demo path: #onboarding → #home → #session → #quiz → #oral → #progress.

Tech stack

• React 18 + ReactDOM (UMD builds from unpkg)
• Babel Standalone — compiles JSX in the browser
• Tailwind CSS via CDN
• Google Fonts — Cairo, Inter, JetBrains Mono, Tajawal
• Plain localStorage for language, streak, XP, and subject selection

No npm, no bundler, no transpile step. Two files: index.html and app.jsx.

Run locally

Because the app loads app.jsx via a <script type="text/babel" src="…"> fetch, opening index.html directly with file:// will be blocked by the browser. Serve it over HTTP:

# any of these works
python -m http.server 8000
npx serve .
php -S localhost:8000

Then open http://localhost:8000.

Deploy (GitHub Pages)

This repo is configured to be served from main at the repo root. To enable / re-enable:

1. Push to main.
2. Repo → Settings → Pages.
3. Source: Deploy from a branch — Branch: main / (root).
4. Save. Site is published at https://hesham88.github.io/5sosy-prototype/.

Project structure

.
├── index.html   # shell: fonts, Tailwind, React/Babel from CDN, custom CSS
├── app.jsx      # the entire app (sections separated by header banners)
└── README.md

app.jsx is internally organised into sections (you'll see banner comments like /* ━━━ shared.jsx ━━━ */):

• shared — i18n strings, AppContext, layout chrome, atoms
• onboarding, home, subjects, plan, books, book-study
• session, quiz, oral, progress, settings
• app — root router that dispatches on the hash route

Notes

The previous iteration of this repo used a custom bundler (pack.js / unpack.js) that inlined everything (React, Babel, fonts) as base64 into a single index.html and resolved them at runtime via Blob URLs. It carried integrity="sha384-…" attributes on the script tags; on Windows, Git's CRLF normalisation altered the JSX bytes, the SHA384 checks failed, and the browser refused to execute any scripts — producing a white screen. The bundler has been removed in favour of the simpler CDN-based setup above.