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