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
- School name: set to "Govt Girls School" (
schoolName in messages/en.json,
messages/ur.json and messages/sd.json). Change it there if needed.
- Contact: Sana, [email protected] (
contactEmail in data/site.ts,
personName in the message files).
- Testimonials: replace the sample quotes in
data/testimonials.ts.
- Translations: ask a native speaker to check the list in
TRANSLATIONS_TO_REVIEW.md.
- (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
-
Create a free account at https://github.com if you don't have one.
-
Click New repository → name it learn-and-play → keep it Public or
Private → Create repository (do not add a README there).
-
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
- Go to https://vercel.com/signup.
- Choose Continue with GitHub and allow access. The Hobby plan is free.
3.3 Import the project
- On the Vercel dashboard click Add New… → Project.
- Find
learn-and-play in the list and click Import.
- 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)
- 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 ↗
