https://github.com/uxlabspk/learn
A fully static React + TypeScript coding course platform, lessons are Markdown files, no CMS or backend required.
https://github.com/uxlabspk/learn
learning-resources reactts tailwindcss
Last synced: 4 days ago
JSON representation
A fully static React + TypeScript coding course platform, lessons are Markdown files, no CMS or backend required.
- Host: GitHub
- URL: https://github.com/uxlabspk/learn
- Owner: uxlabspk
- Created: 2026-07-01T05:05:40.000Z (14 days ago)
- Default Branch: main
- Last Pushed: 2026-07-02T11:18:49.000Z (12 days ago)
- Last Synced: 2026-07-02T12:27:25.638Z (12 days ago)
- Topics: learning-resources, reactts, tailwindcss
- Language: TypeScript
- Homepage: https://learn.codehuntspk.com/
- Size: 281 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CodeHunts Learn Platform
Free coding course/article site for `learn.codehuntspk.com`, built with React + TypeScript + Vite. Fully static — no server-side code, no database, no login required.
## How content works
There's no CMS to log into. Every lesson is a Markdown file in:
```
src/content/courses/
```
Add a new lesson by creating a new `.md` file there, e.g. `css-flexbox.md`:
```md
---
title: Flexbox Basics
description: One-line summary shown on the course cards.
track: CSS Fundamentals
order: 1
minutes: 10
pdf: /pdfs/flexbox-cheatsheet.pdf # optional, omit if there's no PDF
---
Your lesson content here, written in normal Markdown.
Headings, `code`, lists, > blockquotes, and fenced code blocks
all render automatically.
```
- `track` groups lessons together (shown as a "trail" on the homepage and courses page).
- `order` controls the sequence within that track.
- `pdf` is optional — if set, a "Download PDF" button appears on the lesson. Put the actual PDF file in `public/pdfs/`.
The site picks up new `.md` files automatically the next time you run `npm run build` — nothing else to wire up.
## Local development
```bash
npm install
npm run dev
```
Opens at `http://localhost:5173`.
## Building for production
```bash
npm run build
```
This outputs a fully static site into the `dist/` folder — that folder is everything you upload to Hostinger.
## Project structure
```
src/
content/courses/ ← your lessons (Markdown)
pages/ ← Home, Courses, CourseDetail, NotFound
components/ ← Layout (header/footer)
lib/content.ts ← loads & parses the Markdown files at build time
public/
pdfs/ ← downloadable cheatsheets referenced from lessons
.htaccess ← makes routing work on Apache/Hostinger
```
## Notes
- No backend, no database, no user accounts — by design, per the current scope. If you later want logins/progress-tracking, that would need adding a PHP+MySQL API
- Fonts are loaded from Google Fonts via `` tags in `index.html`. If you'd rather not depend on Google Fonts, they can be self-hosted instead.