Skip to content
Code Genie
Blog

Frontend Overview

Code Genie projects include a Single Page Application (SPA) Web App, including pages, components, and API integrations for all Entities defined in your App Definition.

This guide covers everything you need to know to build, deploy, and extend your application’s frontend.

Core Technology

The web app utilizes the following core technologies:

  • React
  • Next.js – Enables simple bundling, routing, and other benefits when building React applications
  • Ant Design – A powerful, flexible, and stylable React component library
  • TanStack/React Query – “TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.”
  • AWS Amplify Client Library – Provides client side integration for Cognito Auth
  • AWS Amplify Hosting – Hosts our web app

Project Structure Overview

The frontend package exists within the ./packages/ui directory.

  • Directorycomponents
    • DirectoryWidget 1 component directory per entity
      • WidgetsCardList.tsx
      • WidgetData.tsx
      • WidgetDeleteModal.tsx
      • WidgetDetails.tsx
      • WidgetsTable.tsx
      • WidgetUpsertModal.tsx
      • widgetHooks.ts
    • DirectoryUser
      • UserData.tsx
      • UserDeleteModal.tsx
      • UserDetails.tsx
      • UserUpsertModal.tsx
      • UsersTable.tsx
      • userHooks.ts
    • DirectoryMe
      • MeData.tsx
      • MeDetails.tsx
      • MeUpsertModal.tsx
      • meHooks.ts
    • Directorylayouts
      • AuthenticatedPage.tsx
      • SideMenu.tsx
      • UnauthenticatedPage.tsx
    • AvatarNameLink.tsx
    • BuiltWithCodeGenie.tsx
    • ErrorBoundary.tsx
    • RelativeDateWithAbsoluteHover.tsx
  • Directorylib
    • getPageTitle.ts
    • getRedirectRoute.ts
    • numberFormatter.ts
    • upload.ts
    • usePagination.ts
  • Directorypages
    • Directorywidgets 1 page directory per entity
      • Directory[widgetId]
        • DirectoryrelatedWidgets 1 directory per related entity
          • Directory[relatedWidgetId]
            • index.tsx
        • index.tsx
      • index.tsx
    • _app.tsx
    • _document.tsx
    • 404.tsx
    • account.tsx
    • forgot-password.tsx
    • getting-started.tsx
    • index.tsx
    • register.tsx
    • reset-password.tsx
    • verify.tsx
  • Directorypublic
    • Directoryicons
      • … auto-generated icons from logo.png
    • logo.png
  • Directorythemes
    • base.ts
    • dark.ts
    • global.css
    • light.ts
    • theme-provider.ts
    • themes.ts
  • .gitignore
  • README.md
  • jest.config.js
  • jest.setup.js
  • next-env.d.ts
  • next.config.js
  • package-lock.json
  • package.json
  • tsconfig.json