DEV Community

Anas Abuelhaag
Anas Abuelhaag

Posted on

Build for Your Community: CampusOps - Event Management for Student Activities

DEV Weekend Challenge: Community

This is a submission for the DEV Weekend Challenge: Community

The Community

I built this for university student activities and campus clubs. Managing events as a student organizer is often chaotic. You have to juggle marketing, logistics, catering, and keeping track of RSVPs—usually scattered across WhatsApp groups, Google Forms, and messy spreadsheets. This app is dedicated to the incredible community of student leaders who tirelessly organize events, workshops, and gatherings on campus, making student life vibrant and engaging.

What I Built

CampusOps is a sleek, premium event management and operation dashboard designed specifically for student organizations to solve the friction of planning events. It provides a centralized hub to manage every aspect of an event without forcing users to go through tedious signup processes.

It features a streamlined three-level access model:

  • Public View: A beautiful landing page where students can discover upcoming campus events and RSVP seamlessly (with built-in duplicate prevention).
  • Organizer Dashboard: Accessed via a secure, easily shareable organizer_code, this view gives event staff a real-time Kanban board to track tasks (across teams like Logistics, Marketing, Registration) and manage attendee check-ins.
  • Admin Control: Accessed via an admin_code, admins can create new events, dynamically generate access codes for their organizing team, and oversee all global operations.
  • Rapid Deployment Form: From the homepage, any authorized student can 'Initialize a Hub' by filling out a quick, elegant form (event title, date, location, and capacity) to instantly spin up a completely new event dashboard.
  • Data Portability (Export Everything): At any point during or after an event, organizers can click the Export Excel button in their attendee table to instantly download all RSVP and check-in data to a CSV. This makes it insanely easy to generate post-event reports or sync lists with campus administration.

To top it off, CampusOps features a modern, "liquid glass" neumorphic UI that makes organizing events feel less like a chore and more like a premium software experience.

Demo

You can try out the live web application here: https://campus-ops.vercel.app

Code

Here is the full source code for the project:

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

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Enter fullscreen mode Exit fullscreen mode

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 Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more…

How I Built It

CampusOps was built with a modern, full-stack ecosystem:

  • Framework: Next.js (App Router) for seamless full-stack React development and API routes.
  • Database: PostgreSQL hosted on Neon, which provided fast, reliable, and incredibly smooth serverless database provisioning.
  • ORM: Prisma for elegant, type-safe database schema and queries.
  • Styling: Tailwind CSS combined with custom CSS rules to achieve the sophisticated liquid glass / neumorphic UI design.
  • Package Manager: pnpm for fast dependency resolution.
  • Architecture: The app uses zero-auth, code-based access control. This makes it incredibly fast to deploy and share among student teams with zero onboarding friction.

Top comments (0)