https://github.com/modscleo4/woovi-challenge

Frontend Developer Challenge for Woovi
https://github.com/modscleo4/woovi-challenge

qrcode react typescript

Last synced: 11 days ago
JSON representation

Frontend Developer Challenge for Woovi

• Host: GitHub
• URL: https://github.com/modscleo4/woovi-challenge
• Owner: modscleo4
• License: apache-2.0
• Created: 2024-07-13T19:37:12.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-13T19:40:15.000Z (7 months ago)
• Last Synced: 2024-11-24T02:19:10.091Z (2 months ago)
• Topics: qrcode, react, typescript
• Language: TypeScript
• Homepage:
• Size: 69.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Woovi Pix+Credit Challenge

This is the repository for the Frontend Developer Challenge for Woovi.

The challenge is to replicate 3 pages of Woovi Checkout process, as designed in the following [Figma project](https://www.figma.com/design/hv1LgD7oNrtlmfWgKBG6PF/Woovi-Desafio-Front).

## Getting Started

Since this project is done using React and Vite, simply clone the repository and run the following command to start the development server.

```bash

npm ci

npm run dev

```

## Pages

The pages replicated are:

1. Payment Method

2. Pix

3. Credit Card

4. Confirmation

## Technologies

- React

- Vite

- TypeScript

## Libraries

Apart from Material-UI/Icons, no other external libraries were used in this project.

QR Code generation was done using my own implementation, which can be found in the `src/qr.ts` file.

## Structure

All pages are located in the `src/steps` directory, with each page having its own directory containing the components and styles for that page. Common components are located in the `src/components` directory.

## Styling

Styling is done with custom CSS. No CSS frameworks were used in this project.

The base styles such as colors and font definitions are located in the `src/index.css` file, with each component having its own styles in the `src/{component}/styles.css` file.