https://github.com/haidermalikk/supa-charger-app

Supa Charge is a full-stack EV charger locator app made using react native, with Google Maps integration for easy searching and filtering. Users can manage favorites, create accounts via Clerk, and access real-time data with Firebase.
https://github.com/haidermalikk/supa-charger-app

firebase google google-cloud googleapi ios-app jsx react reactnative typescript

Last synced: about 1 month ago
JSON representation

Supa Charge is a full-stack EV charger locator app made using react native, with Google Maps integration for easy searching and filtering. Users can manage favorites, create accounts via Clerk, and access real-time data with Firebase.

• Host: GitHub
• URL: https://github.com/haidermalikk/supa-charger-app
• Owner: HaiderMalikk
• Created: 2024-10-12T01:54:23.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-10-16T02:48:15.000Z (3 months ago)
• Last Synced: 2024-12-07T03:09:42.984Z (about 1 month ago)
• Topics: firebase, google, google-cloud, googleapi, ios-app, jsx, react, reactnative, typescript
• Language: JavaScript
• Homepage:
• Size: 14.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
Hi!

This is my biggest project, a full-stack app called 'Supa Charge'.

With this app, you can find EV chargers, along with Google Maps to seamlessly change your location or open it in Google Maps. You can also filter the number of chargers and your search radius. Information on the address and number of chargers available is also provided. Using the cloud, the user can add or remove favorite chargers for quick access from the favorites screen. The user can create their account at the login screen to manage all this and more!

- For login and account management, I used Clerk. This gave me insights into my users, user count, and the ability to add or remove authentication services (e.g., I could add sign-in using Facebook, GitHub, etc.). I could then link the users' favorites, etc., to the user account.

- For the map, searching using the map, places (i.e., chargers in my case), and all the information on the chargers, I used the Google Maps and Places API offered by Google Cloud Services. This gave me access to Google’s amazing maps and millions of places, along with detailed info on these places like addresses, coordinates, number of chargers, etc. Google credentials also allowed my users to get authorized to use these APIs under my account using Google authentication.

- For the users’ data (i.e., users’ favorites, etc.), I used Firebase, a real-time database offered for free by Google. This gave me the ability to store and retrieve data in real time, which was perfect for user experience as they could see their favorites update in real time. Firebase also allowed me to store user data securely. Furthermore, I used the user’s Clerk email to link them to Firebase, meaning they get their favorites linked to their email. This email data is stored in Firebase along with the favorites' places data.

- This app is completely free and open-source! Download it, enjoy it, and change whatever you like—it's a free template made for your enjoyment. Please note you will have to download all dependencies using npm/npx install, and you'll need to set up your own Clerk, Google API, and Firebase accounts to use this app.

- Currently, I do not plan to put this app on the Apple App Store because they want big money! 😞 But I will put it on the Android Play Store soon!

- Here are some pictures of the app in action.

- Plus, here is a link to the app's live demo: https://youtu.be/n4j3UFxffWs.

- Login Screen:

  

- Home Screen:

     

- Favorites Screen:



- Profile Screen:



- Clerk User Authentication:

 

- Google APIs:



- Firebase Database: