RoseDeck

Create your own account to collect different rarities of roses based on the amount of tasks completed!

Comment

2 Members in First or Second Hackathon!

Inspiration

The recent craze surrounding the new Pokémon Mobile Card Game has captivated our peers, sparking an idea: what if we combined the thrill of collecting cards with a fresh twist on productivity? That inspiration became the foundation of RoseDeck, a gamified approach to staying productive and achieving goals.

What it does

RoseDeck is a productivity app with a new twist... after signing in through our secure login system, users can access their personalized dashboard, where tasks are managed dynamically. Each completed task nurtures a virtual rose in the app’s interface, gradually helping it grow. Users can collect that color of a rose in their virtual card collection once a rose is fully grown. With its variety of unique roses to unlock, RoseDeck motivates users to stay productive while celebrating their progress in a rewarding way.

How we built it

We began by designing the app’s interface in Figma to ensure and visually appealing user experience. The frontend was developed using React.js, Next.js and TailwindCSS, providing a clean and responsive design. On the backend, we used Node.js to handle server-side logic and connected it to a MongoDB database with Mongoose to manage user accounts, tasks, and rose collections.

Challenges we ran into

Our biggest hurdle was tackling the backend development. While some team members had prior experience, none of us had worked with Node.js or Mongoose before. Initially, we leaned on an ACM Hackpack for guidance but quickly found ourselves stuck, unsure of how to proceed. Hours of trial and error ensued, testing our patience and problem-solving skills as we learned backend development on the fly.

Accomplishments that we're proud of

Despite the challenges, we’re incredibly proud of what we accomplished:

  1. A fully functional app: We implemented the majority of the features we initially set out to build, from task management to rose collection.
  2. Custom assets: Every visual element, from the dashboard to the rose designs, was created entirely by our team.
  3. Backend success: Though we started with minimal knowledge of Next.js and Mongoose, we managed to create a functioning backend that ties the app together seamlessly.

What we learned

Our biggest learning curve involved backend development. Through this project, we gained valuable experience in using Next.js for server-side rendering and Mongoose for managing databases.

What's next for RoseDeck

The foundation for RoseDeck is solid, but there’s so much room for growth:

  1. Enhanced security: Implementing password hashing and email verification for safer user authentication.
  2. Expanded collections: Adding more flowers with varying levels of rarity to keep users engaged and excited about completing tasks.
  3. Community features: Enabling users to share their progress and collections with friends, inspiring motivation and friendly competition.

Built With

Share this project:

Updates