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, 웹 빌더 또는 클라우드 IDE로 바로 가져오세요.
Tetrees를 호환 AI IDE에 연결해 보유 제품을 불러오고, 판매자 업로드 권한을 노출하지 않은 채 검증된 ZIP을 받으세요.
아직 리뷰가 없습니다.
토론을 불러오는 중…
Mobile App Templates & App Source Code
US$4
