🇺🇸 English |
🇧🇷 Português |
Vídeo | Tecnologias | Sobre | Páginas | Componentes | Clone | Contato
iManager-video.mp4
Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI
- ReactJS
- React Router v5
- React Animate On Scroll
- React Animated Number
- React Icons
- React Responsive Carousel
- Custom React Cursor
- UUID
- Animate.css
- GSAP
- CSS Module / CSS
- Javascript / Fetch API
- HTML
- ViteJS
- Yarn
Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!
Esse projeto é a Interface (Desktop-First) da iManager, uma Web plataforma de gestão empresarial que realiza o cadastro e a gerência de projetos, e seus respectivos serviços. Os projetos e suas categorias ficam armazenados em sua API que desenvolvi essencialmente com JSON-Server.
O projeto tem um total de 6 componentes de páginas, sendo eles:
- Home: Essa é a página inicial do iManager, responsável por introduzir o usuário ao site.
- CreateProject: Essa página é responsável por criar um projeto.
- Projects: Essa página é responsável por listar todos os projetos criados pelo usuário, e dar a possibilidade de criação, edição e exclusão dos mesmos.
- Project: Essa página é responsável pela edição das informações básicas de um projeto e pela criação, edição e exclusão de um serviço relativo ao projeto.
- Company: Essa página é responsável por apresentar ao usuário mais informações sobre o iManager como empresa de uma forma mais profunda, organizada e instigante.
- Contact: Essa página é responsável por apresentar formas de contato entre o iManager e seus usuários.
Separados em componentes de Project, Layout e Form, o iManager tem mais 18 componentes, sendo eles:
- Navbar: Esse componente é renderizado no main do projeto, e reaproveitado em todas as páginas. Ele é relativo a barra de navegação presente em todas as páginas.
- Footer: Esse componente é renderizado no main do projeto, e reaproveitado em todas as páginas. Ele é relativo ao rodapé presente em todas as páginas, e nele estão as minhas redes sociais.
- Container: Esse componente se consiste num container dinâmico que criei para evitar repetições de código.
- DesktopHelpCenterShowCase: Esse componente é relativo ao monitor que está na página de Contact.
- MobileAppHelpCenterShowCase: Esse componente é relativo ao celular que está na página de Contact.
- SheeleChatBot: Esse componente é relativo ao ChatBot presente nos componentes de DesktopHelpCenterShowCase e MobileAppHelpCenterShowCase.
- IManagerFooter: Esse componente é relativo ao rodapé do iManager que aparece nas páginas de Company e Contact.
- LinkButton: Esse componente é um botão dinâmico de redirecionamento de página.
- Loading: Esse componente é relativo a barra de carregamento que aparece enquanto algumas requisições são feitas. Ex: Ao acessar a página de Projects.
- Message: Esse componente é relativo as flash messages que aparecem ao realizar determinadas ações na plataforma. Ex: Ao criar um projeto.
- PurpleBackground: Esse componente é relativo ao background roxo decorativo em quase todas as páginas.
- ProjectCard: Esse componente é relativo aos cards dos projetos presentes na página de Projects.
- ServiceCard: Baseado no ProjectCard, esse componente é relativo aos cards dos serviços presentes nos projetos.
- ProjectForm: Esse componente é relativo ao formulário de criação/edição de projetos.
- ServiceForm Baseado no ProjectForm, esse componente é relativo ao formulário criação/edição de serviços.
- Input: Esse componente se consiste num input dinâmico reaproveitado nos componentes de ProjectForm e ServiceForm.
- Select: Esse componente se consiste num Select dinâmico reaproveitado nos componentes de ProjectForm e ServiceForm.
- SubmitButton: Esse componente se consiste num botão dinâmico reaproveitado periodicamente pelo projeto.
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/iManager.git
# Entre no repositório com:
> cd iManager
# Instale as dependências com:
> yarn install
# Execute o projeto com:
> yarn dev
# Feito isso, você já poderá acessar o projeto pelo link que aparecerá no terminal! (algo como http://127.0.0.1:5173/ ou http://localhost:5173/)
Vitrine.Dev 🪟
|
Lucas Maciel |