Tropie ID

Tropie ID is a tournament application for sports and esports events. Tropie ID makes it easy for tournament organizers to manage their events, from participant registration, match schedules, to winner announcements.

In this project, I was responsible for the UI/UX design and front-end development. I designed the user interface using Figma and implemented it using React, TypeScript, and Tailwind CSS. I also integrated the application with a backend API to fetch and display tournament data.

Mascot Design

The mascot for Tropie ID is a friendly and energetic character that represents the spirit of competition and sportsmanship. The mascot was designed to be appealing to a wide audience, including both players and spectators. It serves as a visual identity for the application and is used in various promotional materials.

Color Palette

The color palette for Tropie ID was carefully selected to convey a sense of excitement and energy. The primary color is orange which represents enthusiasm, creativity, sportiness, and energy.

Design System

32+ components were designed and implemented to create a consistent and cohesive user experience across the application. The design system includes buttons, forms, modals, cards, and other UI elements that can be reused throughout the application.