Bootstrap AdEx interface app

[ivopaunov]

Summary

Crate AdEx interface base architecture with react - hooks, context and providers. Research use of styled components and libs for date/time pickers, charts and maps

The lates design can be found here

Tasks

• [x] #2
• [x] Basic app architecture
• [x] Research and integrate framework for styled components if needed. We can go with styled components only.
• [x] Research and integrate react components for date/time pickers - [ ] Research and integrate react components charts - [ ] Research and integrate react components maps
• [x] Setup eslint and push hooks

[ivopaunov]

• MUI will be used for styled components and date/time picker
  • It's well maintained and have big community support and has almost everything we need. There are solutions with more ready to use components like blueprintjs (harder to customise) and Ant design (complete incl charts - but Chinese)
  • range date-picker comes with pro license (maybe we can go with free version only) (there is range date time picker in progress ) - it will be easy to make something that will work for as with the free version
  • [ ] TODO: decide what MUI styling engine to use

[ivopaunov]

• plot twist - BASE-UI - non styled react components + charts with react-vis
  • the time pickers are not the best, but the date picker is ok
  • react-vis is d3 based but there is possible drawback because of the node 14 requirement

[ivopaunov]

• one more variant - mantine
  • open-source, a lot of components, looks maintained https://github.com/mantinedev/mantine
  • ready to use hooks, for validation, click outside etc.
  • this is my favourite so far

[ivopaunov]

charts and world map

• VisX

[ivopaunov]

✅ Final, final we are using mantine for functional and styled components, date and time pickers + there are some useful hooks out of the box. @Maskln