Podomon: A Pomodoro Timer with Todo List & Pet Companions

Team memebers: Kun-Yu Lee, Duo-Jie Hsiao, and Bang-Chi Lo.

📹 Demo video (Mandarin): youtu.be/OBFQIZM96vI

🌟 Project Introduction

Podomon is a Pomodoro-focused productivity web app. The name "Podomon" is a fusion of "Pokemon" and "Todo List," emphasizing both companionship and time management.

After registering, users can choose their favorite pet from three unique Podomons 🐾. These pets accompany users during focus sessions and even evolve as users accumulate more focus time! 📈

Users can customize the length of their Pomodoro sessions ⏳ (5 minutes to 2 hours). The Todo List offers features such as 📅 Event Reminders, 🎯 Weekly Goals, and 📝 Today's Tasks to help break goals down into manageable chunks.

With a cute and soothing interface 🌈, Podomon aims to help users stay focused and motivated while reaching their goals.

✨ Features

• 🔐 Login Page
  • 🆕 Register
    • Enter desired username and password, then click Register.
    • A modal will appear to choose and name your Podomon 🐣.
  • 🔑 Login
    • Enter your username and password, then click Login.
• 🗂️ Todo List
  • 📅 Event Reminder
    • Calendar-like reminder system.
    • Use the ➕ icon to open the creation modal.
    • Choose your favorite color 🎨.
  • 🎯 Weekly Goal
    • Set your weekly goals.
    • Click the ➕ icon to add a goal.
    • Each goal creates a collapsible section for its subtasks.
    • Deleting a goal will remove all related subtasks 🧹.
  • 📝 Task Today
    • Add daily tasks and subtasks linked to weekly goals.
    • Click the ➕ icon to add.
    • Switch views: All, Finished ✅, Todo ⌛.
    • Use 🧹 Clear button to delete all completed tasks.
• ⏱️ Pomodoro Timer
  • 🔻 Countdown Timer
  • 🎚️ Time Slider
    • Choose session duration (5 mins to 2 hrs).
    • Adjustable in 5-minute steps.
  • 🐾 Podomon Companion
    • Adorable and encouraging ✨.
    • Shows motivational messages 💬.
  • 🎮 Control Buttons
    • Start / Resume ▶️: Auto-pause and notify when navigating away.
    • Pause ⏸️
    • Stop ⏹️
• ⚙️ Info Panel
  • See your Podomon details.
  • Track your total focus time ⌛.

🌐 Deployments

Hosted at linux4.csie.org:3000 (deprecated)

💡 Usage

• Client: Visit the link, register an account, and start using the app!
• Server: Not publicly accessible.

🧰 Tech Stack

• Core Technologies: React ⚛️, Axios, Express 🚀, Mongoose
• Frontend Libraries: Ant Design 🎨, Material-UI
• Backend Tools: dotenv-defaults, nodemon, cors, MongoDB 🍃

System Architecture

📁 Repository Structure

├── backend
│     └── src
│         ├── main.js
│         ├── mongo.js
│         ├── model
│         │    └── User.js
│         └── routes
│              ├── api
│              │    ├── handle.js
│              │    └── index.js
|              └── index.js 
├── frontend
│     └── src
│         ├── api.js
│         ├── App.js
│         ├── App.css
│         ├── index.js
│         ├── index.css
│         ├── components
│         |    ├── modals
│         |    │    ├── eventSetter.js
│         |    │    ├── goalSetter.js
│         |    │    ├── subTaskSetter.js
│         |    │    └── taskSetter.js
│         │    ├── sublist
│         |    │    ├── event
|         |    |    |    ├── eventBoard.js
|         |    |    |    └── eventCard.js
│         |    │    ├── goal
|         |    |    |    └── GoalBoard.js
│         |    |    └── task
|         |    |         ├── taskBoard.js
|         |    |         ├── goalSubs.js
|         |    |         └── box.css
|         |    ├── Buttons.js
|         |    ├── CreateModal.js
|         |    ├── PetModal.js
|         |    ├── SettingDrawer.js
|         |    ├── List.js
|         |    └── TodoList.js
│         ├── containers
│         |    ├── Login.js
|         |    └── Podomon.js
|         └── img
└── README.md

---

🧪 Local Setup & Testing

This app requires an internet connection and a remote MongoDB database.

🚀 Frontend Setup

cd frontend
yarn install
yarn start

⚙️ Backend Setup

cd backend

Create a .env file with the following:

MONGO_URL=

Insert your MongoDB connection string after the =. Then run:

yarn install
yarn server

Once both frontend and backend are running, open your browser and navigate to 👉 http://localhost:3000/Podomon