Confidential  ·  YallaPOS — Internal & Intern Use Only. Do not distribute.
YallaPOS logo YallaPOSInternship Program
4-Week Action Plan

Omar Awad — Learn Claude & Build the YallaPOS Website

A week-by-week plan to go from zero Claude experience to shipping real improvements to the YallaPOS website — learning the AI tools and working inside our actual codebase at the same time. This is Block 1 of a rolling program; a fresh 4-week block follows.

Intern: Omar Awad
Mentors: Faisal & Rakan
Start: Sun 19 Jul 2026
Block 1: 19 Jul → 13 Aug 2026
Then: a new 4-week block
Cadence: 2–3 days/wk
Tool: Claude Max
Confidential
Overall progress
0 of 0 · 0%

The mission

YallaPOS is the last operating system a restaurant will need — Waiter Terminal, QR Order & Pay, Manager Dashboard, Alfredo AI, Reservations, Loyalty, plus Accounting & Inventory — built in Amman by Jordan River for Programming Development. Our benchmarks are Square, Toast and OpenTable.

Over four weeks you'll learn to use Claude by Anthropic as your building partner and use it to improve and expand our real website. You are not making throwaway mock-ups: you learn Claude by shipping changes to the actual product. Every week pairs a learning goal with a real deliverable. Tick items off as you go; your progress bar fills up.

This is Block 1. At the end of Week 4 we review together and scope the next 4-week block — so treat 13 Aug as a checkpoint, not the finish line. For now we're building the laptop / desktop version of the site.

5 golden rules for Claude

  • Give context. Tell Claude who we are, who reads the site, and what "good" looks like.
  • Be specific. Vague in, vague out. Ask for exactly what you want.
  • Show examples. Paste our real files, screenshots, or links to sites you admire.
  • Iterate. First draft is a starting point — refine with feedback and ask for a small change, not a full rewrite.
  • Verify. Check every fact, link, and layout before you call it done.
◇ Learn Claude ◆ Build the website ★ Founder check-in Tip: click a week header to collapse it.
WEEK1

Foundations — Meet Claude, Meet the YallaPOS Codebase

