Alpha Drive

Projeto Web fictício desenvolvido para fins didáticos. TEMA: "Alpha Drive" 🗂☁️

Estudo de caso com decisões próprias para fixar conceitos do ReactJs e aprender a utilizar os componentes da biblioteca Chakra UI. O tema do projeto foi baseado no layout do @pxdesign.id (perfil do instagram disponível em https://www.instagram.com/p/CPKLjN7nZ8E/)

Descrição:

O projeto trata-se de um sistema de armazenamento de arquivos na nuvem semelhante ao Google Drive.

• Paginação, Menu lateral com collapse (encolher e expandir), campo de busca e filtro;
• Dashboard: card de categorias, listagem de arquivos carregados recentemente, gráfico circular de armazenamento usado;
• Shared: página com listagem dos arquivos compartilhado;
• Starred: página com listagem dos arquivos marcados com estrela;
• Deleted: página com listagem dos arquivos excluídos e estatísticas do lixo com botão para esvaziar o lixo.

Em breve ...

• Responsividade: tablet e smartphone;
• Tema light/dark;
• Opções de idioma (pt/en);
• Banco de dados, oauth e funcionalidades dinâmicas (atualmente os dados estão estáticos por ser um projeto front-end).

Tecnologias utilizadas: 🚀

• HTML | 5
• Styled Components | ^5.3.3
• Typescript | ^4.1.2 -D
• ReactJs | ^17.0.2
• Chakra UI | ^1.0.0

Layout (by @pxdesign.id)🤩

Desktop (screenshot):

Dashbord	Menu encolhido	Filtro selecionado

Shared (Table)	Shared (Cards)	Deleted

Mobile e Tablet:

(Em breve ...)

Dê uma olhada como o projeto ficou! 👀

https://alphadrive-jfernandesdev.netlify.app/