Learn more about our Vision
This project was bootstrapped with Create React App. You can learn more in the Create React App documentation.
It is following Atomic Design guidelines with the following changes:
We use different google maps API keys for different environment.
Staging / Production key are limited to our domain, and included in the repo .env.production
.
For using the map in development, You'll need to use a different key.
Steps:
.env.local
in your root directory (next to .env
)REACT_APP_GOOGLE_MAP_KEY='THE_API_KEY_HERE'
Also,to upload google maps API script for the street view component, the 'react-async-loader' library was used as described in https://github.com/edmund-dev/react-async-loader/blob/master/example/GoogleMap.jsx.
.
+-- assets // images, icons, audio etc.
+-- components // internal components (anything other than page component)
| +-- atoms
| +-- molecules
| +-- organisms
+-- hooks // common reusable hooks
+-- models // typescript interfaces and classes
+-- pages // page components
+-- services // REST API, websocket, storage etc.
+-- store // MobX stores
+-- style // css-in-js code and wrappers
| +-- _globals.ts // sizes, colors etc. - can be divided as project grow
| +-- theme.ts
+-- utils
+-- App.tsx
+-- index.html
+-- index.css // global styles (like fonts or reset/normalize css code)
Can be found in a separate file. Check them out here
Branch naming convention is as following
TYPE-ISSUE_ID-DESCRIPTION
examples:
feat-113-add-newsflash-location-on-map
fix-114-newsflash-location-not-accurate
Pull Request (PR) title convention is as following
[TYPE-ISSUE_ID]-DESCRIPTION
example:
[Feat-113] Add newsflash location on map
[Fix-114] Newsflash location not accurate
When TYPE
can be:
All PRs must include commit message with the changes description!
Branching system:
master - used for production
dev - anything else
* For the initial start, Use git clone command to download the repository to your computer (With write
privileges there is no need to fork the repo)
A standard procedure for working on an issue would be to:
git pull dev
dev
, like: refactor-137-making-pie-chart-generic-component
dev
git merge dev
and solve conflicts if they existdev
.If you never opened a PR on github - see our How To step by step tutorial
We have app server (written in express, a node.js-based framework) which supports 2 functions:
See API document
Active Environments:
Environment base file is .env
.
Each environment has a specific environment file which can be used to override .env
. for example .env.demo
will override .env
for Demo environment. For more info see CRA docs and this post about env-cmd
We use github actions for the following flows:
dev
branch to Staging Environment - https://anyway-infographics-staging.web.app/Live Preview Once you open a PR and all test pass successfully, a temporary live preview site will be created. Use it to see the changes and make sure everything works, before asking for a code review.
You can get the live preview url by pressing "Show all Checks" and than "Details" on the main PR page.
After clicking on "Details", the github action steps will be displayed. you can find the preview url under "Deploy" step (see image).
Since Create React App uses webpack under the hood, You can safely use named imports when working with Material UI components.
Git scripts include in package.json
to make working with git easier:
git:prune
- Remove tracking branches no longer on remote (run it around once a week)git:merged
- Lists branches that have been merged into dev
Our package.json
already include prettier
section.
If you have your own settings for VScode prettier extension
, make sure to use the project config.
We use singleQuote
as default. If having trouble with making the VScode extension use single quotes, please use the following config:
{
"prettier.jsxSingleQuote": true,
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"prettier.singleQuote": true
}
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open 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.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run 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 for more information.
npm run sb
Run storybook locally.