Arcbyte

Your coding journey starts here.

A clean and precise programming learning platform with thoughtful prerequisites, focused lessons, and progress that stays on your device.

Live site

Arcbyte combines the speed of technical documentation with the pacing of a well-designed course. It provides complete HTML, CSS, JavaScript, and React foundations today, plus a visible roadmap for TypeScript and Node.js.

No account, database, streak, dashboard, or tracking service is required. Pick a course and start learning.

What is included

Complete foundations: 14 HTML lessons, 18 CSS lessons, 20 JavaScript lessons, and 16 React lessons, ordered from first principles to production practices.
Prerequisite paths: courses and individual lessons can recommend exactly what a learner should understand first.
Exact resume: the browser remembers the current course, lesson, nearest heading, relative offset, and reading progress.
Bilingual architecture: English and Simplified Chinese routes, localized interface copy, browser-language detection, and a clearly labeled English fallback for lessons awaiting translation.
Fast search: search courses, lessons, headings, and lesson prose with ⌘ K or Ctrl K.
Focused reader: active table of contents, reading indicator, code copy buttons, highlighted lines, callouts, comparisons, image lightbox, and previous/next navigation.
Accessible by default: semantic HTML, keyboard support, visible focus, reduced-motion behavior, responsive layouts, and dark mode.
Full SEO foundation: per-page metadata, canonical and language alternates, Open Graph and X cards, JSON-LD, sitemap, robots rules, web manifest, and a branded app icon.
Backend-free: course content is stored in version-controlled MDX and progress remains in localStorage.

Course roadmap

Phase	Courses
Complete now	HTML, CSS, JavaScript, React
Up next	TypeScript, Node.js
Later	Python, Java, C++, SQL, Docker, Linux

The roadmap is defined in lib/courses.ts, so the homepage, prerequisites, search index, sitemap, static routes, and lesson reader stay synchronized.

Stack

React 19 and TypeScript
Next.js-compatible App Router through the lightweight Vinext runtime
Tailwind CSS 4 plus project-level CSS
A deliberately small MDX-compatible lesson parser
Lucide icons
Cloudflare Worker-compatible output with a Netlify Functions adapter

Quick start

Requirements: Node.js 22.13 or newer and npm.

git clone https://github.com/chuxu200328/arcbyte.git
cd arcbyte
npm install
cp .env.example .env.local
npm run dev

Open the local URL printed by the development server.

Before opening a pull request or deploying, run:

npm run typecheck
npm run lint
npm run build
npm test

Configuration

Arcbyte works without environment variables. These values customize public links and absolute SEO URLs:

NEXT_PUBLIC_SITE_URL=https://learn.example.com
NEXT_PUBLIC_GITHUB_URL=https://github.com/YOUR_USERNAME/arcbyte
NEXT_PUBLIC_SUPPORT_URL=https://buymeacoffee.com/chuxu200320

NEXT_PUBLIC_SITE_URL should be the production origin without a trailing slash. It is used by the sitemap, robots file, canonical data, and structured data. If omitted, Arcbyte uses its public demo URL. The GitHub and support controls are hidden when their variables are empty.

Project map

arcbyte/
├── app/                              # Routes, metadata, sitemap, robots, manifest
│   └── [locale]/[course]/[lesson]/
├── components/                       # Homepage, header, search, lesson reader
├── content/                          # Version-controlled lesson source
│   ├── html/en/
│   ├── css/en/
│   ├── javascript/en/
│   └── react/en/
├── lib/
│   ├── content.ts                    # Discovery, parsing, fallback, search
│   ├── courses.ts                    # Catalog, order, roadmap, prerequisites
│   ├── i18n.ts                       # Interface translations
│   ├── site.ts                       # Public URL and SEO helpers
│   └── types.ts                      # Content contracts
├── public/                           # Icons, social card, lesson media
├── netlify/functions/                # Vinext-to-Netlify server adapter
├── netlify.toml                      # Netlify build, URLs, and routing
├── scripts/generate-icon.mjs         # Reproducible PNG brand icon
├── Dockerfile
└── docker-compose.yml

Add a lesson (class)

Arcbyte calls the full path a course and each readable class a lesson.

1. Create the lesson file

Add English first, using the course slug and locale:

content/javascript/en/dates.mdx

Every lesson needs this frontmatter:

---
title: "Dates and Time"
description: "Create, format, and compare dates without ambiguous input."
lastUpdated: "2026-08-13"
verifiedFor: "ECMAScript 2026"
section: "Working with data"
order: 13
---
# Dates and Time

JavaScript dates represent an instant in time.

## Create an instant

```javascript filename="dates.js" highlight="1"
const publishedAt = new Date("2026-08-13T16:00:00Z");
console.log(publishedAt.toISOString());
```

