Inspiration

As car owners, many of us develop a bond with our vehicle, as we go on journeys and create memories with it. DriveFord was created as a way to track these experiences and share them with those we care about, while establishing a connection with the larger community of Ford owners.

What it does

Our app allows users to see simple information regarding their car like where it's located and diagnostics information along with a feature that allows vehicle owners to connect to their vehicle on a more personal level while sharing this journey with their vehicle with the outside world. This feature has two main parts. Initially the users are granted badges for different accomplishments they complete with their cars. For example, driving their first 100 miles or traveling to Dearborn, MI, the birthplace of Ford. Once the users earn these accomplishments in the forms of badges, they can click on each individual badge and share this badge on social media. This will allow them to easily share their greatest personal achievements with their vehicles, with their closest friends and family! When posting, we include a short message that encourages them to tag Ford with our hashtags attached and share their journey with Ford as well. Our app will link directly to Instagram, Facebook, Twitter or other sharing platforms, allowing them to use their existing social media to directly make posts!

How we built it

We primarily built this application using React Native. First, we built a simple "hello world" app that could connect to the API and display a success message to ensure that we were properly understanding how to access the API. Upon our initial success with the API, we pivoted to implementing the features mentioned above. We approached this problem in a two-step manner. First, build the backend to retrieve all necessary information from the Ford API and store it in the right location during application run time. Once we succeeded in building an efficient back end to retrieve all of our information, we implemented a proper user interface to show this information to the user in the best way possible. This included branching out and exploring other API's, like the Google Maps API, to give the user a cleaner, more compact user interface.

Challenges we ran into

One of the primary challenges we ran into initially was that none of our team members had any experience with app building. Furthermore, none of us had any experience with implementing API's or using API test services such as Postman. However, once we became well versed in React Native, we also faced several issues during the development of the App itself. The first major problem we faced was connecting to the API to pull all the necessary information. When connecting, we would use the JavaScript recommended way to connect to the API, but due to improper syntaxes and an improper understanding of the authentication process with using an Access Token, we were not able to initially make a connection with the API. Additionally, since we were not well versed on how to use a refresh token, we faced issues reconnecting to the API after the first 20 minutes. Once we got access to the API, our other difficulties lied in learning how to build an efficient UI that would present the information to the user with in a simple, easy to understand way. We faced issues in using UI elements like pop up boxes and scroll elements while also facing issues with properly aligning these UI elements on the given page. Often times, we would be able to create the UI component, but would not be able to place it in the correct location due to the interference of style properties from other UI components.

Accomplishments that we're proud of

We are primarily proud to say that we were able to make a fully functional app I'm the given time frame. With all of us having little to no experience in app building, we initially believed it be a tall order to not only create an app, but focus on finer details like the UI experience. However, we overcame this by doing extensive research on what app building software to use and what fit our needs best and once we were able to find the proper app building software, we went through multiple online tutorials to ensure we knew how to build an app the right way. Furthermore, we enjoyed many accomplishments while developing the app itself. A major one was being able to learn the authentication process behind connecting to an API. This required us to learn how to make the initial connection using Postman, then using a JavaScript 'fetch' statement to connect to the Ford API using the granted refresh token. While we were able to learn a lot by developing the backend, we are also extremely proud of being able to create an experience that does more than simply display information to the screen. We used pop-up boxes, rounded UI elements, lighter themes, and navigation pages to make the UI easier to use. All while being able to leverage existing sharing platforms to allow users to share their Ford Journey. We believed it would be best to let users decide how to share their accomplishments rather than having and in-app solution that limited them to just our app. Lastly, we are proud to say we developed an application that brings people closer together in the aftermath of an isolating pandemic. The in-person human connection might have been stifled by current events, but we are happy to be contributing to the trend of virtual connection by allowing users to share their personal achievements with their vehicles, with the world.

What we learned

In the process of building this app we learned how to make an app using React Native and how to use services like Postman to our advantage while attempting to make a connection to API through our app. We learned the basic building blocks of React Native through extensive online research and trial and error while building the app. Once we were able to use Postman, we also learned what the authentication process looks like and why an access token and refresh token are necessary when using API's. Furthermore, we learned how to arrange UI elements without interfering with each other while creating a smooth experience. In addition to the technical skills we acquired, we learned a lot about project management and feature prioritization while building the app. While developing this app, at every step, we were able to make quick decisions regarding how to best implement an upcoming feature and if it contributes well to our overall vision of the app. This included either removing features due to unnecessary complexity, or modifying features along the way to better fit overall vision while keeping in mind our time restraints.

What's next for DriveFord

Since we strongly believe in the vision of socializing aspects of owning a Ford vehicle, we plan on adding features and refining existing features that contribute to this vision. For example, we would like to add pop up notifications from the app that notify you immediately when accomplishing a new achievement. Primarily though, we want to add functionality where users are able to have a personal section for their achievements and a friend's section to see their achievements. The friend's section would allow users to see any accomplishments that their friends have had with their Ford vehicles while keeping track of all the achievements the user has made with their own vehicle. Lastly, although our app was mainly geared towards socializing owning a vehicle, we still believe it's important to deliver vital information regarding the car such as diagnostics and location. Since we have this implemented, we plan on further refining the user experience to make it cleaner and easier to use.

Share this project:

Updates