https://github.com/melitus/locateme-mern-stack-app
Boilerplate to start mern development
https://github.com/melitus/locateme-mern-stack-app
Last synced: 2 months ago
JSON representation
Boilerplate to start mern development
- Host: GitHub
- URL: https://github.com/melitus/locateme-mern-stack-app
- Owner: melitus
- License: mit
- Created: 2018-11-21T13:47:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-21T14:01:00.000Z (over 6 years ago)
- Last Synced: 2025-01-29T22:27:13.068Z (4 months ago)
- Language: JavaScript
- Size: 226 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Project Boilerplate
The new trainline desktop web app which uses:
- React
- Redux
- Redux-observable (Rxjs)
- Jest
- Express
- ESlint
- Webpack
- Storybook-ui
## Setup the project for development
git clone https://github.com/jabdul/package-boilerplate.git
npm install
## Start the project for development
Concurrently start everything (watch:client, watch:server, start:server)
npm start
or open three terminals and run one command in each
npm run dev:watch-client
npm run dev:watch-server
npm run dev:start-server
then open for testing on your local machine or on device.
If for some reason a computer name isn't available, also works.
## Run as production
- TBD
## Repo layout
├── build Compiled app code and assets (not staged in repo)
├── certs
├── config
├── dev-certs
├── jest Test runner configs
├── src
│  ├── client Client app (React)
│  ├── server Server app (API, server side rendering)
│  └── shared Shared code
└── webpack Webpack configs, utilities and dev server
### Branch naming
All branches should be named in line with their Acunote project ID and ticket number resulting in a listing that looks something like:
AGT-123
UIH-124
### Commit messages
Commit messages should make sense to people other than yourself.
Commits should also reference the project name and ticket number as follows:
`DWEB-123: Add title to header`
## Code Styleguide
#### General
##### Internationalization
All locale specific language strings should be stored in:
locales/en-gb_lang.json
All lcale specific configuration values should be stored in:
locales/en-gb_config.json
##### Function definitions
Function definitions should be fat arrow unless this is impossible for an edge case scoping reason
##### Import style
Imports should all ES6 style.
##### Order of imports
1. External libraries
2. Internal libraries
3. Project file
##### File naming
- Pascal Case
##### Function naming
- Function names should all be camel case
- Add a dollar suffix if the function returns an observable
##### Avoid classes to encourage functional programming
Apart from stateful React components and errors, obviously and a few very weird edge cases.
#### Server
TBD
##### Microservices interfaces
- All microservices need to have fixture mocks to make it easier to cope with the inevitable changes in the API shapes
#### Server communication
All endpoints should be accessible through the main api object.
More documentation needed
```
api.getUser$()
```
or if the API gets too large and ends up needing namespacing
```
api.user.getThing$()
```
#### Redux
TBD
#### React
##### Component folders
Folders should be structured as follows:
/Modal
Modal.container.tsx // Contains the connect wrapper
Modal.stories.tsx
Modal.styles.tsx
Modal.tsx
README.md
##### Connected component strategy
TBD
##### Event handler functions
TBD
##### Styling
All through Aphrodite, and where possible use the predefined styles in `ct-components/lib/styles`.
Use `rem` units instead of `px` assuming a `14px` base font size.
#### CSS
TBD