Sun 19 Jul → Thu 23 Jul 2026
Get set up on Claude, learn to talk to it, connect it to our real website code, and understand what we've already built.
0/6
▾
◇ Learn Claude
  • Set up Claude & explore the interface
    Get the Claude desktop app running on your Mac and get comfortable moving around.
    • Download Claude for Mac from claude.ai/download, install it, and sign in with the YallaPOS Max account. Finish your profile.
    • See how one thread remembers context: in a single chat, ask a question, then send a follow-up like "now make that shorter" or "explain it more simply" without repeating yourself — notice Claude already knows what "that" means. Then open a brand-new chat and see it has no memory of the first. Lesson: keep related work in one thread.
    • Compare two models on the same question: ask something with a bit of nuance (e.g. "give me 5 taglines for a coffee shop and explain your favourite") once on Opus and once on Haiku. Notice Opus is slower but stronger on hard / creative work, Haiku is faster and lighter. Rule of thumb: Opus for hard/creative building, Sonnet for everyday, Haiku for speed.
    Due Sun 19 Jul Download Claude ↗
  • Learn prompting fundamentals + the vague-vs-detailed drill
    Read Anthropic's prompt-engineering overview, then prove to yourself how much specificity matters.
    • Read the prompt-engineering overview and learn the 4 habits: context, specificity, examples, iteration.
    • Do the drill in the box below: pick 5 everyday tasks, write each prompt twice (lazy vs. detailed), run both, and compare.
    • Save your 3 best prompts into a "Prompt library" note you can reuse all internship.
    The 5-prompt drill — how to do it
    Pick 5 small, everyday tasks — nothing to do with work. Write each prompt twice: a lazy one-liner, and a detailed version that adds who it's for, the format you want, the length, and the tone. Run both and put the outputs side by side. You'll feel exactly how much the detail changes the result.
    Vague"Write me an email asking for a day off."
    Detailed"Write a short, polite email to my manager Sara asking for Thursday 24 July off for a personal appointment. Warm but professional, 4 sentences max, offer to hand over my tasks that day, and sign off as Omar."
    Vague"Give me a workout plan."
    Detailed"Build me a 3-day-a-week beginner gym plan for general strength. I have 45 minutes a session and access to dumbbells and a bench. Give it as a simple table: day, exercises, sets × reps. No jargon."
    Vague"Explain how planes fly."
    Detailed"Explain how planes fly to a curious 12-year-old in about 150 words. Use one everyday analogy, no equations, and end with one surprising fact."
    Due Tue 21 Jul Prompt guide ↗
  • Get the codebase onto your machine (Claude Code)
    Point Claude Code at our actual website files so it can read and edit them directly — this is how Faisal works.
    • Unzip the codebase: Faisal gives you YallaPOS Website Codebase (for Omar).zip. Unzip it into one folder you'll use all internship (e.g. ~/Projects/yallapos-website) — this is your working copy and the single folder your Project will point at next.
    • Read OMAR-START-HERE.md first (it's at the top of the folder): a 2-minute guide to running the site, the folder map, and the brand basics.
    • Open it in Claude Code: install Claude Code and open that folder so Claude can read and edit the real files with you.
    • Run the site locally: from inside the folder run python3 .claude/serve.py, then open http://localhost:4321 in your browser — you should see the landing page. (If that command errors, ask Claude Code to help you start a simple local server.)
    • Get your bearings: ask Claude Code "which file is the landing page, where do its styles live, and how does it build its sections from components/?" — index.html is assembled from small component files (you'll spot <div id="…-mount"> placeholders it fills in).
    • Make one tiny, safe change with Claude Code — fix a typo or nudge some spacing — save the file, refresh localhost:4321, and watch it update. That's your first real change to the product.
    • Save locally only: everything stays as files on your machine — no git, nothing pushed online.
    Due Tue 21 Jul Claude Code ↗
  • Wrap a Cowork Project around that folder (one Context = your source of truth)
    Set up a Cowork Project so every chat is on-brand. In this layout you don't upload to a "knowledge panel" — you point the Project at one folder under Context, and keep everything inside that one folder.
    • Create the Project and name it YallaPOS Website.
    • Set the Instructions (the + on the Instructions row): who we are (YallaPOS, built in Amman by Jordan River), our products, who the site is for (restaurant owners in Jordan), our voice (confident, simple), our palette (ink & bone), our font (Inter), and our booking link (cal.com/yallapos/yallpos-demo). Keep it to short bullet points — Claude reads it before every reply.
    • Add ONE folder to Context (the + on the Context row → Add a local folder): choose your yallapos-website folder from the last task. That single folder is everything Claude needs — keep it to one, don't scatter files across several.
    • Put your knowledge inside that same folder: make a subfolder _knowledge/ and drop in the Design System (ask Faisal), a one-paragraph description of each product, and 2–3 competitor notes on Square / Toast / OpenTable (what to learn from, not copy). Because it lives inside the Context folder, Claude reads it automatically — alongside the real code (index.html, css/, components/).
    • Reference, don't re-paste: now you can just say "use the Design System" or "check _knowledge/products.md" and Claude pulls it straight from the folder.
    • Memory can stay off (as in your settings) — Context is what carries your knowledge here.
    • Test it: start a chat in the Project and ask "what's our brand voice and palette?" — it should answer from the Design System in your folder.
    Due Thu 23 Jul Cowork Projects ↗
◆ Build the website
  • Audit our existing website
    Study the codebase you unzipped (its OMAR-START-HERE.md has the folder map). This is what you'll build on — not a rebuild from scratch. Do it in small batches so it's not overwhelming.
    • Good to know: index.html is the fuller homepage we're building toward, and it's assembled from pieces in components/landing/. Ignore the reference/ folder — it's older material, not part of the live site.
    • Batch 1 — the landing page: open index.html at localhost:4321. List every section in order (nav → hero → the product sections → …) and find the main CTA (the "Book a demo" / demo-request section).
    • Batch 2 — core product pages: open a few at a time — Waiter Terminal, QR Order & Pay, Manager Dashboard, Alfredo AI, Reservations. For each, note what works, what feels dated, what's missing.
    • Batch 3 — the rest: work through the remaining pages in small groups (the other products, then supporting pages like contact, careers, blog, help). Don't try to review everything in one sitting.
    • For each page, jot 2–3 quick notes with Claude's help: what's strong, what's weak, what to fix.
    • Pull it together into a one-page audit in your Project with a prioritised "fix / improve" list — this drives Weeks 2–4. Focus on the laptop / desktop view for now.
    Due Tue 21 Jul
  • Improve the hero section — in the real code
    Using the Design System and your audit, make focused improvements to the existing hero in index.html, working in the real files with Claude Code.
    • Ask Claude Code to show you the hero section (<section id="hero">) and its CSS (the css/hero-*.css files) — it's a cinematic scroll hero.
    • Pick 2–3 concrete improvements from your audit (sharper headline, clearer sub-line, stronger "Book a demo" CTA).
    • Ask Claude for a small, surgical change that keeps our existing classes and structure — no full rewrite.
    • Stay on the Design System: ink & bone palette, Inter font.
    • Test it on your laptop at localhost:4321.
    • Save a before/after screenshot for the founder check-in.
    Due Thu 23 Jul
Week 1 done when: the Claude desktop app is set up, the YallaPOS Project holds the Design System and our knowledge, you've practised prompting, connected Claude to the codebase, produced a website audit, and shipped your first small hero improvement in the actual code.
★
Founder check-in — Thu 23 Jul (in person): Walk Faisal & Rakan through the audit and demo your hero change running locally.
WEEK2

Polish — Redesign the Landing Page

Sun 26 Jul → Thu 30 Jul 2026
Turn the audit into a stronger, on-brand landing page — editing the real index.html for the laptop / desktop view.
0/4
▾
◇ Learn Claude
  • Iterative refinement & self-critique
    Learn to steer Claude with small, targeted feedback instead of starting over each time.
    • Change one thing at a time: "tighten the hero spacing", "make the CTA louder".
    • Ask Claude to critique its own work: "what would make this section more convincing to a restaurant owner? give me 3 specific fixes."
    • Always ask for a small change you can see, not a full-file rewrite, so everything stays reviewable.
    • Keep a running "decisions" note in your Project. This is just a simple running list where, each time you make a call (why this headline, why this layout, why this order of sections), you write one line explaining it. It stops you re-deciding things you already settled, and it lets Faisal & Rakan see the reasoning behind your choices at a glance.
    Due Sun 26 Jul
  • Work with images as visual references
    Use screenshots to show Claude what "good" looks like, then translate it into our style.
    • Screenshot our current sections and 2–3 Square / Toast / OpenTable sections.
    • Paste them into Claude and describe exactly what you like ("I like how Toast's pricing is scannable").
    • Ask Claude to adapt that structure to our style (ink & bone, Inter) — borrow layout, never their colours or copy.
    Due Tue 28 Jul
◆ Build the website
  • Rework the landing page, section by section (v1)
    Improve index.html and the homepage sections it mounts from components/landing/ — the hero, the solutions carousel, the business-platform section, the Alfredo preview, and the demo-request ("Book a demo") section — plus a "why YallaPOS" and a trust / social-proof block. Laptop / desktop view.
    • Back up first: save a copy of index.html (e.g. index.backup.html) so you can always roll back — no git needed.
    • Make a checklist of the sections from your audit, in order, and tackle them one at a time.
    • Find the right file first: most homepage sections are built by a file in components/landing/ (e.g. solutions-carousel.js, business-platform.js) and mounted into index.html. Ask Claude which file builds a section before you change it.
    • One focused ask per section: ask Claude Code for a single improvement (better headline, clearer layout, tighter copy) and keep our existing classes and structure.
    • See it, then move on: after each change, save the file and refresh localhost:4321 — fix or undo anything that looks off before starting the next section.
    • Add a "why YallaPOS" section — 3–4 short reasons a restaurant should choose us.
    • Add a trust / social-proof strip — partner logos, a stat, or a short quote — if it's missing.
    • Stay on-brand: Design-System colours (ink & bone) and the Inter font throughout.
    • Checkpoint: when a section looks good, save a dated copy of the file so you have a point to return to.
    Due Tue 28 Jul
  • Iterate on founder feedback & lock landing v1
    Apply the founders' notes and save a clean first version of the redesigned landing page.
    • Collect Faisal & Rakan's notes in one list.
    • Apply them as small changes; re-check on your laptop after each.
    • Save a clean "landing v1" copy of the file and write one line on what changed. (All local — nothing pushed online.)
    Due Thu 30 Jul
Week 2 done when: a stronger, on-brand landing page lives in the real codebase on your machine — with the Book-a-demo CTA working — reviewed by the founders.
★
Founder check-in — Thu 30 Jul: Review landing page v1 running locally and agree changes.
WEEK3

Expand — Deepen & Grow the Site

Sun 2 Aug → Thu 6 Aug 2026
Bring more pages up to standard and add what's missing — reusing our shared nav/footer components so it stays one product.
0/6
▾
◇ Learn Claude
  • Consistency at scale with our shared components
    Learn how the site keeps one voice across many pages so you never drift off-brand.
    • Learn how components/shared/navbar.js and footer.js inject the same nav/footer on every page.
    • Learn how css/font-unify.css keeps the typography consistent across the whole site.
    • Rule: reuse these shared pieces — never paste a one-off nav into a new page.
    • Ask Claude to confirm two pages use the same shared header and footer.
    Due Sun 2 Aug
  • SEO & metadata basics
    The fundamentals that help restaurants find us on Google.
    • With Claude, write a <title> + meta description for each main page.
    • Add descriptive alt text to key images; check the heading order (one h1 per page).
    • Add Open Graph tags so shared links preview nicely.
    Due Tue 4 Aug
  • Go deeper with Claude Code (safe multi-file edits)
    Level up from single edits to changes across several files — done safely and saved locally.
    • Use Claude Code to make a change across several files at once (e.g. update a shared label everywhere).
    • Before a bigger change, save backup copies of the files you're touching so you can roll back — all local, no git.
    • Always ask Claude to explain what it changed before you save.
    Due Thu 6 Aug Claude Code ↗
◆ Build the website
  • Upgrade the product pages
    Pick 2–3 existing product pages (e.g. waiter-terminal.html, qr.html, manager-dashboard.html) and bring them up to the new landing-page standard.
    • Align each page's hero + sections to the Design System (colours, type, spacing).
    • Tighten the copy and make each page's "Book a demo" CTA clear.
    • Confirm the shared nav/footer work on each.
    • Check each page you touch on your laptop.
    Due Tue 4 Aug
  • Add / upgrade Pricing + About pages
    Fill the gaps a restaurant owner looks for.
    • Check what exists (there's no pricing page yet); plan a Pricing or "Request a quote" page.
    • Build or upgrade an About page telling the Jordan River / YallaPOS story.
    • Build both on the shared nav/footer; keep them on-brand.
    Due Thu 6 Aug
  • Consistent nav + footer + no dead links
    Make the whole site feel like one product, not separate files.
    • Confirm every page loads the shared navbar.js + footer.js (no stray one-off headers).
    • Fix any page still using an old or duplicated nav / footer.
    • Check every nav link points to a real page — no dead links.
    Due Thu 6 Aug
Week 3 done when: 2–3 product pages are upgraded, Pricing + About are added or upgraded, all using the shared nav/footer and matching the landing page's look and feel.
★
Founder check-in — Thu 6 Aug: Walk through the upgraded and new pages and confirm structure before final assembly.
WEEK4

Ship — Integrate, QA & Close Out Block 1

Sun 9 Aug → Thu 13 Aug 2026
Pull it together, quality-check with Claude, hand the finished folder to the founders, and set up Block 2.
0/6
▾
◇ Learn Claude
  • Use Claude as a QA partner
    Let Claude do the tedious checking so nothing ships broken.
    • Have Claude scan for broken links, missing alt text, and inconsistent copy across pages.
    • Check colour contrast / accessibility against the Design System.
    • Have Claude re-check the laptop / desktop layout of every page you changed.
    Due Sun 9 Aug
  • Handoff — package your work for the founders
    Learn how to hand off cleanly without touching git or anything online — everything stays local for now.
    • Put all your finished files in one tidy project folder.
    • Write a short handoff note (a plain text or doc file): what's built, what changed, what's next.
    • Zip the folder (or share it however Faisal prefers) and hand it to Faisal for review — nothing pushed online.
    Due Tue 11 Aug Claude Code ↗
◆ Build the website
  • Assemble & cross-link the full site
    Bring landing + all pages into one cohesive site and polish.
    • Make sure landing + every page link to each other correctly through the shared nav/footer.
    • Do a final visual polish pass, section by section.
    • Confirm the "Book a demo" CTA works from every page.
    Due Tue 11 Aug
  • Full QA pass (laptop / desktop)
    Test everything the way a real visitor would, on your laptop.
    • On your laptop: click every CTA and the contact form, and read through each page.
    • Fix broken links and anything that looks off.
    • Have Claude re-check the whole site after your fixes.
    Due Thu 13 Aug
  • Package the site + handoff note
    Get your finished work to the founders — all local.
    • Save all your finished work in one clean project folder on your machine.
    • Write a short handoff note: what's built, what changed, what's next.
    • Hand the folder to the founders for review — nothing pushed online.
    Due Thu 13 Aug
  • Portfolio, retrospective & Block 2 wishlist
    Capture what you learned and set up the next block.
    • Write a one-page reflection: what you learned about Claude and what you shipped.
    • List 5 things you'd tackle in the next block.
    • Bring it to the Block 1 review so we scope Block 2 together. This goes in your internship file.
    Due Thu 13 Aug
Week 4 done when: a cohesive, QA'd YallaPOS site is saved locally and handed to the founders, with a handoff note, your portfolio write-up, and a Block 2 wishlist ready.
★
Block 1 review & demo — Thu 13 Aug (in person): Omar demos the site to Faisal & Rakan, shares the biggest things learned about building with Claude, and we scope Block 2 together.

What happens after Block 1

13 Aug is a checkpoint, not the end. We review Block 1 together, then write a fresh 4-week action plan (Block 2) based on what you shipped, what you learned, and where the website goes next — likely mobile and the Arabic version.

Learning resources — bookmark these

Everything Omar needs to go from zero to confident with Claude — and to work in our real codebase.

Download Claude for Mac ↗Install the desktop app and sign in with the YallaPOS Max account. Claude (claude.ai) ↗The web app — same account, from any browser. Get started with Claude ↗The basics: chats, models, files, and settings. Prompt engineering guide ↗How to write prompts that get great results. Cowork Projects ↗One Context folder = Design System + code + all our knowledge. Claude Code ↗Edit the website files directly on your machine.

How we work together

Confidential. This document is the property of Jordan River for Programming Development Company (YallaPOS) and is provided to Omar Awad solely for the internship described above. It contains internal product, brand, and roadmap information. Do not copy, share, or distribute it outside the company. Handling is governed by the signed Internship NDA.