Corebiz Front-end Test

This is a solution to the Corebiz Front-end Test

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

Step 1

• Use a API de produtos para pegar os dados dos produtos e construir a vitrine.
• Ao clicar no botão “Comprar” deve ser incrementada a quantidade de itens no carrinho.
• Ao atualizar a página, a quantidade de produtos no carrinho deve ser preservada.

Step 2

• Crie validações para o form de contato. (Ex: se o e-mail for inválido ou o nome vazio)
• Ao clicar em enviar com os campos validados, o form precisa ser disparado via javascript para a API de newsletter seguindo as especificações da API.

Screenshot

Links

• Live Site URL: https://corebiz-frontend-test-viniciuscosta89.vercel.app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• pnpm - Fast, disk space efficient package manager
• React - JS library
• Vite - Frontend Tooling
• TanStack Query - Powerful asynchronous state management
• Typescript - JavaScript with syntax for types
• Swiper - The Most Modern Mobile Touch Slider
• styled-components - CSS-in-JS
• Zod - TypeScript-first schema validation with static type inference
• React Hook Form - Performant, flexible and extensible forms with easy-to-use validation
• Axios - Promise based HTTP client for the browser and node.js
• Framer Motion - A production-ready motion library for React
• React Rating - Zero-dependency, highly customizable rating component for React

Useful resources

• Documentations from React, TanStack Query, styled-components, Vite, Zod, React Hoof Form, Axios, Framer Motion, React Rating and Swiper.

Author

• GitHub - https://github.com/viniciuscosta89
• Frontend Mentor - @viniciuscosta89

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

npm build