Frontend Technical Overview - bluecolab/BlueColab_MobileDataViz GitHub Wiki

The tech stack is list of all the languages, frameworks, UI components etc. we use. Hover the ⓘ to learn more. The specific versions of each software (if needed) are listed in the package.json.

• Languages
  • TypeScript
• Library ⓘ
  • React ⓘ
• Framework + UI Components ⓘ - React Native ⓘ - Expo ⓘ
• Visualizations ⓘ - Victory Native ⓘ
• Styling ⓘ - Tailwind + Nativewind ⓘ
• Routing ⓘ
  • Expo Router ⓘ
• API Requests
  • Axios ⓘ
• Date Handler ⓘ
  • Luxon ⓘ
• Local Previewing
  • Expo CLI ⓘ
• Bundler ⓘ
  • Metro ⓘ
• Compiler ⓘ - Babel ⓘ
• Build ⓘ
  • Expo EAS ⓘ
• Linting ⓘ
  • ESLint ⓘ
  • Prettier ⓘ

We use file-based navigation provided via the Expo Router for navigation.

Please follow this structure when creating new files:

aquawatch_mobile_app - Parent folder, for all sob-directories and config files
├───app - For all app pages and navigation related files
│   └───(tabs) - Our main navigation pattern, all pages should be under this directory
├───assets - For all images, icons, and fonts
├───components - For all of the custom components (building blocks of pages)
├───contexts - For all of the custom contexts (a way to share data between all pages and components)
├───hooks - For all of the custom hooks (reusable logic for state, data fetching, etc.)
├───patches - For patches needed to fix broken npm packages
└───types - For all custom TypeScript type definitions

Each of the above directories may be organized even further, grouped by similar functionality.