Charity Finder On Google Maps

Essentially, It based on where you click on the map, it will mark a charity/place you're capable of donating at with a brief description as to what their mission or goal is.

Comment

Inspiration

Brainstormed an idea to promote donations and spread awareness about local charity opportunities.

What it does

The project provides an interactive 3D globe using three.js. When a user clicks on a location on the globe, the app switches to a Google Maps view where users can search for nearby charities. Once a charity is selected, a chatbot powered by the Google Generative AI API provides additional information about the selected charity.

How we built it

The project is built using: React: For building the frontend user interface. Three.js: For rendering the 3D globe and stars background. Google Maps JavaScript API: To find and display nearby charity locations. Google Generative AI API: To power a chatbot that provides information about a selected charity. Axios: For making HTTP requests to Google APIs. React Modal: For displaying information in a modal window when a charity is selected.

Challenges we ran into

Managing API keys securely: Making sure keys for Google Maps and the Generative AI API are properly hidden and loaded. Integrating three.js with React: Ensuring the 3D globe and stars render correctly and respond to user interaction. Interfacing with multiple APIs: Handling asynchronous API requests and integrating the responses smoothly within the user interface.

Accomplishments that we're proud of

Successfully integrating Google Maps to find nearby charities based on user clicks on the globe. Creating a chatbot that uses the Google Generative AI API to provide meaningful and informative responses about the selected charity. Implementing an engaging 3D globe and star background using three.js.

What we learned

API Integration in React: Managing API keys and safely using environment variables. Advanced React Concepts: Using hooks like useEffect, useState, and useRef to manage state, side effects, and DOM manipulations. 3D Graphics in the Web: Using three.js to create interactive 3D experiences and understanding its integration within a React project.

What's next for Charity Finder On Google Maps

Deploy it on AWS with Amplify and EC2. More intuitive communication with provided chatbot. Provide a link to the charities website for quick access to more knowledge. A donate now button which sends the user to the charities donate page.

Share this project:

Updates