Kaminariapp System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the Kaminariapp, a mobile-first web application designed for the community and tournament hub of Kaminari Cards. This document will detail the functional and non-functional requirements, user personas, core user flows, and design elements necessary to create a seamless and engaging user experience.

System Overview

Kaminariapp is a web application tailored for the Kaminari Cards community, focusing on One Piece TCG tournaments. The application will provide users with a streamlined experience for authentication, profile management, tournament participation, ranking display, and match reporting. The system will be built with a modular architecture ready to integrate with Supabase, ensuring scalability and flexibility.

Functional Requirements

• As a User, I should be able to log in using Google authentication.
• As a User, I should be able to register and upload a profile picture during the registration process.
• As a User, I should be able to view a clean and user-friendly hub (dashboard) that reflects One Piece TCG aesthetics.
• As a User, I should be able to see a banner or card for the active league with a prominent "Participar" button.
• As a User, I should be able to view a ranking mural themed like "Wanted" posters, displaying only the top rankings.
• As a User, I should be able to see my profile picture, name, and accumulated score/reward for the month on the ranking mural.
• As a User, I should be able to view a list of opponents available for monthly duels.
• As a User, I should be able to report match results using a form with a dropdown to select the defeated opponent and an upload button for match evidence.

User Personas

• Player: A member of the Kaminari Cards community who participates in tournaments and engages with the hub features.
• Administrator: A user responsible for managing tournaments, updating league information, and maintaining the system.

Core User Flows

1. User Authentication and Profile Setup:

   • User accesses the login page -> selects Google login -> completes authentication -> uploads profile picture during registration -> accesses the main hub.

2. Navigating the Hub:

   • User logs in -> views the dashboard with One Piece TCG aesthetics -> sees active league banner -> clicks "Participar" to join the league.

3. Viewing Rankings:

   • User navigates to the ranking mural -> views top-ranked players with "Wanted" poster theme -> checks personal score and rewards.

4. Match Reporting:

   • User accesses the reporting system -> selects defeated opponent from dropdown -> uploads match evidence -> submits report.

Visuals Colors and Theme

• primary: #000000 (Absolute Black)
• primary_light: #333333 (Dark Gray)
• secondary: #FF4500 (Neon Orange)
• accent: #FFFF00 (Neon Yellow)
• highlight: #FFD700 (Gold)
• bg: #000000 (Absolute Black)
• surface: rgba(0, 0, 0, 0.8) (Dark Surface)
• text: #FFFFFF (White)
• text_muted: #CCCCCC (Muted Gray)
• border: rgba(255, 69, 0, 0.2) (Subtle Neon Orange)

Signature Design Concept

The Kaminariapp will feature an interactive "Lightning Strike" theme on the homepage. Upon landing, users will experience a dynamic animation where neon lightning bolts strike across the screen, illuminating sections of the page. As users scroll, the lightning bolts will guide their attention to key areas, such as the active league banner and ranking mural. This effect will be achieved using framer-motion for smooth animations and gsap for scroll-triggered lightning effects. The interactive lightning will not only captivate users but also enhance navigation by highlighting interactive elements.

Interaction Model & Motion Direction

The landing page will employ a "parallax" interaction model, creating a layered depth effect as users scroll. Lightning animations will translate at different speeds, providing a visually rich first impression. Internal pages, such as the dashboard and profile settings, will maintain a "static" interaction model to prioritize readability and user efficiency.

Non-Functional Requirements

• The system must support integration with Supabase for database management.
• The application should be optimized for mobile-first access, ensuring responsiveness across devices.
• The user interface must adhere strictly to the specified color scheme and design guidelines.
• The application must be available in Brazilian Portuguese.

Tech Stack

• Frontend: React with Tailwind CSS
• Backend: Supabase for database and authentication
• Animation Libraries: framer-motion, gsap

Assumptions and Constraints

• The application will not include any Japanese text or typography.
• The design must exclude any shades of blue.
• The system will initially focus on One Piece TCG but should be adaptable for other card games in the future.

Glossary

• TCG: Trading Card Game
• Supabase: An open-source Firebase alternative providing backend services
• Neon: Bright, glowing colors used for emphasis in design

This document outlines the comprehensive requirements for the Kaminariapp, ensuring a cohesive and engaging experience for the Kaminari Cards community.