Getting Started

This section describes the technical part of the application generated by Flatlogic Generator.

Understanding the Code Structure

The basic project structure of the generated full-stack app consists of the following:

Project Root:

  • backend: Root directory for the backend code.
    • src: Contains all source code files.
      • auth: Handles authentication logic (e.g., JWT handling, login, registration).
      • db: Defines database schema, API, seeders, migration, configs, and utils.
      • middlewares: Contains middleware functions for Express.js (check-permissions, upload.js).
      • routes: Defines the API routes/endpoints that interact with services.
      • services: Contains business logic and service functions that interact with the database. Database api functions are located in src/db/api folder. The services also contain code responsible for sending messages and downloading/uploading files.
      • config.js: Configuration settings for the backend (gcloud config, email settings, host, ports, etc.).
    • index.js: The entry point for the backend server, typically initializes the server and sets up middleware and routes.
    • Dockerfile: Defines the Docker image for the backend, specifying the environment setup, dependencies, and how to run the backend service.
    • package.json: Lists dependencies, scripts, and metadata for the project.
  • docker: Contains Docker-related configurations.
    • docker-compose.yml: Defines multi-container Docker applications, specifies how to run both frontend and backend services together, defines environment variables, including dependencies and networking.
  • frontend: Root directory for the frontend code.
    • public: Static files (e.g., images, fonts, favicon).
    • src: Contains all source code files.
      • components: Reusable React Widgets and components (e.g., ). A complete list of widgets and components can be found on the next page (Working with Widgets on the UI).
      • css: Base styles, Tailwind, custom CSS files.
      • helpers: Utility functions used across the application (dataFormatter, fileSaver, userPermissions)
      • hooks: Custom React hooks.
      • interfaces: TypeScript interfaces for MenuAside, MenuNavBarItem, ColorKey, ColorButtonKey, Client, User.
      • layouts: Layout components that define the structure of different pages (Guest, Authenticated).
      • pages: Page components corresponding to different routes in the application. That folder contains all generated pages and components based on the DB schema.
      • stores: State management files using Redux

Working with Widgets on the UI

All widgets and components are located in the frontend/src/components folder:

Widgets

  1. AsideMenu
  2. BigCalendar
  3. CardBox
  4. CardBoxModal
  5. DataGridMultiSelect (MUI customization
  6. DragDropFilePicker
  7. FooterBar
  8. FormFilePicker
  9. NavBar
  10. NotificationBar
  11. RichTextField
  12. Pagination
  13. Search
  14. SelectField
  15. SelectFieldMany
  16. UserCard

Base Components

  1. BaseButtons, BaseButton
  2. BaseDivider
  3. BaseIcon
  4. FormCheckRadioGroup, FormCheckRadio
  5. FormField
  6. IconRounded
  7. ImageField
  8. LoadingSpinner
  9. OverlayLayer
  10. SectionFullScreen
  11. SectionMain
  12. SectionTitle
  13. SectionTitleLineWithButton
  14. SwitchField