https://github.com/gabrielcoutz/frontend-react

Projeto criado para conhecimento e prática na criação de interfaces com Tailwind, domínio do React Hook Form, Zod e apresentação do Composite Pattern, Cypress e Storybook.
https://github.com/gabrielcoutz/frontend-react

composite-pattern cypress nextjs react react-hook-form react-query storybook tailwind ui-design ux-design zod

Last synced: 11 months ago
JSON representation

Projeto criado para conhecimento e prática na criação de interfaces com Tailwind, domínio do React Hook Form, Zod e apresentação do Composite Pattern, Cypress e Storybook.

• Host: GitHub
• URL: https://github.com/gabrielcoutz/frontend-react
• Owner: GabrielCoutz
• Created: 2023-04-18T15:07:04.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-09T14:13:02.000Z (over 2 years ago)
• Last Synced: 2025-01-24T16:48:40.827Z (about 1 year ago)
• Topics: composite-pattern, cypress, nextjs, react, react-hook-form, react-query, storybook, tailwind, ui-design, ux-design, zod
• Language: TypeScript
• Homepage:
• Size: 811 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Frontend para cadastro de usuários e produtos

Consumindo meu próprio backend: NestJS API com Prisma 




  



## Tópicos



 • 📋 Sobre o Projeto 

 • 🔮 Tecnologias 

 • 🛠 Funcionalidades 

 • 🎥 Demonstração 

 • 😎 Autor 



---

📋 Sobre o projeto


Desenvolvendo este projeto tive um contato maior com o **React** e principalmente o **NextJS**, como utilizá-lo, e onde utilizá-lo.

Todos formulários foram feitos usando o **React Hook Form**, e validados com o **Zod**, deixando todo processo de manuseio/checagem de dados mais rápido e simples.

Tive o primeiro contato com o **Tailwind**, e como já me sinto muito confortável com o CSS Vanilla, utilizá-lo aumentou a produtividade em 1000%.

Foram feitos testes unitários com o Jest + React Testing Library, tendo **90%** de coverage. Em adicional, testes **E2E** com Cypress.

Não é possível replicar o projeto com o container docker, ainda, porém a API está disponível em: github.com/GabrielCoutz/nestjs-prisma-api

---

🔮 Tecnologias


[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://react.dev/) [![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/pt-BR/) [![Redux](https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white)](https://redux.js.org/) [![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/pt/) [![Tailwind](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/) [![NextJS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/) [![Storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white

)](https://storybook.js.org/) [![Cypress](https://img.shields.io/badge/Cypress-17202C?style=for-the-badge&logo=cypress&logoColor=white)](https://www.cypress.io/)

---

🛠 Funcionalidades


**Autenticação**

:white_check_mark: Validação para acessar a página de perfil, feita do lado do servidor com o `getServerSideProps()`.

:white_check_mark: Cookies para autenticação

**Estrutura**

:white_check_mark: Composite Pattern utilizado

**Plus**

:white_check_mark: Validação de dados com Zod

:white_check_mark: Documentação dos componentes com Storybook

:white_check_mark: Todos estados e efeitos são gerenciados pelo Redux

:white_check_mark: Feedback em todas ações realizadas (loading, error, alert...)

:white_check_mark: React Hook Form utilizado

---

📷 Demonstração


#### Desktop

https://user-images.githubusercontent.com/86968853/235247313-5b9cb4c3-8dc8-419c-b2ec-68c02c156396.mp4

#### Mobile

https://user-images.githubusercontent.com/86968853/235247360-ca59754b-6b24-41d5-baaa-6e1028b903e1.mp4

### Storybook

https://user-images.githubusercontent.com/86968853/235800486-11d831ce-2b7a-4855-8694-8ba0ce8297dc.mp4

---

😎 Entre em contato


[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://www.linkedin.com/in/gabrielcoutz/) 



  Desenvolvido por eu mesmo😊