Pee Pee Time
December 2024Advanced Full Stack Development - MCT HOWEST
Vue 3TypeScriptGraphQLApolloNestJSMongoDBFirebaseMapboxPWAElement PlusTailwind CSSNode.jsMongooseReal-timeMonorepoLerna
For the course Advanced Full Stack Development, we were assigned to work in teams to build a comprehensive system. I was paired with a teammate to create Pee Pee Time (PPT), a toilet management system consisting of a GraphQL API backend and a Progressive Web App frontend, structured as a monorepo managed with Lerna.
Mockup of the Pee Pee Time app
The system addresses the challenge of managing portable toilet facilities across multiple sites, providing real-time monitoring of toilet status, fill levels, air quality, and location tracking. While this started as a team project, my teammate departed halfway through development, leaving me to complete the majority of the implementation independently.
Frontend
The frontend is built as a Progressive Web App (PWA) using Vue 3 with TypeScript and the Composition API. It integrates with GraphQL through Apollo Client for efficient data fetching and real-time updates via subscriptions, ensuring users see live facility status changes.
Site status monitoring in the Pee Pee Time app
Key features include Element Plus UI components for a polished interface, Firebase Authentication for secure user management, and Mapbox integration for interactive location visualization. The app supports comprehensive toilet management operations including adding, editing, and deleting facilities, along with real-time status monitoring, fill level tracking, and air quality monitoring.
Backend
The backend is a GraphQL API built with NestJS and Apollo Server, providing a robust and scalable data layer. It uses MongoDB with Mongoose for data persistence and includes comprehensive features for managing toilet facilities, sites, and user authentication through Firebase.
The API supports real-time updates through GraphQL subscriptions, extensive seeding functionality for development data, and includes proper error handling with comprehensive logging. The modular NestJS architecture ensures maintainable code with organized route groups, dependency injection, and clean separation of concerns throughout the application.