Kaleidoscope @ CityScape

Kaleidoscope @ CityScape: A ad-free location-based curated information in a single visual with zero customer effort!

Comment

Inspiration

Getting information while being on the go from several sources at the same time is often a need without having to go through a plethora of apps. It becomes especially hard for one to get an ad-free experience through several data sources that may drive one's decisions in a given location. It has happened several times to me, where I have not been aware of the local holidays, good local cuisines or public places to visit. Getting access to this kind of relevant information at a glance is something that would be very handy, especially during short business trips.

There are many sources of location-based data but not **one visual with all relevant data for a location**

What it does

Kaleidoscope @ CityScape aims at bringing a location-based strategy of curating information for the user in a frictionless manner. No advertisements! No Login ! Just information curated about your current location.

The product aims at curating information to capture the following data points in a visually appealing manner for the user on the web or mobile

  1. Pollution
  2. Weather
  3. COVID
  4. Local currency
  5. Time zone
  6. Local holidays
  7. Places of Interest
  8. Foods of Interest

How we built it

In order for us to start building this out, we first focused on our team composition. Our team is composed of four people. We onboarded skills in UX, back-end, and front-end. We combined that into a product idea that led us to the development of Kaleidoscope @ CityScape.

We followed the standard practices of identifying two key elements:

  1. User Experience by developing prototypes in Figma
  2. Research & Identification of API infrastructure that will help us curate relevant information for the product

We have used open-source and/or free-tier API infrastructure to source our information whilst putting GraphQL as a schema first design for front-end:

Challenges we ran into

There are three key challenges that we had to face in order to bring Kaleidoscope @ CityScape to life:

  • API research & trials Picking the first available API for seeking our data points was not the approach we could use. This process involved for us to go through a research methodology of creating a test funnel based on the following parameters
    • Richness of information available
    • API responsiveness
    • API tier ( open source, free tier & / or only commercial )
    • Ability to drive information look-up through upper-funnel location information
  • Accurate location algorithm We do not rely on one single way of seeking the correct location of the user. We have taken into account the advertisement and location blocking mechanisms in browsers by building a waterfall algorithm that must return a location at all times. It uses the following sources in decreasing priority:
    • FingerprintJS
    • Browser GeoLocation API
    • IP Geolocation
  • Foods of Interest It is not easy to get this information, as usually this is captured via user experiences in hard-to-parse ways or entailed through non-API-based interfaces. We solved this problem by using an Open- AI GPT-3 trained model to seek actual information by providing location-based data and then applying simple NLP tokenization in order to get relevant foods of interest.

Accomplishments that we're proud of

The whole team is excited to learn GraphQL as a first pass and also explore ways of using AI-based techniques to enrich location information. We think that we have truly put the technology to use by abstracting the front-end from complex orchestration of API infrastructure and moved it to schema first approach thus providing for a cleaner front-end developer approach.

We are happy to see that our user experience, schema first design & back-end all has come together to create a No advertisements! No Login ! web app that provides curated data for your current location!

What we learned

  • Stepzen CLI comes handy in order to create Graphql schemas for any rest endpoint using the import command.
  • Stepzen playground is a developer-friendly way to deploy & test Graphql endpoint in a jiffy.
  • Directives
    • @matrerializer : Used to fetch cascaded information using country/lat/long to get data from different API. No need to write custom resolvers.
    • @rest : TransformRest Property: This has helped in transforming the API response before Stephen api responds the data as the ultimate result.
    • @sequence : Used to fetch derived synchronous API e.g. get GcalCode for a country & then Holidays using that Gcal code.
    • transformREST: Takes away the need for building custom transformers using Server Side Code.

What's next for Kaleidoscope @ CityScape

We can achieve two more aspects of curation:

  1. Develop a recommendation schema that can present our information via GraphQL interfaces and power context-based personalization enabled through macro factors as part of the user journey
  2. Release more Kaleidoscope information schema that can power stock, news, and stories

Uptime Status

Operational Status

Built With

  • aqi-api
  • frankfurter-api
  • github-io
  • google-calendar-api
  • graphql
  • open-ai
  • opentrip-maps
  • react
  • stepzen
  • tailwind-css
  • type-script
Share this project:

Updates