ManageHack

Inspiration

Our initiative was motivated by the universal issue developers encounter in management skills and teamwork. Although technical skill is crucial, the skill to plan, organize, and lead a team is no less vital for career enhancement. Yet it is difficult to develop these skills, given that workshops, seminars, and webinars are primarily focused on theory without incorporating considerable hands-on practice. Without actual experience, principles such as team dynamics, deadline pressure, and resource allocation are difficult to learn.

This is where hackathons come in. They mimic a compressed, high-stress situation that mirrors actual project phases where the participants must make quick decisions, manage tasks, and operate effectively under time constraints. Because we were also participating in a hackathon, we find it to be an amazing idea to create a game that mimics this experience. This enables players to utilize task management, crisis management, and team collaboration practice in a fun and interactive interface.

By bridging the gap between technical skill and management capability, this learning game gives developers a low-risk, high-impact way to gain real experience, while enjoying themselves.

What it does

Within the total duration of approximately 2 hours, we let the user (player) go through 6 steps of a hackathon: Choosing the team, finding ideas, planning the execution, coding, pitching and retrospective.

Choosing the team: Profiles (including name, position, and an advantage) of 8 candidates will be shown on the screen. From that list, the user will have to choose 5 members to form a team. Only when the team has been formed will the hidden traits (disadvantages) of the members be revealed. The AI bots have diverse personality traits and hidden traits that will create difficulties to the user. This stage requires the user to carefully consider how candidates’ positions and strengths can complement each other.
Finding ideas: During this stage, the user will discuss viable and innovative ideas with their teammates in the group chat, then vote for the best option. The user should try to maintain a focused and effective discussion, and they can convince their teammates to pick the best idea in their opinion. This stage will make the user learn to respect others’ ideas & convince people.
Planning the execution: For each task, the team will vote for its weight, discuss the most accurate estimation, and then do the final vote. The user's job, again, is persuading their teammates to choose the best option. Based on the final weights, the user should assign tasks to their teammates based on each person's strengths and weaknesses.
Coding: During the coding stage, the AI bots can commit and push their code to the shared GitHub repository just like a real human teammate. It is the user's task to merge these pull requests and solve any resulting merge conflict. In the backlog tab, there are a dependency graph and a Kanban table showing the team’s progress. In the Jira tab, there are current stamina and mood status, current tasks, and traits of each teammate. The clock is at the upper right corner of the screen, and the user can press the ‘Next’ button to start the next working session which lasts one hour. At the start of each working session, there will be new updates or pull requests from the teammates.
Pitching: Using the messaging screen, the team will now pitch to the judges about their project.
Retrospective: Using the messaging screen, the team will reflect on the whole hackathon experience together: challenges the team met, things they have done well, and areas for improvement. The AI chatbots will also share their experiences (feedbacks of the game to the user), which the user can learn from to improve in their next management task.

How we built it

Our project is divided into frontend, backend, and AI components. Below is the breakdown of technologies that we used.

Frontend

The frontend is responsible for the user interface and client-side interactions. We used TypeScript, CSS, and the following technologies:

Vercel: For deployment and hosting, to provide a fast and scalable environment.
Next.js: A solid React-based framework that provides server-side rendering (SSR) and static site generation (SSG) for better performance.
Tailwind CSS: A utility-first CSS framework that simplifies the process of building a modern, responsive UI for us with minimal effort.
ShadUI: A component library based on Radix UI, providing accessible and customizable UI components.
DndKit: A lightweight and extensible drag-and-drop library for creating interactive features.
v0: A utility to use in AI-powered automation and optimization.
Claude: Anthropic AI model providing advanced language processing for specific functionalities.

Backend

The backend handles server-side logic, authentication, and data storage. We built it using JavaScript and the following:

Express.js: A fast, lightweight Node.js framework for efficiently handling API calls.
Passport.js: A plug-and-play authentication middleware that supports various login options (OAuth, JWT, etc.).
MongoDB: NoSQL database used to store and maintain user data, application settings, and other server-side information.
Socket.io: Used to establish real-time, bi-directional communication between client and server, necessary for interactive elements such as live updates.

AI

For creating AI bots, we used Python and OpenAI GPT 4o-mini, which fine tunes AI to roleplay and behave as we want.

Challenges we ran into

1. Rebuilding the Database Five Times
Our initial database structure didn’t align well with the evolving needs of the project, leading to multiple redesigns. Each iteration required significant time and effort, from restructuring data models to migrating existing records. This taught us the importance of careful database planning from the start to minimize unnecessary rework.

2. AI Model Training Dependencies
The AI model required training after the database was structured and the core idea was finalized. This dependency caused delays, as any database changes meant retraining the AI from scratch. We learned that defining a solid foundation early on can prevent cascading issues in AI development.

3. Lack of a Structured Plan
Although we wanted to create a detailed and clear roadmap, we were unable to do so as the idea is completely new to us and we could not imagine all the tasks needed to implement it. As a result, we encountered most problems as we went along. This reactive approach led to unexpected blockers, causing setbacks in both development and decision-making.

4. Failed Attempts at Cloning a GitHub Repository
We tried multiple methods to clone a GitHub repository, but each attempt failed due to technical or access-related issues. Debugging took longer than expected, impacting our workflow and slowing down development. This reinforced the importance of having a reliable backup strategy and testing workflows beforehand.

Accomplishments that we're proud of

We Had Fun!: Despite the challenges, our team really enjoyed the time brainstorming, coding, and collaborating. We enjoyed experimenting with new technologies, unleashing our imagination, and learning from one another.

A Creative but Challenging Idea: We came up with a creative idea, but it was just really hard to implement. The difficulties tested our technical and problem-solving skills, helping us grow as developers.

Never Give Up: We faced stressful challenges but tried our best to keep the determination and find the best solutions possible.

What we learned

Throughout this project, we learned some lessons that will benefit us well in our future development endeavors. Some of the most significant things we learned are:

1. Teamwork in a Real-World Project: Here we learned how to work together in a fast-paced development environment. We discovered the importance of clear communication, task delegation, and adapting to one another's strengths. Getting through disagreements and resolving issues together made us a stronger, more cohesive team.

2. Backend and Frontend Integration: Combining the backend and frontend wasn't quite as easy as expected — mismatched data formats, API bugs, and async issues were challenges. We learned how to correctly structure API endpoints, efficiently handle data flow, and debug connection issues. This reinforced the importance of having consistently correct data models and API documentation.

3. Implementation is Harder Than It Seems: Turning an idea into reality is far more complex than brainstorming tidy features. From unexpected bugs to time constraints, we faced hurdles at every stage. We now understand the importance of practical scoping, sufficient planning, and flexibility in development.

What's next for ManageHack

Due to time constraints, we couldn’t implement all our ideas, but we plan to expand ManageHack with the following features:

More AI Bots: Increase from 8 AI bots to 24, offering users more choices in teammates and an enhanced experience.
Diverse Hackathon Ideas: Introduce multiple hackathon ideas for varied challenges and learning experiences.
Crisis Simulation: Add unexpected setbacks like technical failures and team conflicts to reflect real hackathon challenges.
Team Traits & Abilities: Implement diverse traits and skills for AI teammates, which create varied team dynamics.
Task Dependencies: Introduce task dependencies to simulate real project workflows, requiring strategic planning.
Extra Project Management Tools: Introduce more project management tools, e.g. dependency chains, burndown charts, and Gantt charts, during the ‘Planning the execution’ stage, so that the users gain more techniques to apply in real-life projects.
And more…