Všetky projekty

Hobby2025

DevCode Academy LMS

Systém na riadenie výučby s rolami pre programátorské školy.

Roly
Admin · Učiteľ · Študent
Tabuľky
17
Stránky
30+
Migrácie
Drizzle Kit

01Prehľad

DevCode Academy riadi programátorskú školu od začiatku do konca: kurzy a lekcie, živé hodiny s dochádzkou, zadania s hodnotením, verejné overenie certifikátov a blog.

Každá rola má vlastný panel a navigáciu, všetko postavené na jednej typovej schéme zdieľanej klientom aj serverom.

02Architektúra

Jednostránková aplikácia v Reacte komunikuje s REST API v Expresse. Databázová schéma je definovaná raz v zdieľanom module a používa sa pre dopyty, migrácie aj validáciu požiadaviek.

Klient

Admin

Kurzy, učitelia, študenti

Učiteľ

Lekcie, hodnotenie, dochádzka

Študent

Kurzy, zadania, známky

Verejné

Úvod, blog, overenie certifikátu

Klientsky runtime

Wouter

Smerovanie

TanStack Query

Cache stavu servera

React Hook Form + Zod

Validované formuláre

API

REST cesty

Express · TypeScript ESM

Autentifikácia

Relácie + kontrola rolí

Vrstva úložiska

Repozitár nad Drizzle

Zdieľané

shared/schema.ts

Tabuľky Drizzle + schémy drizzle-zod

Dáta

PostgreSQL

Neon serverless

Úložisko relácií

connect-pg-simple

03Komponenty

Doména kurzov

Obsah a zápis

  • Kurzy → lekcie → materiály a zadania lekcií, plus samostatné prezenčné kurzy s vlastnými zápismi.
  • Pokrok v lekciách sa sleduje pre každého študenta a sumarizuje na paneloch.

Živé hodiny a dochádzka

Chod triedy

  • Učiteľ otvorí hodinu; globálny panel aktívnej hodiny ho sprevádza na všetkých stránkach.
  • Dochádzka sa zaznamenáva pre každú hodinu a študenti ju vidia.

Zadania a hodnotenie

Cyklus učenia

  • Študenti odovzdávajú práce, učitelia ich hodnotia so spätnou väzbou a známky sa zapisujú do záznamu študenta.

Certifikáty

Dôvera mimo platformy

  • Certifikáty sa vydávajú po dokončení a ktokoľvek s kódom certifikátu ich môže verejne overiť.

04Ako to funguje

  1. 1

    Admin

    Vytvára kurzy a priraďuje učiteľov.

  2. 2

    Učiteľ

    Pripravuje lekcie, vedie živé hodiny, zapisuje dochádzku.

  3. 3

    Študent

    Zapíše sa, sleduje lekcie, odovzdáva zadania.

  4. 4

    Učiteľ

    Hodnotí odovzdané práce; pokrok sa aktualizuje na oboch paneloch.

  5. 5

    Platforma

    Po dokončení vydá overiteľný certifikát.

05Technické detaily

Jedna schéma, tri použitia

Tabuľky sú definované raz v Drizzle. Z tých istých definícií vznikajú SQL migrácie, typové dopyty na serveri a Zod schémy, ktoré validujú telá požiadaviek aj formuláre na klientovi - kontrakt API sa tak nemôže odchýliť od databázy.

shared/schema.ts (excerpt)ts
export const courses = pgTable("courses", {
  id: serial("id").primaryKey(),
  title: varchar("title", { length: 255 }).notNull(),
  level: varchar("level", { enum: ["beginner", "intermediate", "advanced"] }).notNull(),
  instructorId: varchar("instructor_id").notNull(),
  isActive: boolean("is_active").default(true),
  enrollmentCount: integer("enrollment_count").default(0),
  createdAt: timestamp("created_at").defaultNow(),
  updatedAt: timestamp("updated_at").defaultNow(),
});

// Reused by the API (request validation) and the client (forms)
export const insertCourseSchema = createInsertSchema(courses).omit({
  id: true,
  createdAt: true,
  updatedAt: true,
});
export type InsertCourse = z.infer<typeof insertCourseSchema>;

06Návrhové rozhodnutia

Rozhranie úložiska medzi cestami a databázou

Cesty závisia od abstrakcie úložiska, nie priamo od Drizzle, vďaka čomu sú handlery tenké a dátová vrstva testovateľná.

Stav servera v TanStack Query

Žiadny globálny store na klientovi: dáta zo servera sa cachujú a invalidujú podľa kľúčov dopytov, stav UI zostáva lokálny.

Relácie v PostgreSQL

Relácie sú v tej istej databáze, takže aplikácia sa dá škálovať horizontálne bez samostatnej služby relácií.

07Technológie

Frontend
React 18TypeScriptViteTailwind CSSshadcn/uiTanStack QueryWouter
Backend
Node.jsExpressPassportexpress-session
Dáta
PostgreSQL (Neon)Drizzle ORMdrizzle-zod

08Ďalšie kroky

  • Automatické hodnotenie programátorských zadaní.
  • Notifikácie v reálnom čase pre živé hodiny.

Ďalšia prípadová štúdia

Crypto Trading Bot

Obchodný engine s viacerými indikátormi, živým panelom, backtestom a ovládaním cez Telegram.