Vídeo   |    Tecnologias   |    Sobre   |    Páginas   |    Componentes   |    Clone   |    Contato

Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI

• ReactJS
• React Router
• Styled-Components
• Boxicons
• Axios
• Javascript
• HTML
• CSS
• CRA
• Yarn

Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!

Esse projeto é a Interface Mobile-First do Users, uma aplicação Web que realiza o cadastro e a gerência de usuários. Essas dados ficam armazenados em sua API que desenvolvi essencialmente com ExpressJS.

O projeto é composto por 2 componentes de páginas, sendo eles:

• Home: Além de ser a página inicial do Users, ela responsável por realizar o cadastro dos usuários validados pelas verificações na API.
• Users: Essa página é responsável por listar os usuários já cadastrados na API, disponibilizando também a opção de deletá-los.

Fora os componentes de Rotas (Routes), estilos globais (GlobalStyles) e Root (main), o projeto conta com mais 5 componentes que são reaproveitados em ambas as páginas, sendo eles:

• MainContainer: Esse componente é relativo ao container que abriga as informações dos usuários.
• BlurContainer: Esse componente é relativo ao efeito de blur por trás das informações dos usuários.
• Image: Esse componente é relativo às imagens de Logo e Users Talking do Users.
• Button: Esse componente é relativo aos botões de Register e Back.
• Title: Esse componente é relativo aos títulos do MainContainer.

Para clonar e executar este projeto em seu computador, você precisará do Git, Node.js v16.13.2 ou superior e Yarn previamente instalados.
Você também precisará da API do projeto rodando, portanto, antes de continuar por aqui, vá ao Repositório da API e faça os passos sobre como cloná-la e executá-la primeiro!
Feito esses dois passos, no terminal:

# Clone esse repositório com:
> git clone https://github.com/Luk4x/user-register-interface.git

# Entre no repositório com:
> cd user-register-interface

# Instale as dependências com:
> yarn install

# Execute o projeto com:
> yarn start

# Feito isso, você já poderá acessar o projeto pelo link que aparecerá no terminal! (algo como http://localhost:3000/ ou http://127.0.0.1:5173/)

Vitrine.Dev 🪟 Lucas Maciel 🪧 Vitrine.Dev Lucas Maciel ✨ Nome 👥 Users Project Interface 🏷️ Tecnologias reactjs, styled-components, javascript, react router, boxicons, axios, css, html, CRA, yarn 📷 Img

Voltar ao Topo