https://github.com/marco0antonio0/loginpageexample
Este projeto é uma página de login simples, desenvolvida como um exemplo de código para quem está aprendendo Next.js e Tailwind CSS
https://github.com/marco0antonio0/loginpageexample
nextjs tailwinds
Last synced: about 2 months ago
JSON representation
Este projeto é uma página de login simples, desenvolvida como um exemplo de código para quem está aprendendo Next.js e Tailwind CSS
- Host: GitHub
- URL: https://github.com/marco0antonio0/loginpageexample
- Owner: marco0antonio0
- Created: 2025-02-02T16:21:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-02T16:58:24.000Z (over 1 year ago)
- Last Synced: 2025-03-28T23:44:13.362Z (about 1 year ago)
- Topics: nextjs, tailwinds
- Language: TypeScript
- Homepage: https://login-demo.dirrocha.com/
- Size: 207 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 loginPageExample
## 📌 Introdução
- Acesse a demo [aqui](https://login-demo.dirrocha.com/)
Este 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.
## ✅ Recursos e funcionalidades
* **Formulário de Login:** Permite que o usuário insira seu nome de usuário (email) e senha.
* **Validação de Campos:** Verifica se os campos de nome de usuário e senha estão preenchidos antes de prosseguir.
* **Feedback de Erro:** Exibe mensagens de erro claras caso os campos obrigatórios não sejam preenchidos.
* **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.
* **Design Atraente:** Utiliza o Tailwind CSS para um design moderno e fácil de personalizar.
* **Integração com Next.js:** Implementado com a estrutura do Next.js, permitindo funcionalidades como roteamento e renderização do lado do servidor (SSR).
## 🛠️ Tecnologias utilizadas
* **⚛️ 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.
* **🎨 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.
* **📝 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.
* **✨ CSS:** Utilizado em conjunto com o Tailwind CSS para complementar o design e a estilização da aplicação.
## ⚙️ Pré-requisitos e instalação
Antes de começar, certifique-se de ter instalado em sua máquina:
* **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/)
* **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/).
**Passos para instalar e executar o projeto:**
1. **Clone o repositório:**
```bash
git clone https://github.com/marco0antonio0/loginPageExample.git
cd loginPageExample
```
2. **Instale as dependências:**
```bash
npm install # ou yarn install
```
3. **Execute o projeto:**
```bash
npm run dev # ou yarn dev
```
A aplicação estará disponível em `http://localhost:3000`.
## 💡 Como usar
1. Abra o projeto no seu navegador acessando `http://localhost:3000`.
2. Você verá o formulário de login na tela.
3. Preencha os campos de nome de usuário (email) e senha.
4. Se um campo estiver vazio, uma mensagem de erro será exibida.
5. Clique no botão "Sign In" para enviar o formulário.
6. Os dados preenchidos serão exibidos no console do navegador (para fins de demonstração).
7. 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.
## 💻 Exemplos de código
**Exemplo de código do formulário de login:**
```jsx
EMAIL ADRESS
changeCredentials('name',e)}/>
{errors.name && Email is required}
PASSWORD
changeCredentials('password',e)}/>
{errors.password && Password is required}
onClickButton()}>
Sign in
```
**Exemplo da função que valida os campos:**
```jsx
function checkFildsIsEmpty(){
let newErrors = {
name: credentials.name.trim() === "",
password: credentials.password.trim() === "",
};
setErrors(newErrors);
if (!newErrors.name && !newErrors.password) {
console.log(credentials);
}
}
function onClickButton() {
checkFildsIsEmpty()
// ==============================
// ******************************
// Adicione aqui sua autenticacao
// ******************************
const {name,password} = credentials
//
}
```
## 🗂️ Estrutura de diretórios
```
📦 projeto-nextjs
┣ 📂 .next # Arquivos de build gerados pelo Next.js
┣ 📂 node_modules # Dependências do projeto
┣ 📂 pages # Páginas do projeto
┃ ┣ 📂 fonts # Fontes locais
┃ ┣ 📜 _app.tsx # Componente principal
┃ ┣ 📜 _document.tsx # Documento HTML base
┃ ┗ 📜 index.tsx # Página login Page example
┣ 📂 public # Arquivos públicos
┃ ┗ 📜 favicon.ico # Ícone do site
┣ 📂 styles # Arquivos de estilos
┃ ┗ 📜 globals.css # Estilos globais
┣ 📜 .gitignore # Arquivo de configuração do Git
┣ 📜 next-env.d.ts # Definições de tipo para Next.js
┣ 📜 next.config.mjs # Configuração do Next.js
┣ 📜 package.json # Dependências do projeto
┣ 📜 package-lock.json # Controle de versões das dependências
┣ 📜 postcss.config.mjs # Configuração do PostCSS
┣ 📜 README.md # Documentação do projeto
┣ 📜 tailwind.config.ts # Configuração do Tailwind CSS
┗ 📜 tsconfig.json # Configuração do TypeScript
```
## 🤝 Contribuição
Sinta-se à vontade para contribuir com este projeto! Se você encontrar algum problema ou tiver alguma sugestão, siga estes passos:
1. Faça um fork do repositório.
2. Crie uma branch com a sua alteração: `git checkout -b feature/sua-alteracao`.
3. Faça as alterações e commite: `git commit -m "Adiciona: sua alteração"`.
4. Faça o push para sua branch: `git push origin feature/sua-alteracao`.
5. Abra um pull request para que suas alterações sejam avaliadas.