DEV Community

Cover image for Intercity Ride-Sharing App - Amplify Hackathon 2023
Shaista Aman Khan
Shaista Aman Khan

Posted on

Intercity Ride-Sharing App - Amplify Hackathon 2023 - Community Sharing Made Easy

Sharewaow is a community ride-sharing app that connects people traveling from one city to another. Riders can share rides with others going to the same destination, either for a fee or for free. Sharewaow is a great platform to save money on transportation, reduce your carbon footprint, and meet new people.

How Sharewaow Works To use Sharewaow, simply create an account and enter your travel details. You can then search for rides that are going to your destination. If you find a ride that you're interested in, you can book it and pay the driver directly. You can also offer to share your ride with other people, either for a fee or for free.

Benefits of Sharewaow There are many benefits to using Sharewaow, including:

Save money on transportation: Sharewaow is a great way to save money on transportation. You can split the cost of gas with other riders, or you can even offer to carpool for free.

Reduce your carbon footprint: Sharewaow is a great way to reduce your carbon footprint. By sharing rides, you can reduce the number of cars on the road, which will help to lower emissions.

Meet new people: Sharewaow is a great way to meet new people. You can meet people who are interested in the same things as you, and you can make new friends along the way.

SDG Goals Addressed Sharewaow addresses the following SDG goals:

SDG 13: Climate action: Sharewaow helps to reduce carbon emissions by reducing the number of cars on the road.

SDG 11: Sustainable cities and communities: Sharewaow helps to create more sustainable cities and communities by reducing traffic congestion and pollution.

SDG 17: Partnerships for the goals: Sharewaow is a partnership between individuals and communities to create a more sustainable future.

Inspiration I use to travel a lot and especially on holidays when everyone is traveling to their hometowns for vacation (celebrations like Eid, Christmas etc). In those days subway transportation and railways are fully packed. One can hardly find a space even on advance payments.

On the other hand, some people take their vehicles with them. It's beneficial for them to earn extra bucks while traveling to their homes. There are many inspirations for making an intercity ride-sharing app. Here are a few:

The rise of ride-sharing apps The success of ride-sharing apps like Uber and Lyft has shown that there is a demand for on-demand transportation. An intercity ride-sharing app could tap into this demand by providing a way for people to share rides between cities.

The need for more sustainable transportation options Intercity travel is a major source of greenhouse gas emissions. An intercity ride-sharing app could help to reduce these emissions by encouraging people to carpool or share rides with other travelers.

The desire to connect with other people Intercity travel can be a lonely experience. An intercity ride-sharing app could help to connect people with other travelers who are interested in the same things.

Sharewaow is a great way to save money, reduce your carbon footprint, and meet new people. If you're looking for a more sustainable way to travel, Sharewaow is a great option.

Github Link

Web App Link

Prerequisites Fundamental knowledge of React Familiarity with Figma AWS Account and Service Knowledge Passion to develop something!

Data Model Before you jump into the development, draft down all necessary data models and access patterns. It's very important to see all access patterns because when you start working on UI and add or remove some attributes, it messes up with data and its relationships.

UI Design in Amplify Studio
Amplify studio facilitates backend devs to easily develop amazing UI with minimal designing knowledge in Figma. One can easily generate React Components with Amplify Studio in few clicks.

Steps to Develop Sharewaow Here is the summary of steps on how we developed a web app for intercity ride sharing on AWS Amplify using Amplify Studio:

Designed the app in Figma Created app's UI components on Figma by template AWS Amplify UI Kit and then defined the app's data models and interactions.

Import the Figma design into Amplify Studio Amplify Studio will automatically generate React code for the app's UI components which was then customized as needed.

Configure the app's data models and storage Then added Dynamodb tables and Storage from Amplify Studio. Dynamodb Tables are added automatically when we created datamodels. We also configured storage for images.

Configure the app's authentication Then we added a Cognito user pool from Amplify Studio by adding Auth for the app. You can also configure the app to use other authentication providers, such as Google or Facebook but for simplicity, we used default Auth settings.

Deploy the app to AWS We designed UI in Amplify Studio and hosted the frontend by GitHub repo and used Amplify pull/push commands to deploy the backend.

How to Make your own copy of Sharewaow
First of all log in to your AWS account and go to AWS Amplify from menu.

Image description

Continue to Start in Amplify Studio.

Image description

Give it a name "Sharewaow" and "Confirm Deployment". It will take sometime to setup studio.

Launch Studio.

Select Data and Setup on the left navigation menu.

Image description

Define your Rides data model.

Image description

Save and Deploy

Image description

Now switch to Figma and search "Amplify UI Kit" in community search.
Switch to UI Library and Sync with Figma to get the Template to start with

Image description

Then "Get a Copy" and start designing your UI Components in "My Components" Page

Image description

You can directly configure your UI components or Bind them with data model in UI Library.

Image description

Setup a Local AWS Amplify Application

Create a React app using your command line interface and install the AWS Amplify CLI:

npm install -g @aws-amplify/cli

Switch back to Amplify Studio and click Local Setup Guide on top right corner. Here you will receive an amplify pull command for your application - note that the application ID will be specific to your application. Copy this command by clicking on it, then run the command in your CLI and allow CLI to access your amplify project.

Amplify Configure
Install Amplify libraries and React components.
npm i aws-amplify @aws-amplify/ui-react

and start building sharewaow app as mentioned in github repo here

Amplify Studio is bit new and it has limited documentation and video tutorials which makes it hard to understand and design UI.

Data Manager is also a challenge but useful feature. But to properly understand your data and its relations try to spend time on data entry.

Amplify Pull command and version upgrade was a tough challenge. Through out the hackathon development my backend folder disappear and took long time to keep things on track.

Team Members Developer - Shaista Aman

Cloud Engr -Shadab Aman

Nayab Aman - UI/UX

Future Work This is not a one-day idea to work on. In developing countries, people often need items on a daily basis. For this hackathon, we just implemented ride sharing but food, clothes, and books sharing is also in the pipeline. Moreover, some other features in consideration are:

Items Request Flow - so that users can request their needed items.

Location - As the web app loads it will ask the user for location so that Sharewaow can recommend items near the user.

Security - Hide sharer phone number and prompt the user to log in before seeing contact details for sharer.

AWSAmplify #AWSAmplifyHackathon #Ridesharing #Carpooling

Top comments (0)