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 the University of Central Florida (UCF), including special developer cards. It’s built to feel like a playful trading card game (TCG) while staying fast, responsive, and accessible.

Key Features

• User authentication with JSON Web Token (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

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

My Role & Contributions

Project Manager & Frontend Developer

Owned the pack-opening and collection views — responsive grid, focus states, Accessible Rich Internet Applications (ARIA) labelling — and collaborated on the application programming interface (API) shape and the JWT refresh lifecycle. Also led project branding and planning artifacts: name, visual identity, card art, the Gantt chart, resource allocation, and deployment on a DigitalOcean droplet with the domain.

• Front-end: pack-opening and collection views, responsive grid, focus states, ARIA labels.
• Design: all card art and the site's visual identity, hand-drawn.
• Integration: collaborated on API shape and the JWT token refresh lifecycle.
• Delivery: Gantt chart, resource allocation, droplet deployment and domain setup.
• Architecture: helped align component structure with React + TypeScript conventions.

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 user experience (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.

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=...
        

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