Skip to main content

Overview

Overview of the SOKit Frontend​

In this section, we introduce the SOKit Frontend framework — a modern, lightweight foundation for building web applications using React and Vite. Designed to work seamlessly with the SOKit Backend, the SOKit Frontend framework provides a fast, developer-friendly setup that makes integration and communication between frontend and backend straightforward and efficient.

Getting Started​

If you want to download the already developed frontend application click here.

After following the instructions in the Initialize Frontend guide, you will have a basic SOKit Frontend application up and running.

This application includes:

  • A minimal React-based setup
  • Vite as the build tool and development server
  • A simple homepage component
  • A mock Express server for simulating API responses

💡 This project is meant as a starter template — it's a clean slate, designed to help you begin building your frontend from scratch. It does not include any prebuilt features beyond the foundational setup.

Project Structure​

The structure of the generated frontend project is organized to promote scalability and maintainability. Below is an overview of key directories and files:

src/ — Source Code Directory​

Contains the core application logic and UI components.

  • i18n/
    Includes internationalization (i18n) configuration and language files for multilingual support.

  • pages/
    Contains the main React components that represent different pages of your application.

  • styles/
    Includes global styles using Tailwind CSS v4, which you can customize for consistent design across the app.

  • Core Files in src/:

    • index.jsx: Application entry point.
    • app.jsx: Main app wrapper component.
    • app-routes.jsx: Manages application routing.
    • app-config.jsx: Defines app-specific settings and environment configuration.
    • library.jsx: Centralized constants (e.g., menu structure, user roles).
    • app-catch-all.jsx: Handles unknown routes (404).
    • app-catch-auth.jsx: Handles unauthorized access (401).

src-mock/ — Mock Server Directory​

Includes a simple Express-based mock server to simulate backend APIs for development.

  • index.cjs: Starts the mock server and defines mock endpoints.
  • During the guide, you will create JSON response files used by this server to mimic backend behavior.

🧪 This mock setup is particularly useful when the backend is not yet implemented or temporarily unavailable.

.env Files — Environment Configuration​

The application uses multiple .env files to manage environment-specific settings:

  • .env.development: Used when running the app in development mode.
  • .env.production: Used for production builds.
  • .env.mock: Used to run the frontend in dev mode while using the mock server instead of the real backend.

public/ — Static Assets​

This directory contains static files like images, icons, and other publicly accessible resources. These files are served as-is by the web server.

🔧 What’s Next?​

With the project set up and the structure understood, you’re now ready to begin development.

In the upcoming sections, we’ll explore:

  • How to run and configure the application
  • How to develop new features
  • How to integrate the frontend with the SOKit Backend

Let’s get started!