React Challenge Supera

React Challenge Supera is an open-source Next.js project that implements a game-store ecommerce interface, built by Rafael Goulart as a programming challenge for an interview at Supera. It runs on the Next.js React framework with Chakra UI for styling and is deployed live on Vercel at https://react-challenge-rafael.vercel.app/. The repository documentation is written in Portuguese and includes setup instructions for running the app locally with Yarn.

What is React Challenge Supera?

React Challenge Supera is a web application template for a game ecommerce store, built specifically to demonstrate React skills in an interview context. It takes a product catalog of games as its data and produces a browsable storefront where visitors can list games, sort them, add items to a shopping cart, and calculate shipping costs. The project was authored by Rafael Goulart and is maintained on GitHub under the MIT license. The live demo is hosted on Vercel.

Key Features

• Game listing — Displays a catalog of games with an interface built in Chakra UI, allowing visitors to browse available titles.
• Cart management — Users can add games to a shopping cart directly from the product listings.
• Shipping calculation — The checkout flow includes a "frete" (shipping) calculator that estimates delivery cost for the selected items.
• Sorting — The game catalog can be reordered with built-in sort controls, making it easier to compare products.
• Next.js framework — Built on Next.js, giving server-side rendering and a React-based component architecture.
• Chakra UI styling — Uses the Chakra UI component library for a consistent, themeable interface.
• Vercel deployment — The project includes a live demo deployed to Vercel, and the README documents how to run it locally.

Who is it for?

• Interview candidates — Developers preparing for a frontend interview can study this project as a complete example of a React ecommerce interface, including cart state and shipping logic.
• React learners — People learning Next.js and Chakra UI can use the codebase to see how the two are integrated in a functional storefront.
• Recruiters or hiring teams — The project serves as a portfolio piece that demonstrates a candidate's ability to build a complete UI feature set in React.
• Game storefront builders — Anyone prototyping a small game store can reuse the project's structure and layout as a starting point.

What can you do with React Challenge Supera?

• Frontend developers: Study the implementation of a game ecommerce interface, observing how game listing, cart state, and shipping calculation are wired together in Next.js.
• Interview prep: Run the project locally with yarn install and yarn dev, then explore the code to understand how a typical React challenge is structured.
• Designers: Use the Chakra UI-based layout as a visual reference for a game storefront, since the screenshots in the README show the resulting interface.

How does React Challenge Supera work?

The README provides a simple two-step setup. After installing Node.js and Yarn, run yarn install to install dependencies and yarn dev to start the development server. The app then runs at http://localhost:3000. The project also has a production build deployed on Vercel.

Pros and cons

• MIT license — The project is free to use and modify under the MIT license.
• Well-documented setup — The README includes clear installation steps for local development.
• Limited scope — The challenge is focused on the frontend interface; it does not include backend features like a real payment gateway, only simulated cart and shipping calculations.
• Interview-specific — Because it was built as a challenge, it is not a full production storefront with product management or order persistence.

FAQ

What does React Challenge Supera do?

React Challenge Supera is a game ecommerce interface built with Next.js and Chakra UI. Users can list games, sort the catalog, add games to a cart, and calculate shipping costs. It was developed as an interview challenge and is deployed live on Vercel.

Which technologies does React Challenge Supera use?

The project uses Next.js as the React framework, Chakra UI for styling, and Vercel for deployment. The setup instructions require Node.js and Yarn to run the project locally.

Is React Challenge Supera free to use?

Yes, the project is released under the MIT license, so it can be freely used, modified, and distributed. The source code is available on GitHub.

Where can I see a live demo of React Challenge Supera?

The live demo is hosted at https://react-challenge-rafael.vercel.app/. The README also includes screenshots of the interface in the .github/screenshots directory.

Who created React Challenge Supera?

The project was created by Rafael Goulart (GitHub user RafaelGoulartB) as a React challenge for an interview. The GitHub repository name indicates it was prepared for Supera, and the README credits him as the author.