Concepts
Frontend

Frontend Overview

This guide explains the structure of the Sokrates Platform frontend and where to find the relevant code to make changes to the UI.

Table of Contents

Technology Stack

The Sokrates Platform frontend is built with:

  • Framework: Next.js (React)
  • UI Library: shadcn/ui (opens in a new tab) - Modern, accessible component library
  • Styling: Tailwind CSS
  • Type Safety: TypeScript

All UI components follow the Sokrates Platform design system available on the Figma board. New components should always use shadcn/ui as a base to maintain design consistency.

Folder Structure

The two most important folders for frontend development are:

  • apps/web/app: Contains the main application code, including pages, layouts, and global styles
  • apps/web/components: Contains reusable UI components (buttons, modals, forms, etc.) and specific subpage components
Folder structure overview

Frontend Architecture

Inside the apps/web/app/orgs folder, you'll find two relevant folders:

  • withmenu: Contains the general Dashboard (Courses page) and the Course Introduction page
  • dash: Contains all other main pages (Users, Settings, Exercise Library, Course Editor, etc.)
withmenu and dash folders

Pages in withmenu folder

Courses

Formerly known as the Dashboard, the Courses page is the anchor point of the Sokrates Platform. Here users can see all the courses they are enrolled in. Admins can also create new courses from this page.

Courses page
📂 Where to find
Courses page file location

Course Introduction Page

This page serves as the introduction/overview page for a course. Users can see course details and enroll in the course if they are not already enrolled.

Course introduction page
📂 Where to find
Course introduction page file location

Pages in dash folder

Users

This page allows Admins to manage users within the organization. Admins can view user details, assign roles, and manage user access to courses.

Users page
📂 Where to find
Users page file location

The Users page is separated into 4 subpages (visible in the tabs above).

📂 Where to find the subpages
Users subpages file location

User Account Settings

This page allows users to manage their account settings, including updating personal information, changing passwords, and updating their profile picture.

User account settings page
📂 Where to find
User account settings file location

The User Account Settings page is separated into 2 subpages: General Settings and Password Settings.

📂 Where to find the subpages
Account settings subpages file location

Organization General Settings

This page allows Admins to manage general organization settings, including updating organization information, branding, and preferences.

Organization settings page
📂 Where to find
Organization settings file location

The Organization General Settings page content is mostly contained in one subpage.

📂 Where to find the subpage
Organization settings subpage file location

Exercise Library

This page allows Admins to manage the exercise library, including adding, editing, and deleting exercises. Users can also browse and search for exercises to include in their courses.

Exercise library page
📂 Where to find
Exercise library file location

Course Edit Page

This page allows Admins and Instructors to create and edit courses. Features include:

  • Adding and editing course details
  • Managing course content (exercises, materials)
  • Creating and editing the course map
  • Configuring course settings
  • Viewing enrolled members
Course edit page
📂 Where to find
Course edit page file location

The Course Edit Page is separated into 5 subpages (visible in the tabs above).

📂 Where to find the subpages
Course edit subpages file location

Components

The reusable components used throughout the Sokrates Platform can be found in the apps/web/components folder.

UI Components

This folder contains all reusable UI components from the shadcn/ui library. All components are styled according to the Sokrates Platform design system (available on Figma).

⚠️

Design Standard: New components should always be implemented using the uniformly designed shadcn/ui components as a base to maintain consistency across the platform.

Component Examples

Buttons

Button component example

Badges

Badge component example

Cards

Card component example
📂 Where to find UI components
UI components file location

Common UI components include:

  • Buttons (primary, secondary, outline, ghost, etc.)
  • Modals and dialogs
  • Forms and input fields
  • Cards and containers
  • Navigation elements
  • Badges and labels
  • Tooltips and popovers

Menu Bar

The Menu Bar component is a crucial part of the Sokrates Platform's user interface, providing easy navigation across different sections of the application. It is designed to be responsive and user-friendly, ensuring users can quickly access the features they need.

Menu bar component

For easy access, the Menu Bar navigation can be expanded and collapsed by clicking on the profile picture.

Expanded menu bar
📂 Where to find
Menu bar file location

Modals

Modals are used throughout the Sokrates Platform to display important information, confirm actions, or gather user input without navigating away from the current page.

Essentially, every time a popup appears on the screen, it is most likely a modal component.

Modal component example
📂 Where to find
Modals file location

Styled Elements (Legacy)

⚠️

⚠️ Deprecated: Styled Elements are legacy UI components from the original LearnHouse platform and should not be implemented in new features. Some parts of the Sokrates Platform still use these elements because there hasn't been a suitable way to replace them with shadcn/ui components yet.

Example: Course Card

One example of a styled element is the Course Card used on the Dashboard page. This should be migrated to the new shadcn/ui design system when possible.

📂 Where to find
Styled elements file location

Development Guidelines

Best Practices

  1. Use shadcn/ui components: Always start with shadcn/ui components as your base
  2. Follow the design system: Refer to the Figma board for design specifications
  3. Component reusability: Create reusable components in apps/web/components
  4. Naming conventions: Use descriptive, PascalCase names for component files
  5. TypeScript: Always use TypeScript for type safety
  6. Avoid legacy components: Do not use Styled Elements for new features

File Organization

apps/web/
├── app/
│   └── orgs/
│       ├── withmenu/     # Dashboard & Course Intro
│       └── dash/         # All other pages
└── components/
    ├── ui/               # shadcn/ui components
    ├── modals/           # Modal components
    └── [feature]/        # Feature-specific components

Adding a New Component

  1. If it's a shadcn/ui component, install it using the CLI: npx shadcn-ui@latest add [component-name]
  2. For custom components, create them in apps/web/components
  3. Ensure the component follows the design system
  4. Make components reusable and properly typed with TypeScript
  5. Document complex components with JSDoc comments

Need Help? If you encounter issues or need clarification on any frontend implementation, consult the Figma design board or reach out to the development team.

Infrastructure Overview