A gamified web application that connects volunteers seeking opportunities and organizations hosting events by allowing volunteers to apply for available events and organizations to create new volunteer opportunities.
Check out the live project here.
![]() |
![]() |
---|---|
Login Page | Home Page |
![]() |
![]() |
Events Page | Event Page |
![]() |
![]() |
Profile Page | My Events Page |
- Towa Quimbayo GitHub LinkedIn
- Noufil Saqib GitHub LinkedIn
- Juan Escalada GitHub LinkedIn
- Maximillian Yong GitHub LinkedIn
- Braden Rogers GitHub LinkedIn
- Next.js
v13.5.5
- TypeScript
v5.2.2
- React.js
v18.2.0
- TailwindCSS
v3.3.3
- PostgreSQL
- Prisma
v4.16.2
- Vercel
- JWT Authentication (Next-Auth)
v4.24.7
- Google Maps API
v134.0.0
- Mapbox API
3.2.0
- Nodemailer
v6.9.12
- Next UI
v2.0.15
Installation
- Install the latest npm package version.
npm install npm@latest -g
- Clone the repository to your local machine.
git clone https://github.com/towaquimbayo/Get-Kindr.git
- Installing required dependencies requires Node and npm.
npm i --legacy-peer-deps
Environment Variables Setup
For the project to run correctly, environment variables are required. Rename the .env.example
to .env
.
- Create a free PostgreSQL database at https://vercel.com/postgres/ and fill in your PostgreSQL account details.
- Create a Google OAuth app at https://refine.dev/blog/nextauth-google-github-authentication-nextjs/#for-googleprovider-make-sure-you-have-a-google-account/.
- Create a free ImgBB account to obtain the ImgBB API key at https://api.imgbb.com/.
- Create a free Mapbox account to obtain a Mapbox access token at https://docs.mapbox.com/help/tutorials/get-started-tokens-api/.
- Create a free Google Cloud Console account to obtain the Google Maps API key at https://developers.google.com/maps/documentation/javascript/get-api-key/.
Run The App
Running the application locally or in production is straightforward since both the frontend and backend are integrated into a single Next.js application running on port 3000.
- Execute
npm run build
to build the application for production. - Execute
npm run dev
to run locally in development mode ornpm start
to run it using the production build.
Note: This process will also build the Prisma schema for your PostgreSQL database if you haven't defined it already. Depending on your PostgreSQL setup, you may need to execute npx prisma db push
to push the schema to your database.
Note: Any changes to the schema.prisma
file will automatically update the database schema during these steps.
Our application ensures robust and secure user authentication and session management using JSON Web Tokens (JWT) via Next-Auth. This setup leverages HttpOnly cookies to protect specific API routes, ensuring that only authorized users can access sensitive information.
- Forgot Password: Users can securely reset their passwords through a secure One-Time Password (OTP) token process.
- Profile Management: Users can create and update their profiles, including changing their username, email, password, phone number, and profile picture, ensuring a personalized and secure experience.
Our event management system empowers organizations to create, manage, and track their hosted events, including past events. Volunteers can apply and attend these events, and track their participation history and volunteer hours.
- Event Details: Each event includes detailed information such as location, date, time, tags, available seats, token rewards, and a description, along with a list of volunteer applicants.
- Event Applications: Volunteers can easily browse and apply to events that match their interests and skills.
- Event Searching, Filtering, and Sorting: Users can filter events by name, tags, and location. Additionally, events can be sorted by the number of tokens and dates, and volunteers can utilize a search tab to find specific events.
- Interactive Maps Integration: Event locations are displayed on an interactive map using the Google Maps API and Mapbox GL, providing a visual and navigable interface.
- Event Completion: Organizations have the authority to close or complete events after their date has passed, rewarding volunteers with tokens for their participation.
Our token system is designed to incentivize and reward volunteers for their participation in events.
- Reward Tokens: Organizations can grant tokens to volunteers upon the completion of their volunteer hours, marking the event as complete.
- Manage Tokens: Volunteers can manage their earned tokens within their accounts. While the functionality for redeeming tokens for rewards is yet to be implemented, this feature sets the groundwork for a future system where volunteers can exchange tokens for tangible prizes.