Get Kindr

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.

Table of Contents

• Screenshots
• Acknowledgements
• Technologies
• Usage
  • Prerequisites
  • Installation
  • Environment Variables Setup
  • Run The App
• Features
  • User Authentication
  • Event Management
  • Token System

Screenshots

Login Page	Home Page
Events Page	Event Page
Profile Page	My Events Page

Acknowledgements

• Towa Quimbayo GitHub LinkedIn
• Noufil Saqib GitHub LinkedIn
• Juan Escalada GitHub LinkedIn
• Maximillian Yong GitHub LinkedIn
• Braden Rogers GitHub LinkedIn

Technologies

• 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

Usage

Prerequisites

Prerequisites

• VSCode
• Git
• Node.js

Installation

Installation

1. Install the latest npm package version.

npm install npm@latest -g

2. Clone the repository to your local machine.

git clone https://github.com/towaquimbayo/Get-Kindr.git

3. Installing required dependencies requires Node and npm.

npm i --legacy-peer-deps

Environment Variables Setup

Environment Variables Setup

For the project to run correctly, environment variables are required. Rename the .env.example to .env.

1. Create a free PostgreSQL database at https://vercel.com/postgres/ and fill in your PostgreSQL account details.
2. Create a Google OAuth app at https://refine.dev/blog/nextauth-google-github-authentication-nextjs/#for-googleprovider-make-sure-you-have-a-google-account/.
3. Create a free ImgBB account to obtain the ImgBB API key at https://api.imgbb.com/.
4. Create a free Mapbox account to obtain a Mapbox access token at https://docs.mapbox.com/help/tutorials/get-started-tokens-api/.
5. 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

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 or npm 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.

Features

User Authentication

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.

Event Management

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.

Token System

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.