KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #cli #open-source #ai #claude-code #codex #deepseek-harness #dsh-plugin #react #windows #developer-tools

challenge-frontend

★ 80 Open GitHub ↗

This repository houses the solution to Rocketseat's frontend challenge, which I developed during a video on my YouTube channel.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Capputeeno

Welcome! This repository contains my solution for [Rocketseat´s](https://www.rocketseat.com.br/ignite?utm_source=influencer&utm_medium=publipost&utm_campaign=lead&utm_term=ignite&utm_content=lead-ignite-publipost-organic-cupom_KIPPERDEV-none-none-none-none-redes_kipperdev&referral=kipperdev&coupon=KIPPERDEV@IGNITE) open source [Frontend Challenge](https://github.com/Rocketseat/frontend-challenge).

This project was developed during a video on my YouTube channel, to help others who are studying to become Frontend Developers.

- [Tutorial Part 1](https://youtu.be/fF-UWgeiELc)
- [Tutorial Part 2](https://youtu.be/I_thj22FsrE)

![Prototype](https://raw.githubusercontent.com/Fernanda-Kipper/challenge-frontend/master/.github/prototype.png)

# 🧠 About

The goal with this project is to help other who are searching for an opportunity as Frontend Developer, through the tutorial that i made on Youtube, i wish to help you to train your Frontend skills and learning new ways of solving technical challenges.

The challenge is to implement an e-commerce for the sale of mugs and t-shirts that should have the following functionalities:

- [x] Product catalog with pagination
- [x] Filter products by category
- [x] Search by product name
- [x] Add and remove products from cart
- [x] Checkout page

## 📋 Requirements

- Follow [this prototype](https://www.figma.com/file/rET9F2CeUEJdiVN7JRu993/E-commerce---capputeeno?node-id=680%3A6449)
- Use Next.js and Typescript
- Create components with styled-components
- consume from the provided **GraphQL API**

## 🖥️ Installation

### Frontend

1. Clone this repo
```bash
git clone https://github.com/Fernanda-Kipper/challenge-frontend.git
```

2. Go to the project folder
```bash
cd challenge-frontend
cd capputeeno
```

3. Install dependencies
```bash
npm install
```

3. Run Frontend
```bash
npm run dev
```

### Running the API

2. Go to the API folder

```bash
cd challenge-frontend
cd api
```

3. Install dependencies
```bash
npm install
```

3. Run start
```bash
npm start
```

challenge-frontend

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README