<Tip>
Use explicit ISO 8601 input and include a timezone.
</Tip>

lastUpdated is the date the lesson was actually reviewed. verifiedFor names the runtime, language edition, standard, or tool version used during that review.

2. Register its position and prerequisite

In lib/courses.ts, append the lesson to the matching course:

{
  slug: "dates",
  section: "Working with data",
  prerequisites: [{ course: "javascript", lesson: "objects" }],
}

That entry controls:

sidebar order and section grouping;
previous and next navigation;
lesson count and total route generation;
search and sitemap discovery;
the “Before this lesson” recommendation panel.

The section in the catalog should match the lesson's frontmatter section. Use a prerequisite only when the earlier concept materially improves comprehension; do not turn every lesson into a gate.

3. Add a translation

Create the equivalent file with the same slug:

content/javascript/zh-CN/dates.mdx

Translate the title, description, headings, prose, and callouts. Code can remain unchanged when appropriate. If the file is absent, /zh-CN/javascript/dates displays the English lesson with an explicit fallback notice.

4. Add lesson media

Store media below a course and lesson-specific folder:

public/content/javascript/dates/timeline.webp

<LearningImage
  src="/content/javascript/dates/timeline.webp"
  alt="UTC instant converted into three local time zones"
  caption="One instant can have several local representations."
/>

Prefer WebP or AVIF for raster images, include useful alternative text, set no text inside an image unless necessary, and verify legibility in both themes.

Add a course

1. Create its first lesson

content/rust/en/introduction.mdx
content/rust/zh-CN/introduction.mdx

2. Add it to the catalog

Add an object to catalog in lib/courses.ts:

{
  slug: "rust",
  title: { en: "Rust", "zh-CN": "Rust" },
  category: { en: "Systems language", "zh-CN": "系统语言" },
  description: {
    en: "Build reliable software with explicit ownership.",
    "zh-CN": "通过明确的所有权构建可靠软件。",
  },
  difficulty: { en: "Intermediate", "zh-CN": "进阶" },
  minutes: 30,
  available: true,
  phase: "now",
  status: "preview",
  prerequisites: [{ course: "javascript" }],
  lessons: [{ slug: "introduction", section: "Start here" }],
}

Use status: "complete" only when the intended foundation path is fully written and reviewed. Set available: false and status: "planned" for a roadmap entry with no published lessons. Use phase: "later" for longer-term topics.

No route, homepage, search, navigation, sitemap, or SEO component changes are required.

Supported lesson syntax

Arcbyte supports a focused authoring subset so content remains portable and the client stays small.

Prose

Use headings, paragraphs, unordered lists, inline code with backticks, and **bold text**. Level-two headings become table-of-contents entries and stable resume anchors.

Code blocks

```javascript filename="greet.js" highlight="1,2"
function greet(name) {
  return `Hello, ${name}`;
}
```

Language treatment, filename header, copy control, line numbers, mobile overflow, and highlighted lines are applied automatically.

Callouts

<Tip>Use a short practical reminder.</Tip>
<Note>Add context without interrupting the lesson.</Note>
<Important>Mark a concept the learner must retain.</Important>
<Warning>Describe a likely mistake and how to avoid it.</Warning>

Put the opening tag, content, and closing tag on separate lines in real lesson files.

Comparisons

<Comparison language="javascript" leftLabel="Repeated" rightLabel="Reusable">
```javascript
console.log("Hello, Mina");
console.log("Hello, Ari");
```
<!-- split -->
```javascript
const greet = (name) => console.log(`Hello, ${name}`);
greet("Mina");
greet("Ari");
```
</Comparison>

Comparisons sit side by side on wide screens and stack on smaller screens.

How progress works

Arcbyte stores one record per course under arcbyte:progress:v1:

{
  course: "javascript",
  lesson: "functions",
  contentAnchor: "parameters-and-returns",
  anchorOffset: 118,
  scrollProgress: 0.63,
  updatedAt: "2026-08-13T20:00:00.000Z",
  locale: "en"
}

On return, Arcbyte restores the nearest stable heading and then applies the relative offset. The percentage is a fallback, making resume behavior resilient when copy changes. Data never leaves the learner's browser. If storage is unavailable, the lessons still work and only resume behavior is disabled.

SEO when self-hosting

Set NEXT_PUBLIC_SITE_URL to the final HTTPS origin before building. Arcbyte generates:

unique home and lesson titles and descriptions;
canonical URLs and English/Chinese alternates;
Open Graph and X card metadata using public/og-v2.png;
WebSite, Course, ItemList, TechArticle, and Breadcrumb JSON-LD;
/sitemap.xml, /robots.txt, and /manifest.webmanifest;
a 512px PNG app icon.

