Frontend Architecture

The main framework for this project is using Next.js.

• Next.js
• React
• Tailwind CSS (No longer used)
• Yamada-UI
• Storybook
• React testing library

Folder structuring:

• app - folder used to store our pages constructed by components
• components - folder to store all components
  • composite - any components that accommodates generic components
  • generic - components that are generic and are the foundation towards composite components
  • utils - any shared utility methods that are used in components

Layout:

├── app
│   ├── globals.css
│   ├── layout.tsx
├── components
│   ├── composite
│   └── generic
│   │   ├── ConfirmationDialog
│   │   │   ├── ConfirmationDialog.test.tsx
│   │   │   └── ConfirmationDialog.tsx
│   └── utils