GT Esports Full-Stack Developers Assessment

Welcome! In this short coding exercise, you’ll add features onto a very basic version of our web app by adding two small features.
The goal is to see how you approach reading code, extending functionality, and writing clean, understandable code.

This app is developed using React, Tailwind, and Vite.

Estimated time: about 1 hour - 2 hours

If you have any questions about this assessment, please contact @sijunkevinhu on Discord.

Getting Started

1. Clone your copy of the repository
   • Click "Use this template" (green button at the top of the repo)
   • Create your own repo from the template.
   • Make sure to set it as Private
2. Install Dependencies
   • npm install
   • If issues with dependencies, try removing node_modules and reinstalling
3. To run app locally
   • npm run dev

Tasks

Please complete both of the following features:

Anything not specified in the steps in up to your judgment. For example, for the detail view (modal / popup), the modal/popup can look however you want. The layout and design is up to you.

1. Add a Search Bar & Functionality in Games Page

• Add an search input field for the card grid of game cards (both competitive and casual).
• As the user types, filter the list in real time by game name.
• The search should be case-insensitive.
• If no games match, display a "No results found" message.
• There's two types of games. Competitive and casual. They are two separate lists of games. The search functionality only filters either competitive or casual based on the current type selected on the page.
• The games data is given to you in a JSON format in the gamesData.ts file.

2. Add a Detail View (Modal / Popup) in Games Page

• When a user clicks on 'Learn More' in a game card, open a modal (or a popup) that shows the game's name and description
• The modal should include a Close Button
• The modal should also close when the user presses the Esc key
• The games data is given to you in a JSON format in the gamesData.ts file.

Bonus (Optional)

This part is not required and will not affect your assessment. If you'd like to show more of your product/design thinking, we'd love to hear your ideas:

• Visit the GT Esports Website.
• Suggest 1-3 new features or improvements you think could make this site better for users.
• These can be anything: a small UI improvement, a new feature, or a usability fix.
• You don't need to implement them. Just write your suggestions in a short list at the end of your submission (e.g. in a separate markdown file or in the README of your repo)

Submission

When you're finished:

1. Commit your changes with a short message and your name.
2. Push your work to your private repo
3. Share access with this GitHub username so we can review it
   • GitHub User: sijun-kevin-hu

Final Notes

• Keep it simple, we don't expect pixel-perfect design
• Focus on functionality, readability, and good development practices
• Someone will contact you about your application process after completing
• Thank you for taking the time to complete this exercise!