Frontend Code Architecture
Overview
This document outlines the architecture for the front-end application built with NextJS. The application utilizes the following technologies:
- NextJS with the app router for navigation and routing.
- Shadcn/UI for the component library.
- Tailwind CSS for styling.
- Playwright for integration testing.
- RTK Query for state management and API integration.
- Atomic Design for directory structure and component organization.
Technologies and Packages
NextJS
NextJS is a React framework that enhances the development experience with features such as server-side rendering (SSR) and static site generation (SSG). These capabilities improve the performance and SEO of the application by rendering content on the server before sending it to the client. The app router in NextJS provides an intuitive way to handle navigation and routing within the application.
Shadcn/UI
Shadcn/UI is a modern component library that provides a set of customizable and reusable UI components. These components follow contemporary design principles, ensuring a consistent and aesthetically pleasing user interface. Using Shadcn/UI accelerates the development process by offering pre-built components that can be easily integrated and customized.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows developers to create custom designs directly in their HTML by applying utility classes. This approach enables rapid and responsive design development, reduces the need for writing custom CSS, and ensures a consistent design system throughout the application.
Playwright
Playwright is a powerful tool for integration and end-to-end testing. It supports multiple browsers (Chromium, Firefox, and WebKit) and provides robust features for automating and testing web applications. Playwright's capabilities include capturing screenshots, generating PDFs, and simulating user interactions, making it an essential tool for ensuring the quality and reliability of the application.
RTK Query
RTK Query is a data fetching and caching tool that is part of the Redux Toolkit. It simplifies state management and API integration by providing a set of powerful hooks for performing CRUD operations and managing server state. RTK Query reduces boilerplate code and enhances the efficiency of data handling in the application.
Atomic Design
Atomic Design is a methodology for creating scalable and maintainable design systems. It breaks down the UI into five distinct levels:
- Atoms: Basic building blocks like buttons, inputs, and labels.
- Molecules: Combinations of atoms that form more complex components, such as form fields or card components.
- Organisms: Groups of molecules that function together as a section of the UI, such as a header or a footer.
- Templates: Page-level layout components that include organisms and define the overall structure of a page.
- Pages: Specific instances of templates with real content, representing the final UI of a page.
By following Atomic Design principles, the application maintains a clear and organized structure, making it easier to develop, test, and maintain.
Directory Structure
The directory structure that will be used is shown below.
parking-control-room-frontend/
├── .github/
│ └── workflows/
│ └── ci.yml
|
├── .vscode/
│ └── settings.json
|
├── public/ # Public assets
│ ├── favicon.ico
│ ├── images/
│ │ └── logo.png
│ └── ...
├── src/
│ ├── app/ # App Router directory
│ │ ├── login/ # About page
│ │ │ └── page.tsx
│ │ ├── dashboard/
│ │ │ ├── layout.tsx # Dashboard layout
│ │ │ ├── page.tsx # Dashboard home page
│ │ │ ├── overview/
│ │ │ │ ├── casus/
│ │ │ │ │ ├── page.tsx # Casus page (All Casus )
│ │ │ │ │ ├── open/
│ │ │ │ │ │ └── page.tsx # Open cases
│ │ │ │ │ ├── closed/
│ │ │ │ │ │ └── page.tsx # Closed cases
│ │ │ │ │ ├── malfunctions/
│ │ │ │ │ │ └── page.tsx # Malfunctions
│ │ │ ├── bulletins/
│ │ │ │ ├── current-malfunctions/
│ │ │ │ │ └── page.tsx # Current malfunctions page
│ │ │ │ ├── latest-malfunctions/
│ │ │ │ │ └── page.tsx # Latest malfunctions page
│ │ │ │ ├── announcements/
│ │ │ │ │ └── page.tsx # Announcements page
│ │ │ │ ├── events/
│ │ │ │ │ └── page.tsx # Events page
│ │ ├── layout.tsx # Custom layout
│ │ └── page.tsx # Home page
│ │
│ ├── components/ # Reusable components
│ │ ├── atoms/ # Atoms: basic building blocks
│ │ │ ├── Button.tsx # Button component
│ │ │ ├── Input.tsx # Input component
│ │ │ ├── TextArea.tsx # TextArea component
│ │ │ ├── Select.tsx # Select component
│ │ │ ├── DatePicker.tsx # DatePicker component
│ │ │ ├── Accordion.tsx # Accordion component
│ │ │ ├── RadioGroup.tsx # RadioGroup component
│ │ │ ├── Checkbox.tsx # Checkbox component
│ │ │ ├── Radio.tsx # Radio component
│ │ │ └── TimePicker.tsx # TimePicker component
│ │ │
│ │ ├── molecules/ # Molecules: combinations of atoms
│ │ │ ├── Card.tsx # Card component
│ │ │ ├── AccordionMenu.tsx # AccordionMenu component
│ │ │ ├── UserMenuDropdown.tsx # UserMenuDropdown component
│ │ │ ├── IssuesCard.tsx # IssuesCard component
│ │ │ ├── Floorplan.tsx # Floorplan component
│ │ │ └── Livestream.tsx # Livestream component
│ │ │
│ │ ├── organisms/ # Organisms: combinations of molecules
│ │ │ ├── Header.tsx # Header component
│ │ │ ├── Sidebar.tsx # Sidebar component
│ │ │ ├── Navbar.tsx # Navbar component
│ │ │ ├── DataTable.tsx # DataTable component
│ │ │ ├── TabGroups/ # Directory for TabGroups components
│ │ │ │ ├── Overview.tsx # Overview tab group component
│ │ │ │ ├── Bulletins.tsx # Bulletins tab group component
│ │ │ │ ├── Casus.tsx # Casus tab group component
│ │ │ │ ├── NewCaseWorkflow.tsx # New Case Workflow tab group component
│ │ │ │ ├── Handling.tsx # Handling tab group component
│ │ │ │ ├── Emergency.tsx # Emergency tab group component
│ │ │ │ ├── Providers.tsx # Providers tab group component
│ │ │ │ ├── CallHandling.tsx # Call Handling tab group component
│ │ │ │ ├── Attachments.tsx # Attachments tab group component
│ │ │ │ ├── Updates.tsx # Updates tab group component
│ │ │ │ ├── Spec.tsx # Spec tab group component
│ │ │ │ ├── Map.tsx # Map tab group component
│ │ │ │ ├── Contacts.tsx # Contacts tab group component
│ │ │ │ ├── Livestream.tsx # Livestream tab group component
│ │ │ │ ├── Pictures.tsx # Pictures tab group component
│ │ │ │ └── Floorplan.tsx # Floorplan tab group component
│ │ │ ├── CasusTable.tsx # CasusTable component
│ │ │ ├── ContactTable.tsx # ContactTable component
│ │ │ ├── AttachmentTable.tsx # AttachmentTable component
│ │ │ ├── EventLogsTable.tsx # EventLogsTable component
│ │ │ └── AnswerGrid.tsx # AnswerGrid component
│ │ │
│ ├── assets/ # Global assets
│ │ ├── globals.css # Global CSS file
│ │ ├── tailwind.css # Tailwind CSS configuration
│ │ └── shadcn.css # Shadcn UI custom styles
│ │
│ ├── hooks/ # Custom React hooks
│ │ └── useCustomHook.ts
│ │
| ├── state/
| │ ├── slices/
| │ │ ├── tab-states.ts
| │ │ └── auth.ts
| │ ├── api/
| │ │ ├── casus.ts
| │ │ ├── bulletins.ts
| │ │ └── auth.ts
│ | ├── types/ # TypeScript types
| │ │ ├── casus.ts
| │ │ ├── bulletins.ts
│ | | └── auth.ts
| │ ├── persistStore.ts
| │ └── store.ts
│ │
│ ├── utils/ # Utility functions
│ │ └── helpers.ts
│ │
│ └── types/ # TypeScript types
│ └── index.d.ts
│
├── tests/ # Playwright tests
│ ├── example.spec.ts # Example test spec
│ └── ...
│
├── .gitignore # Git ignore file
├── components.json # Shadcn UI components configuration
├── .prettierrc
├── package.json # NPM package configuration
├── playwright.config.ts # Playwright configuration
├── postcss.config.js # PostCSS configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── next.config.js # Next.js configuration
├── README.md # Project README
└── yarn.lock # Yarn lock file