frontend challenge - Capputeeno 💻

Welcome! This repository contains my solution for Rocketseat´s open source Frontend Challenge.

Content:

About • Challenges Requirements • Utils Links • Installation • Prerequisites • Running the API (Backend) • Running Frontend • Results • Collaborators • License •

🧠 About

The goal of this project is to enhance my frontend development skills using Next.js, tailwindCss and TypeScript, with a focus on server components and their iterations. This project provides an opportunity to explore new approaches to solving technical challenges, particularly in consuming GraphQL APIs.

The challenge is to implement an e-commerce platform for selling mugs and t-shirts, featuring the following functionalities:

• Product catalog with pagination
• Filter products by category
• Search by product name
• Add and remove products from cart
• Checkout

📋 Challenges Requirements

• Follow this prototype
• Use Next.js and Typescript
• Create components with styled-components (I made it with TailwindCss)
• consume from the provided GraphQL API

🔗 Utils Links

1. Challenge Figma
2. Project Original Challenge

🖥️ Installation

This section describes how to run the project locally.

Pre-requisites

Here you list all prerequisites necessary for running your project. For example:

• NodeJS
• npm
• TypeScript
• Git

Running the API (Backend)

1. Clone this repo

git clone https://github.com/EriveltoSilva/frontend-challenge-ecommerce.git

2. Go to the API folder

cd frontend-challenge
cd api

3. Install dependencies

npm install

3. Run start

npm start

4. Opening GraphiQL in Web Browser with url (optional):

http://localhost:3333/

5. You can see all api products typing in GraphiQL (optional):

query{
  allProducts{
    id
    name
    description
    price_in_cents
    image_url
    sales
    created_at
    category
  }
  _allProductsMeta {
    count
  }
}

Running Frontend

1. Clone this repo

git clone https://github.com/EriveltoSilva/frontend-challenge-ecommerce.git

2. Go to the project folder

cd frontend-challenge

3. Install dependencies

npm install

4. Copy .env.example to .env.local file

cp .env.example .env.local

5. Run Frontend

npm run dev

📌 Results

🤝 Collaborators

Special thank you for all people that contributed for this project.

Erivelto Silva

📓 License

This project is licensed under the MIT License. See the LICENSE file for more information.