After deployment, submit /sitemap.xml in the webmaster tools you use and verify the share card on the final domain. Add search-engine verification tags only after the provider gives you a real token; do not commit placeholder verification values.

Deploy on your own server

Arcbyte needs no database or separate API.

Docker Compose (recommended)

Create .env with your production settings, then run:

docker compose up -d --build
docker compose logs -f arcbyte

The service binds to 127.0.0.1:3000, keeping it private from the public network. Put Caddy or Nginx in front for HTTPS.

Example Nginx configuration:

server {
    listen 80;
    server_name learn.example.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Use Certbot or your reverse proxy's automatic TLS support, then expose only ports 80 and 443 in the firewall.

Plain Node process

npm ci
npm run build
NEXT_PUBLIC_SITE_URL=https://learn.example.com npm run start

Run the process with systemd, PM2, or your hosting platform's supervisor. Rebuild after lesson changes because content is compiled into the application.

Cloudflare / OpenAI Sites

The Vinext build produces a Cloudflare Worker-compatible artifact and .openai/hosting.json keeps the project linked to Sites. Run the production checks, then publish through your Cloudflare workflow or OpenAI Sites.

Netlify

The repository includes a Netlify configuration and a small Fetch-style function adapter for Vinext. Netlify serves generated assets from its CDN and sends application routes to the server bundle.

Import the GitHub repository into Netlify, or link it with the Netlify CLI.
Keep the build command and publish directory from netlify.toml.
Replace the three public URLs under [build.environment] if you fork the project.
Deploy the production branch.

For a manual CLI deployment:

npx netlify-cli login
npx netlify-cli sites:create --name your-arcbyte-site
npx netlify-cli deploy --build --prod

To use a subdomain such as learn.example.com, add it in Netlify's Domain management screen, then create a CNAME at your DNS provider pointing learn to the site's *.netlify.app hostname. Netlify provisions HTTPS after DNS verification.

Other hosts

Any platform capable of running the included container is suitable. On a managed JavaScript host, use npm run build for the build command, npm run start for the start command, Node 22.13+, and set the three optional public environment values.

Production checklist

Set NEXT_PUBLIC_SITE_URL to the final HTTPS origin before building.
Set the GitHub and support URLs or leave them empty intentionally.
Run typecheck, lint, build, and tests.
Review every lastUpdated and verifiedFor value against the lesson.
Test keyboard navigation, zoom, reduced motion, light/dark themes, and a narrow viewport.
Check untranslated routes show the English fallback notice.
Verify the canonical URL, social card, JSON-LD, sitemap, robots file, and manifest on the live domain.
Add uptime monitoring and automatic TLS renewal for a self-managed server.

Contributing

Small, focused contributions are welcome. Content changes should name the standard or runtime used for verification. UI changes should preserve the content-first feel, semantic structure, keyboard access, reduced-motion support, and backend-free default.

Please do not update lastUpdated unless the lesson itself was reviewed.

License

Arcbyte is available under the MIT License.

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
.openai		.openai
app		app
build		build
components		components
content		content
lib		lib
netlify/functions		netlify/functions
public		public
scripts		scripts
tests		tests
worker		worker
.env.example		.env.example
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
docker-compose.yml		docker-compose.yml
env.d.ts		env.d.ts
eslint.config.mjs		eslint.config.mjs
netlify.toml		netlify.toml
next-env.d.ts		next-env.d.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Navigation Menu

Repository files navigation

Arcbyte

What is included

Course roadmap

Stack

Quick start

Configuration

Project map

Add a lesson (class)

1. Create the lesson file

2. Register its position and prerequisite

3. Add a translation

4. Add lesson media

Add a course

1. Create its first lesson

2. Add it to the catalog

Supported lesson syntax

Prose

Code blocks

Callouts

Comparisons

How progress works

SEO when self-hosting

Deploy on your own server

Docker Compose (recommended)

Plain Node process

Cloudflare / OpenAI Sites

Netlify

Other hosts

Production checklist

Contributing

License

About

Releases

Packages

Contributors

Languages

Folders and files

Latest commit

History

Repository files navigation

Arcbyte

What is included

Course roadmap

Stack

Quick start

Configuration

Project map

Add a lesson (class)

1. Create the lesson file

2. Register its position and prerequisite

3. Add a translation

4. Add lesson media

Add a course

1. Create its first lesson

2. Add it to the catalog

Supported lesson syntax

Prose

Code blocks

Callouts

Comparisons

How progress works

SEO when self-hosting

Deploy on your own server

Docker Compose (recommended)

Plain Node process

Cloudflare / OpenAI Sites

Netlify

Other hosts

Production checklist

Contributing

License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages