f2e-2021

This is a monorepo containing all work related to 2021 F2E challenge.

Special thanks to

• hexschool team for designing user stories
• UI mockups contributed by various designers under CC BY-NC 3.0 TW license
• open data powered by Public Transport data eXchange (PTX).

Introduction

This repository has been bootstrapped by nextjs-template and managed by lerna in the following folder structure

• /apps - this contains all published applications on Vercel Platform
  • scene - exploring taiwan places of interest, designer Hanali
  • ubike - getting nearest YouBike and search for cycle paths, designer Viola
  • bus - getting taiwan bus info in real time! Designer Hanali
• /libs - this contains all shared internal libraries, e.g. ptx services to connect to PTX api

Apps folder structure

• public - all static assets publicly available under /{fileName}.{fileExtension}
• src
  • pages - next.js page folder with built-in route support
  • components - store all individual components
  • constants - shared fixed values for components
  • hooks - some utility hooks to encapsulate logic
  • redux - redux store with redux toolkit and support RTK query
  • services - business logic about api calls & mapbox
  • utils - some custom utils to save some space when working on components
  • theme - following Chakra UI theme structure
  • types - extra type folder to add global or 3rd party types

3rd party libraries

• Mapbox GL JS: a client-side JavaScript library for building web maps and web applications with Mapbox's modern mapping technology

Getting Started

Current running local environment:

• OS: macOS Monterey 12.0.1 Apple chip or Ubuntu 20.04.2 LTS
• Node.js: v14.18.1
• pnpm: v7.16.1

Checkout to individual apps folder, copy required environmental variables in .env.sample into .env.local and update required fields

e.g. for bus

cd apps/bus

cp .env.sample .env.local
vi .env.local # update required fields and save

pnpm # this will build libs if required
pnpm dev

You should be able to visit localhost:3000 to view the application successfully

Dependencies

This project will mainly follow the dependencies of nextjs-template, while installing individual tools specific for each apps or libs

Common dependencies

1. Chakra UI
2. Emotion
3. Framer Motion
4. Redux Toolkit
5. RTK Query
6. next-api-handler
7. next-head-seo

Development dependencies

1. TypeScript
2. ESLint with Airbnb config
3. Prettier
4. Pre-commit & pre-push git hooks powered by lint-staged and husky
5. Commitlint
6. Lerna

Deployment

All apps will be deployed on Vercel with a custom subdomain under howardism.dev

License

All rights reserved.