TypeScrypt-Netflix-Login-MVP Tailwind Templates

Typescrypt Netflix Login Mvp

Projeto de uma página de login da netflix usando typescript e tailwind

Tela de Login Netflix 📺🔑

Sou desenvolvedor backend especializado em Python, com um foco crescente em projetos frontend utilizando Node.js, TypeScript, e Tailwind CSS. Minha paixão por programação vai além do backend, o que me permite explorar e criar interfaces modernas e interativas.

🚧 Status do Projeto: Em Desenvolvimento 🚧

Status: Em Desenvolvimento Versão: 0.1.0 Sprint Atual: 1 Futuras Implementações

🔄 Sprints Futuros

  • Sprint 2: Implementar autenticação real via API e armazenamento de usuários.
  • Sprint 3: Refatorar a interface com melhorias de UX e UI usando Tailwind CSS.
  • Sprint 4: Conectar o backend ao banco de dados SQLite para salvar sessões de login.
  • Sprint 5: Criar funcionalidade de "Esqueci minha senha" com envio de e-mails.

🛠 Próximas Etapas

  1. Implementação de validação de credenciais no backend.
  2. Criação de API REST para integração completa.
  3. Melhoria na responsividade da interface.

Este projeto está em constante evolução, e novas funcionalidades estão sendo planejadas para os próximos sprints. Fique atento para futuras atualizações!

Um projeto para simular uma tela de login da Netflix.

🚀 Introdução

Este projeto tem como objetivo criar uma simulação da tela de login da Netflix, utilizando tecnologias modernas de desenvolvimento web. O projeto é dividido em duas partes: backend (servidor) e frontend (interface do usuário).

⚙️ Instalação

  1. Clone o repositório:
git clone <repositório_git>
  1. Navegue até a pasta do projeto:
cd tela-login-netflix
  1. Instale as dependências:
npm install
  1. Inicie o servidor:
npm run dev

🛠️ Tecnologias Usadas

  • Backend:
    • Node.js
    • TypeScript
    • Express.js
    • TypeORM
    • SQLite
    • Node.js
    • TypeScript
    • Express.js
    • TypeORM
    • SQLite
  • Frontend:
    • HTML5
    • CSS3
    • JavaScript
    • Tailwind CSS
    • HTML5
    • CSS3
    • JavaScript
    • Tailwind CSS

✨ Funcionalidades futuras

  • Funcionamento completo da lógica e tela de login.
  • Validação básica de credenciais (futuras implementações).
  • Interface amigável e responsiva.

🤝 Contribuição

Contribuições são bem-vindas! Sinta-se livre para abrir issues e pull requests.

📄 Licença

Este projeto está sob a licença ISC.

💼 Sobre Mim

chrome_h8V64wmuqS

Com uma forte base em backend Python, sempre busquei aprimorar minhas habilidades com diversas tecnologias, permitindo que eu entregue soluções completas, tanto em aplicações web quanto desktop. Recentemente, tenho me dedicado a trabalhar no frontend, utilizando Node.js e Express.js, além de agora estar aplicando TypeScript para maior escalabilidade e robustez. Também estou familiarizado com frameworks de design moderno como Tailwind CSS, o que me permite criar interfaces clean e responsivas.

Se quiser saber mais sobre minha trajetória e acompanhar meu progresso, sinta-se à vontade para me conectar no LinkedIn.

📝 Projeto Destaque: Tela de Login Netflix 📺🔑

Descrição do Projeto
Este projeto simula a famosa tela de login da Netflix, demonstrando não só minha habilidade em desenvolvimento frontend, mas também em estruturar um backend sólido. Com um design responsivo, o foco aqui é criar uma experiência visual atraente e funcional, além de dar uma visão sobre como o processo de login pode ser estruturado no servidor.

Stack Utilizada

  • Backend:

    • Node.js com Express.js para criar APIs rápidas e eficientes.
    • TypeScript, fornecendo tipagem estática para maior robustez.
    • TypeORM e SQLite para o gerenciamento de dados no lado do servidor.
  • Frontend:

    • HTML5, CSS3, e JavaScript ES6 para a base da interface do usuário.
    • Tailwind CSS para estilização moderna e responsiva.

Funcionalidades do Projeto

  • Simulação fiel da interface de login da Netflix.
  • Validação básica de credenciais (planejando melhorias).
  • UI completamente responsiva e adaptada para diferentes resoluções.

    🌟 Captura de Tela: Tela de Login da Netflix USA 📸

Abaixo está uma imagem de referência da tela de login da Netflix USA, que foi a principal inspiração para este projeto. A interface elegante, minimalista e funcional foi replicada com o uso de Tailwind CSS e componentes reutilizáveis para garantir responsividade e uma experiência de usuário otimizada.

chrome_sPPZGIGXDE chrome_S64LlTEGub

O objetivo deste projeto é criar uma experiência o mais próximo possível da interface real, replicando tanto o design quanto a interatividade presentes no site oficial da Netflix.

🛤️ Evolução do Conceito e Design 🎨

Durante o desenvolvimento deste projeto, várias iterações e refinamentos foram feitos até chegar à versão final da tela de login. Abaixo estão algumas capturas de tela que mostram a evolução do design:

1️⃣ Protótipo Inicial

No início, o foco era na estrutura básica da página, utilizando apenas HTML e CSS. Este protótipo foi essencial para definir o layout e as seções fundamentais da interface, como campos de entrada de usuário e senha.

chrome_y3pbpi3Ory


2️⃣ Segunda Iteração: Aplicando Tailwind CSS

Na segunda fase, comecei a aplicar Tailwind CSS para estilizar a interface de forma mais moderna e responsiva. As cores, espaçamentos e fontes começaram a se alinhar melhor com o estilo da Netflix.

chrome_PYYaW92Rdh


3️⃣ Terceira Iteração: Refinamento e Adição de Funcionalidades

Com a terceira iteração, adicionei mais funcionalidades, como validação de formulários, e refinei ainda mais o design, tornando a interface mais fiel à da Netflix USA. Também foi inserida a navegação básica e ajustes de acessibilidade.

chrome_9LobkyNbZ2

chrome_dhdmX7XM14 chrome_xZVy3Vj2pD


4️⃣ Versão Final

Na versão final, todos os elementos de design e funcionalidades foram combinados para criar uma experiência de login imersiva e funcional, muito próxima da interface original da Netflix.

chrome_ZPJNf9uURM chrome_nCRqnbvhKQ

Este processo evolutivo ajudou a aprimorar o projeto, garantindo não apenas estética, mas também uma ótima experiência do usuário.

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes