Web application of the SlackMap.
- React
- Its bootstrapped with create-react-app. The defacto for client-side React apps.
- Redux
- Redux toolkit and RTK Query is used for state management and data fetching.
- Material UI
- All the UI components are from MUI and try to follow the best practices like theming etc.
- AWS Amplify
- Authentication with AWS Cognito
- Basic Analytics with AWS Pinpoint
- Typescript
- Everything is made with TS and strict mode is enabled to make sure the code is type safe and easy to maintain for long time.
- Mapbox
- Mapbox GL JS and React Map GL (wrapper) is used for map rendering and everything related to map. It's essential to read ALL the docs of Mapbox GL JS to understand how it works. Checkout examples from React Map GL as well.
- Hosting
- Webapp is hosted with Cloudfront/S3.
- api
- Rest api and types for RTK Query. They contain all the calls and operations to the web api.
- app
- Anything related to the app itself like components pages etc.
- pages
- Represents basically every path in the application and the components inside are related to what you see what you visit the page
- components
- mutual components used in multiple pages
- store
- Things related with redux and redux toolkit. No need to touch. Won't change frequently.
- styles
- Generic MUI styles. No need to touch. Won't change frequently.
- utils
- common functionalities used all over the application.
Read the documentation of the libraries used in the project to understand how they work. Especially Redux Toolkit, MUI and MapboxGL JS.
yarn install- create
.env.devfile in the root directory and look at the.env.examplefile for the required variables. Ask from us for the values. yarn startto start the app. It uses the development stage not the production stage data so you can add anything you want freely.yarn checkTs,yarn lint,yarn buildto verify fundamental things before finishing your work.