Projeto de mídia social OLLO
Thiago Fernando

Thiago Fernando

2 meses atrás

Projeto de mídia social OLLO

API Rest PowerShell Firebase Vue.js HTML/CSS JavaScript Next JS JSON Node.js React Native React
OLLO é um protótipo de aplicação web interativa com funcionalidades de mídia social. O objetivo é criar uma plataforma moderna, fluida e visualmente atraente onde usuários possam compartilhar conteúdo, interagir e construir uma rede de conexões. A Identidade "Ollo" "Ollo", em galego, significa "olho", mas a expressão vai além, traduzindo-se como "atenção" ou "cuidado". Essa dualidade inspira a navegação e as interações na plataforma: Dar un ollo: A ação de explorar o feed, "dar uma olhada" no que há de novo. Ollo á xente: A seção para encontrar e seguir pessoas, lembrando de "prestar atenção nas pessoas" que você adiciona à sua rede. Ollo co que fas!: O botão para criar um novo post, um lembrete para ser cuidadoso e "prestar atenção no que você faz" e compartilha. ✨ Funcionalidades Implementadas (Protótipo Frontend) Estrutura e Navegação: Layout principal responsivo com barra de navegação lateral. Roteamento de páginas com React Router DOM v6. Design adaptável para diferentes tamanhos de tela. Sistema de Temas: Tema claro e escuro implementado em toda a aplicação. Preferência de tema salva no localStorage do navegador. Interação com Conteúdo: Criação de posts (simulada, via estado local). Feed de posts com scroll. Funcionalidade "Continuar Lendo..." para posts longos. Sistema de "Gostar" em posts. Seção de comentários em cada post. Sistema de "Gostar" e "Não Gostar" em comentários individuais. Páginas e Componentes: Página Inicial: Exibe o feed principal e a caixa de criação de post. Página Explorar: Grade de posts com placeholders para filtros. Página de Notificações: Timeline de notificações com interatividade (marcar como lida) e navegação. Página de Perfil: Estrutura com abas (Posts, Comentários, Curtidas) e edição de perfil (simulada). Design Visual "Ollo": Paleta de cores customizada, gradientes e efeitos de "glassmorphism" no tema claro. 🛠️ Tecnologias Utilizadas Frontend: React (v18+): Biblioteca para construção de interfaces. Vite: Ferramenta de build e desenvolvimento ultrarrápida. Tailwind CSS (v3): Framework CSS utility-first para estilização ágil. React Router DOM (v6): Gerenciamento de rotas. Ícones e Ferramentas: Heroicons: Biblioteca de ícones SVG. ESLint: Linter para manter a qualidade e o padrão do código. Git & GitHub: Versionamento e hospedagem do código.