103 lines
3.6 KiB
Markdown
103 lines
3.6 KiB
Markdown
# Getting Started with Freeland
|
|
|
|
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
|
|
|
## Available Scripts
|
|
|
|
In the project directory, you can run:
|
|
|
|
### `make dev`
|
|
|
|
Runs the app in the development mode.\
|
|
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
|
|
|
The page will reload if you make edits.\
|
|
You will also see any lint errors in the console.
|
|
|
|
### `make test`
|
|
|
|
Launches the test runner in the interactive watch mode.\
|
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
|
|
|
### `make build`
|
|
|
|
Builds the app for production to the `build` folder.\
|
|
It correctly bundles React in production mode and optimizes the build for the best performance.
|
|
|
|
The build is minified and the filenames include the hashes.\
|
|
Your app is ready to be deployed!
|
|
|
|
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
|
|
|
### `make container`
|
|
|
|
Builds up application container for production and tags it with a `freeland-frontend` tag.\
|
|
After process completion port `80` will be exposed inside a container to access files generated by `make build`
|
|
|
|
### `make build-docker`
|
|
|
|
Creates docker container ready for deployment
|
|
|
|
## `make clean`
|
|
|
|
Drops **build** process artifacts. It will not remove docker containers due to possible other project named\
|
|
containers intercections.
|
|
|
|
## Learn More
|
|
|
|
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
|
|
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
|
|
|
## Code sections division
|
|
We care about our code appearance in text editor. That's why we are placing some
|
|
additional comments to seperate code parts using next style:
|
|
|
|
/\* -------------------------------------------------------------------------- \*/
|
|
|
|
/\* User service functions \*/
|
|
|
|
/\* -------------------------------------------------------------------------- \*/
|
|
|
|
Or
|
|
|
|
/\*-------------------------------- Hello --------------------------------\*/
|
|
|
|
Or
|
|
|
|
/\*-----------------------------------------------------------------------\*/
|
|
|
|
|
|
To place such comments for division code sections use [this](https://marketplace.visualstudio.com/items?itemName=stackbreak.comment-divider) extention.
|
|
|
|
## Domain folder structure
|
|
|
|
Inside specific domain you can see that we have next folders structure:
|
|
|
|
- domain folder (e.g.: user)
|
|
- controller
|
|
- some specific or general domain models (e.g. `userViewModel.ts`)
|
|
- data
|
|
- Data transfer objects
|
|
- Possible actions (e.g. `userActions.ts`) and action types definitions
|
|
- Reducer rules for redux (e.g. `userReducer.ts`, rules to change your Redux state on specific action type)
|
|
- Service (e.g. `userService.ts`, API interactions)
|
|
- Repository/Store implementation (e.g. `userSlice.ts`)
|
|
- domain
|
|
- Entity definition
|
|
- Domain model definition
|
|
- Repository/Store interface
|
|
- useCases (e.g. `getUserUseCase.ts`, use cases of domain)
|
|
- views
|
|
- pages
|
|
- specific components
|
|
|
|
## Network layer
|
|
|
|
We use [Axios](https://github.com/axios/axios) for network interactions
|
|
|
|
## Css styles and interactive components
|
|
|
|
As a CSS framework we are using [TailwindCSS](https://tailwindcss.com/)
|
|
|
|
For UI/UX elements use [HeadlessUI](https://headlessui.com/) |