Hey Folks I hope you're all doing well and staying healthy. I'm writing this blog to participate in netlifyXhashnode's recent hackathon. So I created Evians, a web application.

Introducing Evians

Electric Vehicles have revolutionized the automobile industry. EVs will replace a large portion of the automobile shortly due to high fuel prices and increasing pollution. The number of users using EVs is increasing rapidly, and so are the investments made in this sector. The number of people who own electric vehicles is fast-growing, as are the investments made in this area. Worldwide EV sales increased by 43% in 2020 compared to 2019, and the global electric car industry's market share reached a new high of 46%.

Electric cars are fantastic. It would be helpful to the environment and a significant scientific breakthrough to replace all present autos with electric ones. However, there is a difficulty with growing the usage of electric vehicles. Considering the facts, it takes hours to charge an ordinary electric vehicle. Tesla takes 30 minutes to charge on average using superchargers. With a regular charger, Tesla can take up to ten hours to charge. Consumers will have to wait for recharging because EV charging takes longer. This would be a waste of time for the user.

However, we have a solution: what if a person could reserve a slot for recharging from their home? What if consumers could get a list of nearby charging stations together with the number of slots available? Evians are on their way. It's a one-stop solution for all of your EV charging issues. It will substantially influence the amount of time and effort spent by users. Users may now explore the charging stations, check available slots in a station, and reserve slots accordingly from anywhere, at any time, instead of physically looking for EV stations and vacant slots.

Tech Stacks

Following are the Frameworks, tools, and technologies: React, Firebase, Razorpay, Google Maps API, Node, Express.js, Figma, Microsoft Azure, Netlify.

Demonstration

Now I'll take you through the entire application and give you an overview of Evians.

Landing Page: This is the landing page for our website, where visitors may learn more about our solution. We aimed to make the app's UI as straightforward as possible while providing a great experience.

Available Slots for a city: List comprises all the information about the slots with the number of slots per station, address of the station, the station name, and price range for that particular slot. Users can select state and city and can get the required information. Information of a specific station: Particular station page would comprise the google embedded URL, name of the station, number of ports, and the prices. Clicking on any port would open the popup for further payment details.

User Payment Popup: User can fill in the corresponding details, including battery size, charging levels, vehicle number, and slots. Once selected, the Razorpay payment popup will be shown. Payment Dashboard from the station types: This page comprises all the payment and payment histories Information. This page also includes the total earnings, total bookings, and the past week's bookings.

Profile Page of the User: The profile page of the user comprises all the Information of the user, including the email address, phone number, state, and city. This section also shows the booking history of the user.

Profile Page of the Admin: The profile page for the admin comprises the admin-related details and all the slots related to it. Admin can change the details of the slot. You can add more slots and can update your details.

User and System Flow

What Did I Learn?

Learning is a never-ending process for a developer. As a result, I've learned a lot while working on this project. Once you've integrated a payment gateway, this is one of those things. While working on this project, I learned how to use the Razorpay payment gateway. In addition, I learned how to publish my backend code to Azure. As a result, my cloud kills have improved.

Future Plans to improve

I would try to enable authentication using a google account and other essential providers in the near future. I would add a feature for the exchange of batteries with charging batteries. I can integrate electrical car showroom APIs for direct users interested in buying a new car. I ultimately want this website to be the ultimate solution to provide all the facilities related to electric vehicles.

Useful Links

Deployed App

GitHub Repository

Finally, thank you to Netlify and Hashnode for providing this incredible opportunity, which concludes our discussion of Evians. Let me know what you think of Evians in the comments section below.