Full Stack Mobile Application utilizing the following tech stack: Charity Connect is a mobile-first web application that allows peer to peer interactions to list items up for donation and claim features to reduce waste.
- The User Signup page triggers on first render of the website depending on whether you have an account signed in or not.
- The user has the chance opt to login with Google and Github
- The user also has the chance to signup with email and password
- Navigation bar allows has several icons.
- The Earth icon allows return the user to the home screen.
- The Human Icon prompts the user to login or switch accounts.
- The Chat bubble Icon opens up the chat feature for the current user.
- The homepage contains our company "Charity Connect", buttons for "View Donations" and "Donate Today!"
- View Donation queries the database to show which items are in the location.
- There is a sort button that allows the user to sort by ["Apparel", "Electronics", "Entertainment", "Family", "Garden and Outdoors", "Hobbies", "Homegoods", "Music", "Sports", "Supplies", "Toys and Games", "Vehicles", "Other"]
- There's also a view on map which leads to the map feature of the application.
- Donate Today button leads to the Item page.
- View Donation queries the database to show which items are in the location.
-
The Item Page breaks down the donation description from its name, claim status, claim capabilities, description, donor profile, messaging capabilities and location through a google map api.
Features
- Displays all information created by the donor
- Allows users to directly message the donor through another messaging component
- Shows approximate location of the item through Google Maps API
- Claim item that will notify the donor and update the profiles of the user
- Allow users profile to be clicked and analyzed
- The Map page first asks the user permission for their current location. If not, it'll default to a preset location. If prompted with the user's location, it'll provide the user with the nearest items for up for donation within the map's view through Google Maps API.
- There is a search bar located on top of the map if the user would like to navigate to another location.
- The search bar converts the address input into a longitude & latitude via Open-Cage API
- The information is then passed to the centerpoint of the center element of the Google Map API to reposition.
- Each item has an onhover show the item's name and image as well as onclick, would lead to that specific item's page
- User profile builds on the signup & login page to pull from the Mongodatabase to display to the current user.
- The user can input a Image, Biography, Address
- There is also a list of items that the user has.
-
The Chat Component is a feature of the Charity Connect application that allows users to connect with each other and communicate via chat messages. It enables users coordinate thier donation process or inquire about potential pickups.
Features
- User-friendly interface for seamless communication
- Chat history with timestamps
- Sending and receiving text messages
- Sending and displaying images
- Creating new chat conversations
Use the package manager npm to install necessary dependencies.
npm installRepository requires the following environment variables: Google API token to _____. Cloudingary API token to ______. Open-Cage API token to ______.
DATABASE_URL = "INSERT MONGO ATLAS"
NEXT_PUBLIC_GEOLOCATION="INSERT KEY HERE"
NEXT_PUBLIC_GOOGLEAPI="INSERT GOOGLE KEY HERE"
NEXT_PUBLIC_CLD_CLOUD="INSERT CLOUDINARY ENV HERE"
NEXT_PUBLIC_CLD_API="INSERT CLOUDINARY SECRET KEY HERE"
NEXT_PUBLIC_AUTOCOMP="INSERT GOOGLE PLACE API KEY HERE"
