jackli01030/shiyi-grade-one-yuwen

★ 22TypeScriptAudience · generalComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Grade 1 Chinese))
    Learning areas
      Pinyin phonics
      Character recognition
      Reading practice
      Handwriting
    Privacy design
      No server uploads
      Local storage only
      No ads or tracking
      JSON export import
    Content approach
      PEP 2024 curriculum
      Both semesters
      Parent imports text
      10 to 15 min sessions
    Tech stack
      Next.js and React
      TypeScript
      Tailwind CSS
      GitHub Pages deploy

mindmap root((Grade 1 Chinese)) Learning areas Pinyin phonics Character recognition Reading practice Handwriting Privacy design No server uploads Local storage only No ads or tracking JSON export import Content approach PEP 2024 curriculum Both semesters Parent imports text 10 to 15 min sessions Tech stack Next.js and React TypeScript Tailwind CSS GitHub Pages deploy

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Help a first-grade child in China practice pinyin and character recognition in 10, 15 minute sessions at home without any cloud account

USE CASE 2

Run the site on a laptop and let a child access it from an iPad over home Wi-Fi using the local network mode

USE CASE 3

Import lesson texts from the Grade 1 textbook locally so the app gives personalized practice without uploading any content

USE CASE 4

Fork as a reference architecture for building a privacy-first children's learning tool with Next.js, TypeScript, and GitHub Pages

Tech stack

TypeScriptNext.jsReactTailwind CSS

Getting it running

Difficulty · easy Time to first run · 5min

Open source under the MIT license, use, modify, and distribute freely for any purpose including commercial projects, keeping the copyright notice.

In plain English

This is a Chinese language learning website built for first-grade elementary school students in mainland China. It is designed to follow the 2024 edition of the People's Education Press curriculum for Grade 1 Chinese, offering an interactive study tool that parents and children can use together at home, without requiring a cloud account or an internet-connected backend. The site covers six main learning areas: phonics (pinyin), character recognition, reading, handwriting practice, oral communication, and a parent center. Each study session is designed to take 10 to 15 minutes. The curriculum structure is drawn from both semesters of the Grade 1 textbook, including lesson directories, learning objectives, and character lists. Full lesson texts are intentionally not included in the repository to respect copyright. Instead, parents can import lesson texts locally through the browser, where they are stored only on the user's device and never uploaded anywhere. Privacy is a central concern. The project does not upload children's names, audio recordings, or study records to any server. There is no advertising, no payment system, and no third-party tracking. Progress is saved either in the browser's local storage or, when running in local network mode, in a file on the parent's computer. A parent can also export and import their data as JSON, or reset everything locally. The technical stack is Next.js with React and TypeScript, styled with Tailwind CSS. Parents can run the site on a laptop and access it from an iPad over the home Wi-Fi network using a local server mode. Automated tests, type checking, and static builds run via GitHub Actions and deploy to GitHub Pages. The project is open source under an MIT license, and the author notes it as a reference for developers building children's learning tools with this stack.

Copy-paste prompts

Prompt 1

I'm building a privacy-first learning app for children in Next.js. Show me how shiyi-grade-one-yuwen stores progress in localStorage and exports it as JSON, walk me through the key React hooks and data model

Prompt 2

Help me add a new practice module to shiyi-grade-one-yuwen for stroke-order animation using a free open-source Chinese character stroke dataset

Prompt 3

Explain how the local network mode works in this Next.js app, how does it serve from a laptop to an iPad on the same Wi-Fi?

Prompt 4

I want to adapt this Grade 1 Chinese app for a different curriculum, walk me through how the lesson directory and character list data is structured so I can swap in new content

Prompt 5

Show me how to set up a GitHub Actions workflow that runs TypeScript type checks and deploys a Next.js static site to GitHub Pages, using this project as an example

Open on GitHub → Explain another repo

← jackli01030 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.