Aireio

Short Explanation

Aireio is NextJS web app for finding remote work spaces in cities around the globe. Cities are initially compiled using the Google Places API, with rich place data added via the Open Street Map API. Users are then able to self report details on each workspace, including amenities such as power outlets, wifi, seating, and workspace comfort. This data is then compiled into a 'Deskability' score to help users choose a work space that is right for them.

Demo Video

Here is a short video demo of the Aireio and its features:

Project Goals

As someone who is constantly traveling for work, I often find myself in need of a quiet place to work. Whether I'm in a new city or just looking for a change of scenery, I want to be able to easily find a remote work space that meets my needs. That's why I created Aireio. My goal was to allow users new discover new co-working centers, libraries, and cafes, and find the perfect place to work wherever they are.

Tech Stack Used

The Aireio project uses a range of technologies, including:

• NextJS: a React framework for building web applications, used to create the front-end of the Aireio app. I chose NextJS for its speed and ease of use, as well as its support for server-side rendering and static site generation in order to make my site discoverable via SEO.
• TypeScript: a statically typed superset of JavaScript, used to add type checking and improve code quality in the Aireio app. I chose TypeScript for its ability to catch errors early and improve the overall maintainability of my code.
• Tailwind CSS: a utility-first CSS framework, used to style the components and layout of the Aireio app. I chose Tailwind CSS for its ease of use and flexibility, as well as its support for responsive design and custom theming.
• ShadCN: a react component library with a large number of components and utilities. I chose ShadCN for its ease of use and flexibility, as well as its support for Tailwind CSS and TypeScript.
• Supabase: an open-source Firebase alternative, used to store and manage the data for the Aireio app. I chose Supabase for its ease of use and flexibility, as well as its support for real-time data synchronization and user authentication.
• Cloudflare Pages: a cloud-based platform for deploying and hosting web applications, used to deploy the Aireio app. I chose Cloudflare Pages for its speed and reliability, as well as its support for custom domains and SSL certificates.
• Google Places API: a service that provides rich location data for places around the world, used to compile the initial list of cities for the Aireio app. I chose the Google Places API for its comprehensive coverage and detailed place data.
• Open Street Map API: an open-source map data service. With more niche place information, used to add rich place data to the existing workspaces.

Features

Below are some of the key features of the Aireio project:

New City Search

Using the Google Places API and autocomplete city suggestions, Aireio allows users to search for new cities and discover remote work spaces in those areas. When a user searches a new city that does not exist in the database, the app will automatically fetch the city's data from the Google Places API and create workspaces for that city.

Existing City or Country Selection

THe home page of aireio displays a list of existing cities and countries that users can select to discover remote work spaces in those areas. Users can view a list of the most popular cities and countries, as well as search for specific locations using the search bar.

Map Location and Radius Selection

After selecting a city, users can view a map of the area with pins indicating the locations of remote work spaces. Users can filter the map by radius to view workspaces within a certain distance of their current location. This feature allows users to easily find workspaces that are close to them and within a convenient distance.

User Reported Workspace Details

On the workspace details page, users can view information about a specific remote work space, including its name, address, and amenities. Users can report amenity availability and quality to contribute to the 'Deskability' score for a given workspace, which is calculated based on user-reported details such as power outlets, wifi, seating, and workspace comfort. This feature allows users to make informed decisions about which workspaces are right for them.

Contribution Points and History

Users are awarded contribution points for reporting workspace details, which are displayed on their profile page. Users can view their contribution history and see how many points they have earned for each report. This feature encourages users to contribute to the app by reporting accurate and up-to-date information about remote work spaces.

Future Features

Some of the features I plan to add to the Aireio project in the future include:

• Location pins on the map for each workspace. This will allow users to easily see the location of each workspace on the map, distance, and direction from their current location.
• User submitted photos and reviews for workspaces. This includes things like photos of the workspace, current prices, and menus.
• User comments and discussions on workspaces. This will allow users to ask questions and share information about specific workspaces.
• Shareable workspace lists. Users will be able to create and share lists of their favorite workspaces with friends and colleagues.
• Freemium model for users to pay for premium features such as advanced search filters, wifi passwords, and special location discounts.
• Add more social Oath providers for user authentication, such as Facebook, X, and GitHub.
• Realtime check-in status and meet ups. Users can see how many people are currently working at a workspace and plan to meet up with other users.

Bugs and Optimizations

Some of the bugs and optimizations I plan to address in Aireio include:

• Speed of loading of location images on initial fetch. Currently, the app fetches images from the Google Places API, and caches them individually, before displaying them, which can slow down the loading time of the app. I plan to optimize this process by adding placeholder images directly from the API on initial fetch.
• Server timeout when fetching large number of new locations. Currently, the app fetches new locations from the Google Places API in batches of 20, which can cause a server timeout if the number of locations is too large. I plan to optimize this process by increasing the batch size and adding pagination to the fetch request.
• Points number not updating in real-time in navbar. Currently, the app updates the user's points number only when the user logs in or refreshes the page. I plan to optimize this process by adding real-time updates to the points number when the user reports a new workspace detail.