https://github.com/1manuelc/dio-react-proj04-dioclone

https://github.com/1manuelc/dio-react-proj04-dioclone

axios json-server react react-hook-form react-icons react-router-dom styled-components vercel vite yup

Last synced: about 12 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/1manuelc/dio-react-proj04-dioclone
• Owner: 1manuelc
• License: mit
• Created: 2024-06-03T14:15:14.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-19T20:13:40.000Z (5 months ago)
• Last Synced: 2024-06-20T06:21:06.705Z (5 months ago)
• Topics: axios, json-server, react, react-hook-form, react-icons, react-router-dom, styled-components, vercel, vite, yup
• Language: JavaScript
• Homepage: https://dio-react-proj04-dioclone.vercel.app
• Size: 470 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Clone da DIO



  

  

  

  

  

  

  



Este projeto objetiva clonar as páginas de Home, Login, Cadastro e Feed inicial da plataforma Digital Innovation One, como desafio para conclusão de módulo prático do bootcamp React Web Developer da mesma plataforma.

[Deploy atualizado na Vercel](https://dio-react-proj04-dioclone.vercel.app/)

## Funcionalidades básicas

* Páginas com experiência do usuário simples e responsividade aprimorada.

* Cadastro de usuário funcional, que verifica existência do email no banco de dados emulado para não cadastrar no mesmo.

* Login funcional, verificando existência do email e se a senha está correta para conceder acesso, mostrando mensagens de erro no formulário.

## Implementação

O projeto foi feito em `React` e construído utilizando `Vite`, utilizando como base as dependências:

* `react-router-dom`: para roteamento das páginas.

* `styled-components`: para estilização de componentes.

* `react-icons`: para utilização de ícones.

* `react-hook-form`: para lidar com formulários de autenticação.

* `yup`: para validar os formulários de autenticação.

* `axios`: para fazer requisições de obtenção e criação de usuários.

* `json-server`: para emular um servidor local através de um arquivo json com os dados.

* `vercel`: para utilizar funcionalidades serverless e redirecionar chamadas à API em ambiente de produção.

obs: este projeto foi prototipado usando Figma, caso queira implementá-lo com base no protótipo para fins de estudo [acesse o protótipo clicando aqui](https://www.figma.com/design/yhW9LAMJkf5aPepJL1RyMt/DIO-Clone-Remake?node-id=0-1&t=ILKif7X86Qv0r87w-1).

## Executando a aplicação localmente

Para executar a aplicação do projeto, você precisa:

1. Clonar este repositório ou fazer um fork: 


`git clone https://github.com/1manuelc/dio-react-proj04-dioclone.git`

2. Instalar as dependências necessárias á partir do seu gerenciador de pacotes (não é obrigatório ser npm): 


`npm install`

3. Executar os dois comandos em terminais distintos: 


```bash

npm run api

```

```bash

npm run dev

```

(O primeiro comando executa localmente uma instância do json-server para emular uma api externa, enquanto o segundo serve a aplicação localmente)