DisEngage: An NYU Event Management Web App, unlike any other (contrary to popular belief)

Click here to visit the site!

DisEngage is a full-stack web application designed to streamline event exploration, scheduling, and engagement for NYU students, faculty, and staff, while also offering functionality for non-NYU users. Built with a React frontend and FastAPI backend, the platform allows all users to browse categorized event listings, view organization details, and explore event timings.

NYU-affiliated users gain additional functionality by logging in with their NYU email, such as the ability to add events to a shopping cart, integrate them with their existing calendar, and detect scheduling conflicts. Upon checking out, selected events are automatically imported into their Google Calendar, ensuring seamless scheduling.

Recent updates include an organizer rating and review system, with future plans for a chat feature to foster event-related discussions.

How DisEngage works

Optional login to Google Calender for additional scheduling features:

Browse through listing of NYU events (regularly scraped from the official NYU Engage website

Shopping cart style registration for events

Scheduling clash detection

Import desired event(s) to your actual Google Calender

Browse different event hosts

View and give ratings/feedback for event hosts

Current Functionality

• User Authentication: Supports Google OAuth for login.
• Event Exploration: Browse events by category, add to a personalized event cart, and check for scheduling conflicts.
• Schedule Review: Visual calendar to manage events and detect overlaps.
• Rating and Review System: Users can rate organizers and leave feedback, helping others choose events based on organizer quality.
• Backend API: Includes endpoints for retrieving event data, submitting reviews, and dynamically scraping events from NYU Engage.

Planned Features

• Event Chat: A feature for attendees to discuss event details, such as dietary options and accessibility.

Wireframe Overview

The DisEngage UI wireframe, designed in Figma, outlines key pages and flows:

• Login: Simple page for Google OAuth (future integration).
• Landing Page: Welcome page with access to event categories.
• Category Page: Displays events sorted by category, allowing users to explore various event types.
• Schedule Review: Visual calendar view to help users organize their events.
• Cart Page: Shows selected events, detecting scheduling conflicts if they overlap.
• Event Review Page: Users can rate and review organizers.

Wireframe link: DisEngage Wireframe

API Endpoints

• GET /api/events: Retrieves categorized event listings.
• POST /api/reviews: Submits reviews and ratings for events or organizers.
• GET /api/organizers/{id}/ratings: Fetches rating data for a specific organizer.

---

Local Setup

Follow these steps to set up the frontend and backend locally, enabling you to explore the DisEngage interface with the pre-scraped data.

1. Clone the Repository

git clone <repository-url>
cd DisEngage

2. Configure Environment Variables

Create a .env file in the root directory with the following variables:

# backend variables
MONGODB_URI=mongodb+srv://<username>:<password>@projects-in-programming.qctmw.mongodb.net/?retryWrites=true&w=majority&appName=Projects-In-Programming
MONGODB_DB_NAME=ProjectDB
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT_URI=http://localhost:3000/callback

# frontend variables
REACT_APP_GOOGLE_CLIENT_ID=
REACT_APP_REDIRECT_URI=http://localhost:3000/callback
REACT_APP_API_BASE_URL=https://disengage-backend-270035954698.us-central1.run.app/api

Obtaining Google Client ID and Google Client Secret

To integrate Google OAuth into your application, follow these steps to obtain your Google Client ID and Google Client Secret:

1. Go to the Google Cloud Console: Visit Google Cloud Console.

2. Create a New Project

3. Create Credentials:

   • Go to "APIs & Services" > "Credentials."

   • Click on "Create Credentials" and select "OAuth client ID."

   • If prompted, configure the consent screen by providing the necessary information.

   • Choose "Web application" as the application type.

   • Add your authorized redirect URIs (e.g., http://localhost:3000/callback).

4. Get Your Client ID and Client Secret

3. Backend Setup

create a virtual environment in the root directory, install dependencies, and activate it:

python -m venv .venv

.venv\Scripts\activate # On Windows use .venv\Scripts\activate
source .venv/bin/activate # On macOS and Linux:

pip install -r backend/requirements.txt

4. Run the Backend Server

Start the FastAPI server to serve the API on http://localhost:8000:

uvicorn main:app --reload

or

python3 -m uvicorn main:app --reload

5. Frontend Setup

Open a new terminal, navigate to the frontend directory, install dependencies, and start the React application:

cd ../frontend
npm install
npm start

Scraping

In the scrape.py file, adjust the X in count -= X to scrape a portion or all events.

#make count -= 1 to capture all events!
    while count > 0:
        load_more()
        count -= 10
        time.sleep(0.5)