IntroductionFrontendIntroduction

Create, Code, Build & Design for everyone

What You’ll Learn

  • Code: Explore the architecture and structure of the front-end codebase, built with modern technologies like Next.js.
  • Build: Understand the build process, deployment strategies, and how to optimize performance for fast, reliable applications.
  • Design: Dive into our design principles, component libraries, and styling techniques to ensure consistency and usability.
  • Collaborate: Learn how to contribute effectively, follow coding standards, and work in sync with the team.

Why It Matters

At Kundima, we believe technology should be accessible to everyone. This documentation is here to guide you, whether you’re a seasoned developer or a newcomer looking to make an impact. Let’s create something amazing together!

Project Structure

The Kundima project is organized to ensure clarity, scalability, and maintainability. Below is the directory structure along with the purpose of each folder:

Directory Purpose

  • public

    • Contains static assets like images and avatar files that can be directly served to the browser.
  • src

    • The main source folder where all the application logic resides.

    • app

      • Organizes app-wide configurations, including:
        • contexts: Shared React contexts for state management.
        • pages: Holds all the routes, subdivided by functionality.
          • adminConsole: Includes admin-specific pages, subpages, and their components.
          • authentication: Handles login, signup, and other authentication flows.
          • console: Houses general console-related pages like home and finances.
    • components

      • Modular, reusable components to speed up UI development.
        • functionalComponents: Utility components with logic-driven functionality.
        • splash: Components used for splash screens or loaders.
        • ui: Basic UI elements like buttons, inputs, and modals.
    • hooks

      • Custom React hooks to encapsulate reusable logic.
    • lib

      • Core utilities, helper functions, or third-party integrations.

This structure ensures that different parts of the application are easy to locate and modify, promoting better collaboration and scalability.