Learn & Play · سیکھو اور کھیلو · سکو ۽ کيڏو

A free, multilingual learning web app for primary school students (Class 1–5) in Sindh, Pakistan. It is one website in three languages: the switch at the top of every page (EN · اردو · سنڌي) changes the whole site between English, Urdu and Sindhi (with proper right-to-left layout). It runs without a server or database and can be installed on phones as an app.

Live site: https://muhammadashhar17-tech.github.io/learn-and-play/

What's inside

Page	What students can do
Home	Animated welcome, feature cards, live stats, testimonials
Quiz	5 subjects × 30 questions, Easy / Medium / Hard, timer, sounds, confetti, results with review, a "Listen" button on every question
Games	28 learning games in Maths, Science, Language and Pakistan & GK. Each one starts with a short "Learn first" lesson, then the game, then stars and a score
Learn	13 lessons (Alphabet, Numbers, Colours, Animals, Family, Greetings, Fruits, Days, My Body, Vegetables, Transport, At School, Sky and Weather) with 3D flip cards, Roman pronunciation, "Listen" buttons and a mini quiz
Chatbot	"Saathi", an offline helper that translates words, solves sums, shares fun facts and answers questions about Pakistan, Sindh, Bhittai and Iqbal (understands English, Urdu and Roman Urdu)
My Progress	Quiz history, best scores, lessons completed, 15 badges, a chart, reset button
Leaderboard	Top scores for everyone online (when set up, see "Online leaderboard" below) and on this device
About / Contact	About the app and school; a contact form that opens the visitor's e-mail app

Made for primary school (Class 1–5)

Each quiz level matches a class band: Easy = Class 1–2 (40 s per question), Medium = Class 3–4 (30 s) and Hard = Class 5 (20 s). The Home page explains this in its "A level for every class" section, and the Contact page has an FAQ. Contact person shown in the app: Sana, [email protected] (data/site.ts and Contact.personName in the message files).

Design

The look follows the UI/UX Pro Max skill's recommendation for children's education apps: "claymorphism" (soft 3D cards and buttons), Nunito + DM Sans for English, and one consistent SVG icon family (Lucide) instead of emoji icons.

Everything a student does is saved in their own browser (localStorage). Nothing is sent anywhere.

Built with: Next.js 16 (App Router, static export) · TypeScript · Tailwind CSS 4 · Framer Motion · next-intl · lucide-react.

---

1. Run it on your computer

You need Node.js 20 or newer (download).

npm install        # first time only
npm run dev        # start the app

Open http://localhost:3000. You will be sent to /en, or to /ur or /sd if you chose that language before.

Other useful commands:

npm run build      # build the final website into the "out" folder
npm run preview    # serve the built "out" folder at http://localhost:3000
npm run lint       # check code quality
npm run check:i18n # check that en/ur/sd translation files match
npm run icons      # regenerate icons + Open Graph image from public/icon.svg

The installable/offline (PWA) part only switches on in the built version (npm run build then npm run preview), not in npm run dev.

---

2. Before you deploy — make it yours

1. School name: set to "Govt Girls School" (schoolName in messages/en.json, messages/ur.json and messages/sd.json). Change it there if needed.
2. Contact: Sana, [email protected] (contactEmail in data/site.ts, personName in the message files).
3. Testimonials: replace the sample quotes in data/testimonials.ts.
4. Translations: ask a native speaker to check the list in TRANSLATIONS_TO_REVIEW.md.
5. (After deploying) set your real web address. See step 3.6 below.

---

3. Publish for free

Option A — GitHub Pages (already set up)

The live site above is hosted on GitHub Pages. After changing anything, publish the new version with one command:

git push            # save your code on GitHub
npm run deploy      # build and publish the website (gh-pages branch)

The site updates within 1–2 minutes. npm run deploy builds the app for the /learn-and-play/ sub-folder and pushes the result to the gh-pages branch, which GitHub serves. (If you rename the repository, the address and sub-folder follow the new name automatically.)

Option B — Vercel (through GitHub)

3.1 Put the code on GitHub

1. Create a free account at https://github.com if you don't have one.

2. Click New repository → name it learn-and-play → keep it Public or Private → Create repository (do not add a README there).

3. In a terminal inside this project folder, run the commands GitHub shows you, which look like this:

   git add .
   git commit -m "Learn & Play"
   git branch -M main
   git remote add origin https://github.com/YOUR-USERNAME/learn-and-play.git
   git push -u origin main
   

3.2 Create a Vercel account

1. Go to https://vercel.com/signup.
2. Choose Continue with GitHub and allow access. The Hobby plan is free.

3.3 Import the project

1. On the Vercel dashboard click Add New… → Project.
2. Find learn-and-play in the list and click Import.
3. Vercel detects Next.js automatically. Leave every setting as it is:
   • Build command: npm run build
   • Output: detected automatically (the app is a static export)
4. Click Deploy and wait about 1–2 minutes.

3.4 Open your site

Vercel shows a link such as https://learn-and-play-abc123.vercel.app. Open it on a phone and on the classroom computer. 🎉

3.5 Updating the site later

Every time you git push changes to GitHub, Vercel rebuilds and publishes the new version automatically.

This is the beginning of the README. Read the rest at the original. Read the full README ↗