Chargify

Chargify your Electric vehicle from your pocket and save our planet from an alien called CO2

Comment

Inspiration

There has been a lot of talk recently about a study published in Nature last week, which surveyed Californian EV owners and found that one in five went back to internal combustion after bad experiences with electric. Their chief reason was the hassle of charging. This has of course been picked up by journalistic publications as evidence that EVs are problematic. However, there are some obvious issues with the reasoning, and the study on which it is based. Charging an EV publicly is more hassle than putting fuel in an internal combustion car, but is it really such a dealbreaker? So the problem revolves around EV charging stations and booking a charging slot as EV batteries take 2 hours to 4, 8,10, 20 hours to charge per EV battery model and slow vs fast EV charger.

What it does

We built an app where EV owners can pre book a slot for charging their EV, pay online as well as in person using a card or by scanning QR Code.

How we built it

We built the front end using React and the backend using Java SpringBoot. React frontend deployed in AWS using AWS Amplify service. Backend also deployed in AWS cloud using Elastic Beanstalk. We are using a mysql database to store data.

Challenges we ran into

Rahul based at USA and Nicholas based at Nigeria and myself inIndia. As team members are from different geographic areas. So time zone was the issue. I had to take a sync up call at 2.00 AM IST. to keep the hackathon work going.

Accomplishments that we're proud of

We accomplished a lot through this project, in putting our knowledge and experience in backend and front end development to create something that is truly impactful in society

What we learned

We learned how to use a digital wallet in an application and created a mobile application that solves a real world problem. New aspects in terms of the front end include using the Google Maps API. We also learned how to integrate Square Bookings API, Cash App Pay, and Checkout API

What's next for Chargify

Next, we want to expand Chargify to a wider range other than just the United States and allow them to make larger transactions and manage multiple vehicles at the same time

Square Application ID: sandbox-sq0idb-uonINeTlY7QlKSvV8MRI_g

Link to live application link: https://main.d1szdosrzk8nmr.amplifyapp.com

Note: Please note this application is best viewed in Mobile view(in browser)

Steps to access:

  1. Login with below credentials : hackathon2022@gmail.com
  2. Then enter OTP 123456 to login successfully
  3. Then enter zip code 85281
  4. Navigate to Google map page
  5. Click on Charging station icon(in Red color)
  6. Click on Book button
  7. Select Connector
  8. Click Book Timeslot
  9. Select vehicle
  10. Select date and duration for charging your Electric vehicle
  11. Then click on Book in confirm popup window
  12. Do payment using Checkout api, Cash App pay or wallet payment method
  13. After successful payment you will navigate to the Charging history/Bookings page.
  14. Also view menu which has options - Profile, My Garage, My Wallet and My reservations etc.

App History

  1. We have developed wireframes multiple times and then redesigned wireframes as well
  2. We had developed a sign up and login page only.
  3. We could not proceed to developing next screens/pages

Category submitting into:

  1. Checkout API
  2. Cash App Pay
  3. Bookings API release

Features: We have developed all pages and features in this Square hackathon. It includes -

  1. Google map page,
  2. Charging station search feature,
  3. Booking a charging slot
  4. Viewing already booked charging slot
  5. Payment using Checkout Api, Cash App Pay or Wallet.
  6. Booking a charging slot using Square Booking Api
  7. A profile page
  8. My Garage page/My vehicles page
  9. My Wallet page
  10. My reservations/bookings page

Features in detail: Role - EV Owner

Feature 1 - Sign up page:

  1. POST /api/auth/v2/signup
  2. Name
  3. Mobile number with country code
  4. Email

Feature 2 - Login page

  1. POST /api/auth/v2/signin
  2. Mobile number
  3. Email

Feature 3 - OTP verification

  1. POST /api/otp/generate
  2. POST /api/otp/validate
  3. Field to enter OTP
  4. Also a resend option

Feature 4 - Edit Profile page

  1. POST /api/users
  2. mobile number - Read only
  3. Email - Read only
  4. Name
  5. Add address
  6. Address line 1
  7. Address line 2 8.City - Drop down 9.Zip Code
  8. State - Drop down
  9. Country - Drop down

Feature 5 - Capture Vehicle details page

  1. POST /api/vehicle
  2. Vehicle brand - Drop down
  3. Vehicle model - Drop down
  4. Battery capacity - Drop down
  5. Charging port type - Drop down

Feature 6 - Search nearby station page / flow

  1. GET /api/station/all
  2. Show EV charging stations on Google map
  3. User clicks on a specific EV charging station
  4. User gets nearby stations with available time slot both already booked and free slots
  5. User selects a slot based on below type/options(or show below options) Option - Full charge, % charge and Based on hours 2, 4, 6 etc.
  6. Once slot selected/clicked, user gets a slot confirmation page/message
  7. Once user confirms then navigates to payment page with below payment options
  8. Online payment using Square Checkout Api POST - /api/transaction and /api/transaction/confirmation
  9. Cash App Pay POST - /api/transaction
  10. Wallet pay POST - /api/transaction
  11. Once payment done then user gets payment confirmation page

Feature 7 - Charging history

  1. GET /api/transaction
  2. User can see vehicle charging history
  3. A table with below fields
  4. Date
  5. Units consumed
  6. Hours spent
  7. Amount paid
  8. Mode of payment
  9. Link to download invoice

Feature 8 - Wallet page

  1. POST /api/wallet
  2. User can add balance in wallet
  3. While adding money to the wallet, the user should navigate to the payment page with below payment options:
  4. Online payment using Square Checkout Api
  5. Cash App Pay
  6. Wallet pay
  7. User shall view wallet balance

Add station - POST /api/station

Java Sdk: We have used below Java Sdk to create client to make call to Checkout, Cash App Pay and Bookings Api

<dependency>
    <groupId>com.squareup</groupId>
    <artifactId>square</artifactId>
    <version>23.0.0.20220817</version>
    <scope>compile</scope>
</dependency>

<dependency>
    <groupId>com.squareup.okhttp3</groupId>
    <artifactId>okhttp</artifactId>
    <version>4.9.0</version>
</dependency>

Link to open Api specification / Swagger file: http://polling-app-server-dev2.us-west-2.elasticbeanstalk.com/swagger-ui.html#/

alt text

Share this project:

Updates