Loading page
出品者：cry0g3nic
A fully functional e-learning frontend built with React 19, TypeScript, and Tailwind CSS v4, featuring a multi-screen course catalog with live search and category filtering, instructor profiles, tiered pricing plans, and a course detail modal. Designed for developers who need a polished, ready-to-extend online education UI with ambient glow aesthetics and responsive layout out of the box. Licensed under the Tetrees License.
A polished e-learning frontend application built with React 19 and TypeScript. This single-page app presents a full course marketplace UI with multiple screens — home, course catalog, instructors, pricing, and about — all rendered client-side with smooth navigation, filtering, and a modal detail view. Designed with a dark, premium aesthetic using Tailwind CSS v4 utility classes and ambient gradient effects.
useMemo-powered filtering by title, instructor, category name, and category tabindex.htmloverflow-x-hidden and viewport meta| Technology | Version | Role |
|---|---|---|
| React | ^19.0.0 | UI framework |
| TypeScript | ~5.6.0 | Type safety |
| Vite | ^6.0.0 | Build tool & dev server |
| Tailwind CSS | ^4.2.2 | Utility-first styling |
| @tailwindcss/vite | ^4.2.2 | Tailwind Vite integration |
| ESLint + TS plugin | ^9 / ^8 | Linting |
npm install
npm run dev
App runs at http://localhost:5173 by default.
npm run build
npm run preview
npm run typecheck
npm run lint
src/
└── App.tsx # All screens, components, data, and types
main.tsx # React root entry point
index.html # Shell with loading state and runtime error handling
package.json # Dependencies and scripts
All course, instructor, and pricing data is defined as typed constants directly in App.tsx:
COURSES — Array of Course objects. Add or modify entries to update the catalog.CATEGORIES — Filter tab labels. Keep in sync with Course.category values.INSTRUCTORS — Array of Instructor objects for the instructors screen.PLANS — Array of Plan objects for the pricing screen.Each course and instructor card uses a Tailwind gradient string (accent) and a single glyph character (glyph) for visual identity — both are fully customizable per entry.
Tetrees License
隔離されたサンドボックスを起動しサーバー側で実行 — ローカル設定不要。
サンドボックス検証が完了し、検出された実行経路は合格しました。
This React web app completed archive review. Structure, dependency manifests, documentation, functional source, and common risk patterns were checked by the Tetrees verification pipeline; runtime phases are stated separately. Final verified scores after isolated runtime evidence: overall 8.2 and security 9.
Deterministic AVCP artifact review
パイプライン avcp-2026-08-04.1 · SHA-256 b04fa40c5ae653b1…
This version-scoped review deterministically inspects the submitted archive for structure, dependencies, documentation, functional source, and common malicious or high-risk signals. Build and test phases are reported as passed only after an isolated sandbox audition. It is not a guarantee of perfect security.
レビュー日 2026年8月7日
完全なインストールガイドと統合プロンプトは購入後に解放されます。
この製品をお使いのAI IDE・Webビルダー・クラウドIDEに直接取り込みます。
Tetreesを対応AI IDEに接続し、所有製品の一覧取得と検証済みZIPの取得を、販売者のアップロード権限を公開せずに行えます。
まだレビューがありません。
Sign in to join the discussion
Loading discussion…
Mobile App Templates & App Source Code
$4
