{"id":24963794,"url":"https://github.com/marco0antonio0/loginpageexample","last_synced_at":"2026-04-28T13:37:56.764Z","repository":{"id":275455590,"uuid":"926130887","full_name":"marco0antonio0/loginPageExample","owner":"marco0antonio0","description":"Este projeto é uma página de login simples, desenvolvida como um exemplo de código para quem está aprendendo Next.js e Tailwind CSS","archived":false,"fork":false,"pushed_at":"2025-02-02T16:58:24.000Z","size":212,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T23:44:13.362Z","etag":null,"topics":["nextjs","tailwinds"],"latest_commit_sha":null,"homepage":"https://login-demo.dirrocha.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marco0antonio0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-02T16:21:27.000Z","updated_at":"2025-02-02T16:59:00.000Z","dependencies_parsed_at":"2025-02-02T17:29:57.531Z","dependency_job_id":"a8f99636-7228-4673-90b3-6564b125b97b","html_url":"https://github.com/marco0antonio0/loginPageExample","commit_stats":null,"previous_names":["marco0antonio0/loginpageexample"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marco0antonio0/loginPageExample","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco0antonio0%2FloginPageExample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco0antonio0%2FloginPageExample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco0antonio0%2FloginPageExample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco0antonio0%2FloginPageExample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marco0antonio0","download_url":"https://codeload.github.com/marco0antonio0/loginPageExample/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marco0antonio0%2FloginPageExample/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261101617,"owners_count":23109860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","tailwinds"],"created_at":"2025-02-03T09:58:27.600Z","updated_at":"2026-04-28T13:37:56.709Z","avatar_url":"https://github.com/marco0antonio0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 loginPageExample\n![img](/images/publicidade.png)\n## 📌 Introdução\n- Acesse a demo [aqui](https://login-demo.dirrocha.com/)\n\n\nEste projeto é uma página de login simples, desenvolvida como um exemplo de código para quem está aprendendo Next.js e Tailwind CSS. O objetivo é fornecer um modelo funcional e bem estruturado para servir como ponto de partida ou referência em projetos futuros. Este projeto foi feito para desenvolvedores iniciantes e intermediários que desejam aprender ou aprimorar suas habilidades em desenvolvimento web com Next.js e Tailwind CSS, resolvendo a necessidade de ter um exemplo prático e bem documentado de uma página de login.\n\n## ✅ Recursos e funcionalidades\n\n*   **Formulário de Login:** Permite que o usuário insira seu nome de usuário (email) e senha.\n*   **Validação de Campos:** Verifica se os campos de nome de usuário e senha estão preenchidos antes de prosseguir.\n*   **Feedback de Erro:** Exibe mensagens de erro claras caso os campos obrigatórios não sejam preenchidos.\n*   **Layout Responsivo:** A página se adapta a diferentes tamanhos de tela, proporcionando uma experiência de uso adequada em dispositivos móveis, tablets e desktops.\n*   **Design Atraente:** Utiliza o Tailwind CSS para um design moderno e fácil de personalizar.\n*   **Integração com Next.js:** Implementado com a estrutura do Next.js, permitindo funcionalidades como roteamento e renderização do lado do servidor (SSR).\n\n## 🛠️ Tecnologias utilizadas\n\n*   **⚛️ Next.js:** Um framework React para construir aplicações web com renderização do lado do servidor e outras funcionalidades avançadas. Foi escolhido para oferecer uma experiência de desenvolvimento mais eficiente e um melhor desempenho para a aplicação.\n*   **🎨 Tailwind CSS:** Uma biblioteca de utilitários CSS para estilização rápida e consistente. Foi selecionado por sua praticidade e facilidade de personalização, permitindo a criação de interfaces responsivas e modernas.\n*   **📝 HTML:** Linguagem de marcação utilizada para estruturar o conteúdo da página. Essencial para definir a semântica e a hierarquia dos elementos visuais.\n*   **✨ CSS:** Utilizado em conjunto com o Tailwind CSS para complementar o design e a estilização da aplicação.\n\n## ⚙️ Pré-requisitos e instalação\n\nAntes de começar, certifique-se de ter instalado em sua máquina:\n\n*   **Node.js:** É necessário ter o Node.js (versão 18 ou superior) instalado. Você pode baixá-lo no site oficial: [https://nodejs.org/](https://nodejs.org/)\n*   **npm ou Yarn:** Gerenciador de pacotes. Geralmente vem com o Node.js (npm) ou pode ser instalado separadamente (Yarn): [https://yarnpkg.com/](https://yarnpkg.com/).\n\n**Passos para instalar e executar o projeto:**\n\n1.  **Clone o repositório:**\n    ```bash\n    git clone https://github.com/marco0antonio0/loginPageExample.git\n    cd loginPageExample\n    ```\n2.  **Instale as dependências:**\n    ```bash\n    npm install # ou yarn install\n    ```\n3.  **Execute o projeto:**\n    ```bash\n    npm run dev # ou yarn dev\n    ```\n    A aplicação estará disponível em `http://localhost:3000`.\n\n## 💡 Como usar\n\n1.  Abra o projeto no seu navegador acessando `http://localhost:3000`.\n2.  Você verá o formulário de login na tela.\n3.  Preencha os campos de nome de usuário (email) e senha.\n4.  Se um campo estiver vazio, uma mensagem de erro será exibida.\n5.  Clique no botão \"Sign In\" para enviar o formulário.\n6.  Os dados preenchidos serão exibidos no console do navegador (para fins de demonstração).\n7.  Observe que a parte de autenticação (envio e validação para um backend) não está implementada neste exemplo, sendo necessário a sua implementação.\n\n## 💻 Exemplos de código\n\n**Exemplo de código do formulário de login:**\n\n```jsx\n  \u003cdiv className=\"flex flex-col h-[100%] w-[100%] px-20 lg:px-10\"\u003e\n    \u003ch1 className=\"m-auto mb-1 ml-0 opacity-65 sm:text-sm\"\u003eEMAIL ADRESS\u003c/h1\u003e\n    \u003cinput type=\"email\" className={`m-auto mt-0 mb-0 w-[100%] h-14 rounded-lg ${errors.name?\"border-red-500\":\"border-gray-200\"} border-2 px-5 sm:h-12`} placeholder=\"user@email.com\" onChange={(e)=\u003echangeCredentials('name',e)}/\u003e\n    {errors.name \u0026\u0026 \u003cspan className=\"text-red-500 text-sm mt-1\"\u003eEmail is required\u003c/span\u003e}\n\n    \u003cdiv className=\"h-5\"\u003e\u003c/div\u003e\n    \u003ch1 className=\"m-auto mt-0 mb-1 ml-0 opacity-65 sm:text-sm\"\u003ePASSWORD\u003c/h1\u003e\n    \u003cinput type=\"password\" className={`m-auto mt-0 mb-0 w-[100%] h-14 rounded-lg ${errors.password?\"border-red-500\":\"border-gray-200\"}  border-2 px-5 sm:h-12`} placeholder=\"\" onChange={(e)=\u003echangeCredentials('password',e)}/\u003e\n    {errors.password \u0026\u0026 \u003cspan className=\"text-red-500 text-sm mt-1\"\u003ePassword is required\u003c/span\u003e}\n    \u003cdiv className=\"h-5\"\u003e\u003c/div\u003e\n    \u003cbutton className=\"align-middle items-center w-[100%] h-14 border-2 border-gray-200 rounded-md mt-0\" onClick={()=\u003eonClickButton()}\u003e\n      Sign in\n    \u003c/button\u003e\n    \u003cdiv className=\"h-1\"\u003e\u003c/div\u003e\n    \u003cspan className=\"m-auto\"\u003e\u003c/span\u003e\n  \u003c/div\u003e\n```\n\n**Exemplo da função que valida os campos:**\n\n```jsx\n  function checkFildsIsEmpty(){\n    let newErrors = {\n      name: credentials.name.trim() === \"\",\n      password: credentials.password.trim() === \"\",\n    };\n    setErrors(newErrors);\n\n    if (!newErrors.name \u0026\u0026 !newErrors.password) {\n      console.log(credentials);\n    }\n  }\n\n  function onClickButton() {\n    checkFildsIsEmpty()\n    // ==============================\n    // ******************************\n    // Adicione aqui sua autenticacao\n    // ******************************\n    const {name,password} = credentials\n    //\n  }\n```\n\n## 🗂️ Estrutura de diretórios\n\n```\n📦 projeto-nextjs\n ┣ 📂 .next              # Arquivos de build gerados pelo Next.js\n ┣ 📂 node_modules       # Dependências do projeto\n ┣ 📂 pages              # Páginas do projeto\n ┃ ┣ 📂 fonts           # Fontes locais\n ┃ ┣ 📜 _app.tsx        # Componente principal\n ┃ ┣ 📜 _document.tsx   # Documento HTML base\n ┃ ┗ 📜 index.tsx       # Página login Page example\n ┣ 📂 public             # Arquivos públicos\n ┃ ┗ 📜 favicon.ico     # Ícone do site\n ┣ 📂 styles             # Arquivos de estilos\n ┃ ┗ 📜 globals.css     # Estilos globais\n ┣ 📜 .gitignore         # Arquivo de configuração do Git\n ┣ 📜 next-env.d.ts      # Definições de tipo para Next.js\n ┣ 📜 next.config.mjs    # Configuração do Next.js\n ┣ 📜 package.json       # Dependências do projeto\n ┣ 📜 package-lock.json  # Controle de versões das dependências\n ┣ 📜 postcss.config.mjs # Configuração do PostCSS\n ┣ 📜 README.md          # Documentação do projeto\n ┣ 📜 tailwind.config.ts # Configuração do Tailwind CSS\n ┗ 📜 tsconfig.json      # Configuração do TypeScript\n```\n\n## 🤝 Contribuição\n\nSinta-se à vontade para contribuir com este projeto! Se você encontrar algum problema ou tiver alguma sugestão, siga estes passos:\n\n1.  Faça um fork do repositório.\n2.  Crie uma branch com a sua alteração: `git checkout -b feature/sua-alteracao`.\n3.  Faça as alterações e commite: `git commit -m \"Adiciona: sua alteração\"`.\n4.  Faça o push para sua branch: `git push origin feature/sua-alteracao`.\n5.  Abra um pull request para que suas alterações sejam avaliadas.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarco0antonio0%2Floginpageexample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarco0antonio0%2Floginpageexample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarco0antonio0%2Floginpageexample/lists"}