Tournimus

Tournimus

Roles

  • Full-Stack Developer
  • UI/UX Designer
  • Frontend Developer
  • Backend Developer

Technologies Used

  • Next.js
  • Node.js
  • Prisma
  • PostgreSQL
  • Next-Intl
  • NextAuth
  • Figma
  • shadcn/ui
  • Zustand
  • Google Authentication

Overview

Tournimus is a web app created to make organizing tournaments easier and more efficient. It helps automate scheduling, group assignments, and provides a management dashboard to keep everything in order. I developed Tournimus in collaboration with a friend, where we split the work based on our strengths and interests. The app was built using Next.js with a Node.js backend, and leverages modern technologies like Prisma for database management, PostgreSQL for storage, and NextAuth for authentication. You can test the website here: Tournimus.

Project Objectives

Our main goal with Tournimus was to create a powerful yet easy-to-use platform that would simplify the entire tournament management process. By automating tasks like schedule generation and group assignments, we wanted to reduce the manual workload for organizers and provide them with a seamless user experience.

My Contributions

Working on Tournimus was a fantastic experience where I got to wear many hats. Here’s a breakdown of my key contributions to the project:

Collaboration and Role Distribution

My friend and I decided to divide our responsibilities based on what we each enjoyed and were good at. I took the lead on the UI design, the front page, and the core logic for creating tournaments, both on the frontend and backend. This allowed me to focus on the aspects I was passionate about, while also learning new things along the way.

UI/UX Design

I was responsible for designing the app’s user interface in Figma, ensuring that it was both visually appealing and easy to navigate. My goal was to create a clean and intuitive layout that would make the complex task of tournament management feel straightforward. I leveraged the shadcn/ui library, which saved a lot of time and allowed me to focus on the design rather than building UI components from scratch.

Frontend and Backend Development

On the development side, I took charge of building the front page and implementing the tournament creation logic. This involved:

  • Frontend: I developed a user-friendly interface that guides users through the process of setting up a tournament. I used Zustand for state management, especially in handling the multi-step forms needed to capture all the details about a tournament.
  • Backend: I implemented the backend logic using Node.js and Next.js to handle data processing and storage. I learned how to work with Prisma, which served as the ORM to interact with our PostgreSQL database hosted on Vercel. This experience taught me the basics of setting up a database, managing migrations, and writing efficient queries.

Learning Authentication with NextAuth

One of the new things I got to learn was how NextAuth works. I implemented user authentication in Tournimus, including both standard email/password login and Google Authentication. This was an interesting challenge because I needed to understand how authentication flows work and how to securely manage user sessions across the app.

Core Features and Logic

The heart of Tournimus revolves around creating and managing tournaments. I worked on:

  • Automating Schedules: Developing the logic to automatically generate match schedules based on the tournament's format and rules.
  • Group Assignments: Creating a dynamic system for assigning teams or players to groups.
  • Management Dashboard: Building a dashboard that provides real-time updates on tournament status, including upcoming matches, scores, and standings.

Internationalization and Global Reach

We wanted Tournimus to be accessible to a global audience, so I set up internationalization using next-intl. This involved creating translation files and configuring the app to support multiple languages, making sure that all user-facing text could be easily translated.

GitHub and CI/CD Pipeline

To keep our codebase clean and our development process smooth, we set up a CI/CD pipeline with GitHub Actions. This ensured that every change we made was automatically tested and linted, helping us catch errors early and maintain high code quality.

Reflections and What I Learned

The Value of Collaboration

Working closely with a friend taught me a lot about teamwork and collaboration. We each played to our strengths, but also supported each other in learning new skills. This project was a great example of how much you can achieve when you have a shared vision and complementary skills.

Diving Into Prisma and ORM Basics

I gained practical experience using Prisma as an ORM, which made working with the database much easier and more efficient. It was my first time using an ORM, and I was impressed by how it helped in writing clean, type-safe queries and managing database migrations.

Understanding Authentication with NextAuth

Implementing NextAuth was both challenging and rewarding. I now have a much better understanding of how authentication works in a web application, and how to integrate third-party login providers like Google.

Leveraging UI Libraries for Faster Development

Using the shadcn/ui library was a game-changer for the UI part of the project. It saved a lot of time and allowed me to focus on the design aspects rather than building every component from scratch.

Looking Forward

Overall, building Tournimus was an incredible learning experience. I improved my full-stack development skills, learned how to handle authentication, and became more comfortable with state management using Zustand. Moving forward, I’m excited to apply these skills to future projects and continue growing as a developer.