Project Docs

Youndela frontend structure

A practical map of where routes, content, and shared UI live in this repo.

Example routeJump to structure

Project map

Core paths

This tree highlights the folders you touch most when adding lessons, routes, or UI.

app/
  layout.tsx
  globals.css
  page.tsx
  components/
    GrammarPopup.tsx
  japanese/
    n5/
      grammar/
        [slug]/
          page.tsx
content/
  japanese/
    n5/
      grammar/
      vocabulary/
      kanji/
public/
package.json
tsconfig.json

Routing

  • Routes live inside app/. Each folder with a page.tsx becomes a URL.
  • Dynamic segments use brackets, for example [slug].
  • The grammar detail page maps /japanese/n5/grammar/te-iru to app/japanese/n5/grammar/[slug]/page.tsx.
  • Shared layout and fonts live in app/layout.tsx.

/japanese/n5/grammar/te-iru -> app/japanese/n5/grammar/[slug]/page.tsx

Content flow

  1. Store lesson material under content/japanese/n5.
  2. Pick a slug (for example te-iru) and add files or folders in the matching topic.
  3. Connect the content to UI inside the route file so it renders on the page.
Keep slugs consistent between the content folder and the route param.

Components and UI

  • Reusable UI lives in app/components.
  • GrammarPopup.tsx is a client component that shows inline grammar details.
  • Page layout and typography are controlled with Tailwind utility classes.
  • Use the alias @/ for project root imports (set in tsconfig.json).

import X from "@/app/..."

npm run dev

Suggested next steps

  • Add a new grammar slug by creating matching content and wiring it in the route.
  • Extract shared data into a single content loader so grammar, vocab, and kanji pages can reuse it.
  • Expand the docs with a short contribution checklist if more people will edit content.