web

README

Euphoria Frontend

This is the frontend for Euphoria project. It was bootstrapped with Create React App.

Used Frameworks

We built the application base on a lot of modern frontend technologies. The below list contains the main part of open source projects that Euphoria highly relies on.

1. React
2. React Router
3. React Query
4. MUI
5. Formik
6. Immer
7. Clsx

Project Structure

We have predefined the below directory tree for making this project more standard to develop.

├── public
├── src
│   ├── assets
│   ├── components
│   ├── constants
│   ├── helpers
│   ├── layouts
│   ├── pages
│   ├── routes
│   ├── schema
│   ├── service
│   ├── store
│   └── styles
└── tsconfig.json

public

It contains static files such as index.html, javascript library files, images, and other assets. We put all the favicons in this file because these file are unchanged and would be move to the root directory of the final distribution.

src

It contains the source code of the project.

src/assets

It contains the assets like images, css & fonts.

src/components

It contains the reusable atomic & molecular components. Each component folder will contain the component, test & documentation file.

For example, when you need a Button component. It could be divided into five files explained below:

• Button/Button.tsx: It contain the actual component code.
• Button/Button.style.tsx: It contain the styles.
• Button/Button.test.tsx: It contain the Button unit test cases using jest.
• Button/index.tsx: It merely imports the component file and exports this component.

src/constants

It contains the constant file. Eg : Regex & other application generic constant.

src/helpers

It contains the reusable helper functions.

src/layouts

It contains the layout components. Layout is the common top wrapper component usually will contain navbar, sidebar and children components.

src/pages

It contains the page component. Each component can layout component as top wrapper based on the page structure. Each component exported as default, since lazy loading works with default export.

src/routes

It contains the page routes. Dynamic configuration is best with working with routes. Usually it has a nested array to render the routes.

src/schema

It contains the schema files using the yup. It used with formik for field validation.

src/service

It contains the dynamic http request function using axios. Axios is a promise-based HTTP Client for node.js and the browser Axios can be used for api request cancellation, featured with request and response interceptors.

src/styles

It contains the styled components reusable breakpoints file, global styles & theme constant file.

src/App.tsx

App Component is the main component in React which acts as a container for all other components.

src/config

It contains the config files using the env.

src/index.ts

It contains method to render the application into real dom.

Documentation

Index

• func FrontendFiles() fiber.Handler

Functions

func FrontendFiles

func FrontendFiles() fiber.Handler

FrontendFiles would wrap the Go embed files into a fiber handler.