https://github.com/michaeljohnn/broccoli
broccoli
https://github.com/michaeljohnn/broccoli
Last synced: over 1 year ago
JSON representation
broccoli
- Host: GitHub
- URL: https://github.com/michaeljohnn/broccoli
- Owner: michaeljohnn
- Created: 2022-05-10T03:01:42.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-10T03:02:46.000Z (about 4 years ago)
- Last Synced: 2025-01-11T04:53:19.378Z (over 1 year ago)
- Language: TypeScript
- Size: 261 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Broccoli Invite
## Available Scripts
In the project directory, you can run:
### `npm install`
install dependencies
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:9000](http://localhost:9000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm run test`
run unit tests using jest.
### `npm run build`
Builds the app for production to the `dist` folder.
## File structure
```
.
├── README.md
├── __tests__
├── coverage
├── dist
├── jest.config.js
├── package-lock.json
├── package.json
├── public
├── src
│ ├── components
│ │ ├── footer
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── header
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── layout
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ └── modal
│ │ ├── index.less
│ │ └── index.tsx
│ ├── pages
│ │ └── invite
│ │ ├── components
│ │ │ ├── invite-content
│ │ │ │ ├── index.less
│ │ │ │ └── index.tsx
│ │ │ ├── invite-form
│ │ │ │ ├── index.less
│ │ │ │ └── index.tsx
│ │ │ └── success-panel
│ │ │ ├── index.less
│ │ │ └── index.tsx
│ │ ├── index.less
│ │ └── index.tsx
│ ├── services
│ │ ├── apis
│ │ │ └── invite.ts
│ │ └── invite.ts
│ ├── global.less
│ ├── index.html
│ ├── index.tsx
│ └── typings.d.ts
├── tsconfig.json
└── webpack.config.js
```
## Architecture Introduce
### Fromework Tools
React18 + Webpack5 + Typescript + babel7 + less + jest + eslint
### Unit tests
UI and function unit tests using jest.
Cover the following conditions:
* name field do not validate properly
* email field do not validate properly
* confirmEmail field do not equal to email field
* all form fields validate properly
* api response with status 200
* api response with status 400
### Performance optimization
* Webpack externals
* Webpack code splitting
* React.lazy & Suspense
### Type system
* typescript
### Browser compatibility
Cover browsers account for 96.72% of all users globally.
```
"browserslist": [
"defaults",
"> 0.05%",
"cover 99.5%"
]
```
```
browserslist --coverage '> 0.05%, defaults, cover 99.5%'
>> These browsers account for 96.72% of all users globally
```