Civic Otters

Civic Otters is a webapp that allows young adults and friends to easily sign up for volunteering events and opportunities with their friends. The simple and easy-to-use interface allows users to find events that they are interested in easily. They can also see what their friends have signed up for and participate together. After the event, users are rewarded with XP according to their service hours and stand a chance to be on the leaderboard! This gamification attracts young adults to enjoy participating in events, boosting participation rate and community engagement

Features

• User Authentication with Clerk
• Add & Accept other Otter Pals
• Sign up for Events & Opportunities
• View Friends' Activities
• Volunteering XP Leaderboard

Technologies

Civic Otters is built using a stack of modern technologies, including:

Frontend

• Next.js: A powerful React framework that enables server-side rendering and static site generation. Utilized for creating dynamic and efficient web applications with great SEO support.
• React: A JavaScript library for building user interfaces. Core library for building the frontend UI components.
• TailwindCSS: A utility-first CSS framework for rapid UI development. Provides a highly customizable and efficient way to style the application.
• Clerk: A user management and authentication service. Handles user sign-up, login, and authentication flows seamlessly.
• Zod: A TypeScript-first schema declaration and validation library. Ensures data validation and type safety throughout the application.
• TypeScript: A statically typed superset of JavaScript. Provides type safety and enhanced developer experience, reducing bugs and improving code maintainability.

Backend

• MongoDB: A NoSQL database used for storing and managing user data, .
• Vercel: Used for hosting both the frontend and backend server and ensuring reliable deployment.

Machine Learning

• Pandas: Used for data cleaning, transformation, and analysis. It provides data structures like DataFrame, which is excellent for handling structured data.
• NumPy: Provides support for large multi-dimensional arrays and matrices, along with a collection of mathematical functions to operate on these arrays efficiently.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Deployment

This is a Next.js project bootstrapped with create-next-app.

This project is also deployed on Vercel here

Video Demonstration

Click here to watch the video demonstration of our website on Youtube.

Team Members

Thant Htoo Aung	O Jing	Tee Yee Jian	Phua Zai Qin
Full Stack	Frontend	Machine Learning	Backend