Harbour.Space University challenge

[hozblok]

My stack:

• React
• Jest & React Testing Library
• MobX - state manager
• BEM & SASS
• create-react-app & react-scripts

What was done:

1. All colors have been placed in a light theme file: harbour-ui/src/styles/colors/light.scss In the future, we can add theming here.
2. I check whether mobile client or desktop through a provider & context: harbour-ui/src/providers/mobile/MobileProvider.tsx and harbour-ui/src/providers/mobile/MobileContext.ts. This gives more fine-grained customization inside class modifiers and react components. The code looks much cleaner compared to @media everywhere
3. FAQ Component can receive data from the API, filter it, and store the open/close state of question cards. MobX and jest tests helped a lot.
4. I tried to put all the available typography into a separate file for the entire project. harbour-ui/src/styles/mixins.scss
5. Animation partially made for buttons in FAQ.
6. The animated slider is based on flickity
7. Components are arranged according to BEM reuse rules.

Dev mode:

1. clone the repo
2. npm i
3. npm run start

Tests:

1. clone the repo
2. npm i
3. npm run test *

Production build:

1. clone the repo
2. npm i
3. npm run build

I have deployed application here:

https://harbour-murex.vercel.app/