web

README

This is the frontend for BookStairs project.

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 BookStairs highly relies on.

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

Project Structure

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

├── env
├── public
├── src
│   ├── assets
│   ├── components
│   ├── config
│   ├── constants
│   ├── helpers
│   ├── layouts
│   ├── pages
│   ├── service
│   └── 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 files are unchanged and would be moved 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/main.tsx: It merely imports the component file and exports this component.

src/config

It contains the config files using the env.

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

React Router 6 is the router library we used in this project. We put all the routed pages in this directory by following the Next.js routing style.

You can use all the router feature out of box and nested router is also supported.

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/main.tsx

It contains method to render the application into real dom.

Documentation

Index

• func AvailableLanguages() []string
• func Resources() fs.FS
• type Language
  • func FindLanguage(code string) Language

Functions

func AvailableLanguages

func AvailableLanguages() []string

AvailableLanguages would load the i18next translate definition from the JSON files and return the language codes. It would parse the JSON files only once.

func Resources

func Resources() fs.FS

Resources return a go embedded web static files in root path.

Types

type Language

type Language interface {
	Code() string           // The short code of this language. Such as zh_CN, en_US, ja_JP
	Keys() []string         // Return all the available keys in this language pack.
	HasKey(string) bool     // Does this language has this translate key.
	Value(string) string    // Get the real translate result related to this key.
	Params(string) []string // Get the value template related formatter arguments.
}

func FindLanguage

func FindLanguage(code string) Language

FindLanguage would load language by the language code. We would return nil if the language code isn't available.