Giter Club home page Giter Club logo

f2e-bus-frontend's Introduction


Project license

Pull Requests welcome

Table of Contents

About

A bus search application for providing bus information in Taiwan.

Which let you:

  • Find bus station or route information by search terms.
  • Find the closest bus station near you by searching your location.

Our goal is providing more easiest and fastest way to get the bus information, with clean UI / UX and reliable software system.

Screenshots

[?] Please provide your screenshots here.

Home Page Station Page Route Page

Feature List

  • System

    • System will save your preference by default, and keep it 1 day.
    • If any error occur, system will that you knows what happened by send you notification.
    • System will ask your geolocation, but not force you.
    • System will let you know they are busy by give you a cute car animation.
  • Home Page

    • Search

      User can search by terms using search bar,

      We make user interface as simple as possible to reduce the complexity of using, which depends on Hick's law.

    • Recommand Search

      We provide recommand search results when page load, which using user current position by default.

    • Realtime Search

      We provide realtime search when user typing, which will update the recommand search on the fly.

    • Fuzzy Search

      When user doesn't get the result they want, they can just hit search submit or hit enter, system will provide the search results for them, which implement fuzzy search behind the scene.

      The priority of search below:

      1. if term match the route name exactly or there's only one route result, will navigate to route with route id.
      2. if term match the station name exactly or there's only one station result, will navigate to station with station id.
      3. if there have many stations in results, will navigate to locations with station results.
      4. if there have many routes in results without any stations, will stay at home but highlight the match results below.
      5. if there's no match, will navigate to notfound with your term.
    • Recently Search

      When user navigate to the result, system will save the search history automatically, and present on the UI. system will keep your record 7 days, after that will expired.

  • Map

    • Was implemented by leaflet, react-leaflet and mapbox.
    • We using light-v10 mapbox style.
  • Location Page

    • Fuzzy Result

      When system get multiple stations results, will lead user to locations page, user have a right to can choose the results by themself.

    • Nearby

      User can find nearby stations by specify location.

    • URL

      You can send url link to your friends, system will give them same result as yours.

    • Station List

      You can click station in list to navigate.

    • Map

      • We will give you marker with number on top, which map to the index of result list.
      • You can click marker to navigate.
  • Station Page

    • URL

      You can send url link to your friends, system will give them same result as yours.

    • Routes List

      • Routes information in every item will show:

        • Route name
        • Next arrival time
        • Route departure and destination
      • We provide current trip status below:

        • Default
        • Not Depart
        • Skipped
        • Terminate
        • Unscheduled
      • Arrival Time

        System will give you next arrival time every 5 seconds.

    • Map

      • We highlight the marker which you currently selected, with station name on top.
      • We will give you nearby station with number on top, which map to the index of result list.
      • You can navigate to nearby station with click nearby station marker.
  • Route Page

    • URL

      You can send url link to your friends, system will give them same result as yours.

    • Map

      • We give user current position which depends on Geolocation from user's device.
      • We will give you station marker by direction you currently selected.
      • We will give you station marker with number on top, which map to the index of result list.
      • When user zoom-in the number and name will show on top of station marker.
      • You can navigate to station arrival time with click on station marker.
      • We will give you route path.
    • Station List

      • A tabs for changing sub routes between multiple direction.

      • Station information in every item will show:

        • Station name
        • Next arrival time
        • Trip Status
      • A toggle for changing arrival time between remain or actual time.

      • When user click on station will change map current focus marker.

    • Route Information

      • A tabs for navigate section in information page.

      • Route name

      • Departure and Destination

      • Serve Location

      • Payment

      • Schedule

        • Weekday
        • Weekend
        • Flexible Timetable
        • Fixed Timetable

Built With

Frontend

React based project with Typescript.

  • Vite
  • Tailwindcss
  • React
  • React Router
  • Redux with RTK-Toolkit
  • Leaflet
  • Mapbox API
  • Framer Motion
  • date-fns
  • ramda
  • Vercel

Backend

Python with FastAPI Framework.

  • Poetry
  • FastAPI
  • Google Geocoding
  • Redis
  • GCP CloudRun

Getting Started

Prerequisites

Please make sure you already have:

Installation

npm install

or using

yarn

Develope

npm run dev

or using

yarn dev

which will open https://localhost:3000 for this project,

NOTICE Because we using Geolocation API, this feature is available only in secure contexts (HTTPS), please make sure run on https for local development.

Roadmap

See the open issues for a list of proposed features (and known issues).

Support

Reach out to the maintainer at one of the following places:

Project assistance

If you want to say thank you or/and support active development of Taiwan Bus Search:

  • Add a GitHub Star to the project.
  • Tweet about the Taiwan Bus Search.
  • Write interesting articles about the project on Dev.to, Medium or your personal blog.

Together, we can make Taiwan Bus Search better!

Contributing

First off, thanks for taking the time to contribute! Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are greatly appreciated.

Please read our contribution guidelines, and thank you for being involved!

Contributors

For a full list of all authors and contributors, see the contributors page.

Security

Taiwan Bus Search follows good practices of security, but 100% security cannot be assured. Taiwan Bus Search is provided "as is" without any warranty. Use at your own risk.

For more information and to report security issues, please refer to our security documentation.

License

This project is licensed under the GNU General Public License v3.

See LICENSE for more information.

Acknowledgements

Thanks you very much, can't bring this project out without:

f2e-bus-frontend's People

Contributors

kayac-chang avatar alphatero avatar kimberlyyen avatar huskyhsu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.