The Catalysts - Pettimer

Inspiration

Studying for the DSE often requires juggling multiple platforms, each with strengths and weaknesses. The idea behind Pettimer is to unify these tools into one engaging platform. It combines productivity features like timers and AI planning with fun, gamified elements—making studying less stressful and more enjoyable.

What it does

Pettimer offers three main features:

Animals Companion System Choose your study buddy (cat, dog, or fox). Earn coins and fire by focusing with the timer. Spend coins on food, clothes, or toys for your pet. Chat with your animal using AI for motivation and fun.
Goal Setting & AI Planner Set study goals with deadlines. AI generates personalized study plans based on your level and timeline. Example: If you need to master 5 topics in 10 days, AI distributes tasks efficiently.[ \text{Tasks per day} = \frac{5}{10} = 0.5 \quad \Rightarrow \quad \text{1 topic every 2 days} ]

3.AI Assistance Ask questions directly while studying.Get instant explanations, guidance, or clarifications.

How we built it

Frontend Framework
React 18 with TypeScript - Component-based UI architecture with type safety
Vite - Fast development server and optimized production builds
Tailwind CSS - Utility-first styling for responsive design
Zustand - Lightweight state management for global app state

2.AI Integration

DashScope API (Alibaba Cloud) - Qwen language model for:
- Intelligent study plan generation
- Daily schedule creation based on user goals
- Interactive AI chat assistant for study guidance

2.Backend & Authentication

Node.js with Express.js - RESTful API server
JWT (JSON Web Tokens) - Secure user authentication
bcrypt - Password hashing and security

3.Internationalization

i18next - Multi-language support (English, Traditional Chinese, Simplified Chinese)
Dynamic language switching with persistent preferences

4.Development Tools

Git/GitHub - Version control and collaboration
npm- Package management
ESLint - Code quality and consistency

Architecture
Modular component structure with separation of concerns
Proxy configuration for API routing in both web and desktop modes
Backend synchronization for cross-device data persistence
Guest mode with localStorage for instant access without registration

Challenges we ran into

Difficulty integrating APIs at first Designing the shop and animal visuals (initially emoji-based, later AI-generated) Finding backend/frontend hosting solutions without exposing API keys — solved using Vercel and Koyeb

Accomplishments that we're proud of

Successfully built a functional website AI integration works smoothly Customizable themes and adorable animal companions

What we learned

1.Full-Stack Development: This project deepened my understanding of how frontend and backend systems interact, from API design to database management. 2.AI Prompt Engineering: I discovered that the quality of AI responses depends heavily on prompt structure. Well-crafted prompts make a significant difference in output usefulness. 3.Asset Generation: Working with AI image generators taught me the importance of detailed prompts and iterative refinement to achieve desired visual results. 4.Project Architecture: Planning a scalable application structure from the start saves countless hours of refactoring later. 5.User-Centric Design: Features must solve real user problems—every addition should enhance the study experience, not just add complexity.

Problem-Solving with Copilot: Using AI coding assistance accelerated development, but understanding the generated code was crucial for maintenance and debugging.