The Loop — College Event and Social Platform

The Loop is a full-stack web application for campus events. A student finds events, receives personalized recommendations, and coordinates travel with friends. The application uses FastAPI for the backend and React for the frontend.

Live site: https://the-loop-5m7u.onrender.com/

Features

Event recommendations

• A cosine-similarity engine ranks events against a per-user interest vector.
• The interest vector updates when a user joins an event.

Real-time chat

• A WebSocket service provides chat and online status.
• A server-side connection manager sends the status of each user to friends.
• The client reconnects automatically with an exponential backoff.

Carpooling

• A user creates a carpool group with a capacity limit and an owner.
• The Google Maps API provides the route information.

Accounts

• The application uses JWT authentication with Google OAuth sign-in.

Architecture

• The backend defines 8 relational models and about 27 REST endpoints.
• The backend uses SQLAlchemy and Pydantic with PostgreSQL. SQLite is available for local development.
• The frontend uses React 18, Vite, Tailwind CSS, and Framer Motion. It installs as a PWA.
• The application runs on Render. A scheduled GitHub Actions job calls the health endpoint to prevent cold starts.

Technology

• FastAPI, React
• PostgreSQL, SQLAlchemy, Pydantic
• WebSockets
• JWT, Google OAuth
• Google Maps API
• Render

Installation

Backend

1. Install the dependencies.

   cd backend
   pip install -r requirements.txt

2. Copy the environment template and set the values.

   cp .env.example .env

   Set DATABASE_URL, the JWT secret, and the Google OAuth credentials.
3. Start the server.

   uvicorn main:app --reload

Frontend

1. Install the dependencies and start the development server.

   cd frontend
   npm install
   npm run dev