Project: Quizουλος

Project: Quizoulos – A Dynamic Mobile Quiz Game

Quizoulos is a feature-rich, customizable multiplayer quiz game application built from the ground up with a modern mobile-first tech stack. It offers a dynamic and engaging experience for users, allowing them to compete in teams through multiple rounds of questions across various categories and difficulty levels.

How It Works

The user flow is designed to be intuitive and seamless, guiding players from setup to the final results:

1. Welcome Screen: The entry point of the application greets users with a welcome message and a clear call-to-action to start a new game.
2. Game Setup: This is the core of the customization. I built a comprehensive setup screen where users can tailor their game experience.
   • Team Configuration: Users can select the number of teams (from 2 to 6) and customize each team’s name and color using an interactive color picker within an action sheet.
   • Game Rules: Players can set the number of rounds, the question difficulty, and the time limit for each question using custom-built slider and numeric input components.
   • Category Selection: The app dynamically fetches all available categories and allows users to include or exclude them from their game.
3. Gameplay: Once the game starts, players are taken to the main game screen. The game proceeds in turns, with each team being presented a unique question for the round. A custom timer hook, manages the countdown for each question.
4. Scoring & Results: Teams are awarded points for correct answers. A real-time Scoreboard component displays the current standings. After the final round, the app navigates to the results screen, which declares the winner (or a tie) and shows the final scores.

Technical Deep Dive

I built this application using a modern and robust stack, focusing on clean architecture, reusability, and a seamless developer experience.

• Core Framework: The app is built with React Native and Expo, utilizing Expo Router for file-based navigation, which simplifies routing logic and keeps the codebase organized. The entire project is written in TypeScript for type safety and improved code quality.
• Styling: For the UI, I integrated Tailwind CSS with React Native via NativeWind. This allowed for rapid development with utility-first classes while maintaining a consistent design system. This is further enhanced by Gluestack UI, which provides a set of accessible and composable React Native components that are compatible with NativeWind styling. The app also supports both light and dark modes.
• State Management: I chose React’s Context API combined with the useReducer hook for robust and predictable global state management. The entire game state—from settings and teams to the current round and active questions—is managed centrally in QuizContext.tsx. This approach ensures a single source of truth and simplifies data flow across the application without the need for external state management libraries.
• Backend & Data: The application is powered by a Supabase backend, which serves as a dynamic and easily updatable source for all quiz questions and categories. In questionService.ts, I leveraged Supabase’s client library to fetch data, including using a Remote Procedure Call (RPC) for efficiently retrieving unique categories and a randomized view (randomized_questions) for performant, random question selection based on game settings.
• Custom Hooks & Components: To keep the component logic clean and reusable, I created several custom components and hooks. A key example is the useGameTimer hook, which encapsulates all timer-related logic (start, pause, reset), making the GameScreen component more declarative and easier to maintain.