Skip to content

TheWitch593/Monthly_challenge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🍂✨ September Challenge – Autumn Productivity App ✨🍂

Screenshot (4)

“If September was a desktop app, it would smell like cinnamon, glow like pumpkin candles, and play lo-fi beats while you study.”


🧡 About This Project

Hi! I’m Bruna 👋 — this is my first real Electron + JavaScript app.

I tried Tkinter twice during the Codédex Copilot course (it was cute but not me), and I wanted a real challenge. This autumn I finally jumped into Electron, JavaScript, CSS and let Copilot help me turn a vibe into code.

I’m still a perfectionist and still working on features — but right now I’m in love with how cozy it feels 🥰.


🌟 Features

  • 📝 To-Do List

    • Add tasks with the friendly little “+” button.
    • Click to mark complete — your progress bar fills like a pumpkin latte.
    • Visual progress bar = serotonin boost.
  • Pomodoro Timer

    • Short (25 min) or long focus sessions.
    • Short breaks for snacks, long breaks for actual walks.
    • Start / Pause / Reset with cute buttons.
  • 📅 Mini Calendar

    • Organize your study sessions visually.
    • Coming soon: little leaf stickers for important days 🍃.
  • 🍂 Autumn Aesthetic

    • Pixel-art café, pumpkins, falling leaves.
    • Soft oranges, warm reds, and creamy whites:
--dark-red: #811f0d;
--medium-red: #cb521f;
--orange: #e69a4d;
--light-orange: #f3ca84;
--cream: #f6e3ba;
--bright-orange: #f4830b;

🛠 Tech Stack

  • HTML5 – structure
  • CSS3 – aesthetic
  • JavaScript – logic
  • ElectronJS – desktop shell
  • Canva + Figma – UI mockups (our love-hate saga)

🖌 Assets

  • Hand-picked from Adobe Firefly + Vecteezy
  • Designed & arranged in Figma and Canva
  • Color palette inspired by real autumn leaves 🍁

💻 Installation

# Clone the repository
git clone https://github.com/TheWitch593/Monthly_challenge.git

# Install npm packages
npm install

# Install ElectronJS
npm install --save-dev electron

▶️ Usage

npm start
  • Add tasks in the To-Do list
  • Watch the progress bar fill up
  • Set Pomodoro sessions and take cute breaks
  • Pretend you’re in a lo-fi coffee shop somewhere in September

🎨 Design Notes

  • Started with square photos, cried a bit, then Copilot taught me border-radius: 50% and life got better.
  • Designed everything to look like a cozy pixel-art café.
  • Color palette = instant autumn vibes.
Screenshot (5) Screenshot (6)

🤖 GitHub Copilot Adventures

Copilot was my co-pilot for:

  • Autocompleting Electron boilerplate.
  • Suggesting JavaScript functions for the timer & progress bar.
  • Debugging CSS (especially making circles 😭➡️😊).
  • Tiny style tweaks at 3 AM.

🍬 Life Updates While Coding

  • Cola cans: “don’t count” 😅
  • Sweet snacks: “lost track after 20” 🍫
  • Lo-fi beats: on repeat 12 hours
  • Canva + Figma: hate it. love it. hate it. love it.
  • Mood: Pumpkin Spice Determination™

📚 What I Learned

  • How to build an actual app with ElectronJS from scratch.
  • DOM manipulation & event handling in vanilla JavaScript.
  • CSS variables for consistent colors.
  • How to ask Copilot for help like a pro.
  • That perfectionism + lo-fi beats = a dangerous combo.

🙌 Acknowledgements

  • Codédex Monthly Challenge + GitHub Education Team 🤝
  • Assets from Adobe Firefly & Vecteezy
  • Canva & Figma for the UI (love-hate forever 💔💖)

📬 Contact

Bruna Dragulin LinkedIn


✅ Codédex Challenge Checklist

  • Small interactive GUI app ✅
  • September/Autumn theme ✅
  • Uses ElectronJS ✅
  • Screenshots + Copilot notes ✅
  • Cute aesthetic + funny notes ✅

“September is about catching a vibe and turning it into code. This app is my vibe: cozy, pixelated, slightly caffeinated.”

About

Solving Codedex monthly coding challenges — my solutions, learning notes, and coding progress.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors