PocketProfessors

Overview

PocketProfessors is a full-stack web application where users log in, open card packs, and collect hand-drawn cards of professors and people at UCF (including special developer cards). It’s built to feel like a playful TCG while staying fast, responsive, and accessible.

Key Features

User authentication with JWT (login/session).
MongoDB integration for card data and collections.
Collectible pack opening that simulates obtaining cards.
Frontend / backend separation for clean architecture.
Responsive design across web and mobile.

Technologies

Frontend: React, TypeScript, Vite, CSS.
Backend: Node.js, Express.js.
Database: MongoDB via Mongoose.
Auth: JWT, bcrypt.
Email: SendGrid.
Testing: Jest, Supertest.
Deployment: Nginx (Linux), GitHub.

How It Works

Sign in with JWT auth.
Open packs to receive hand-drawn UCF/professor cards (with special dev cards).
Review & collect—cards persist to your account via MongoDB; the UI is responsive for mobile/desktop.

PocketProfessors pack opening — Open weighted packs.

PocketProfessors collection views — Collect professors, track progress.

My Role & Contributions

Project Manager & Frontend Developer

Name & Website Theming, All Cards, All Art, Powerpoint, Gantt Chart, Recourse Allocation, Droplet, and Domain.
Front-end UX for the pack-opening and collection views (responsive grid, focus states, ARIA labels).
Collaborated on API shape and JWT token lifecycle.
Helped align component structure with React + TypeScript best practices.

Credits & Links

Team project for UCF COP4331 (Group 25).
Live site: pocketprofessors.com
Repository: GitHub: Group25-Large-Project-COP4331

Challenges & Lessons

Collaboration: Learned to manage a team, delegate tasks, and enforce quality through reviews and checklists.
JWT lifecycle: Implemented token refresh and secure storage to balance UX and security.
Responsive design: Crafted a mobile-first layout that adapts cleanly across devices.
Database modeling: Designed efficient MongoDB schemas for users, cards, and collections.
Testing: Wrote unit and integration tests to ensure reliability and catch regressions early.

Developer quick start

git clone https://github.com/jm19pa/Group25-Large-Project-COP4331.git
cd Group25-Large-Project-COP4331
npm install
# then set .env:
MONGODB_URI=...
JWT_SECRET=...
SENDGRID_API_KEY=...

See the repo README for the full setup and scripts.

Also see my other projects on the Projects section, connect on LinkedIn, or visit my GitHub profile.