Skip to content

PedroNB10/barber-shop-landing-page

Repository files navigation

💈 Barbearia Barba Rolling 💈

Esse é um projeto feito em Next.js com a motivação de ser um projeto final para o processo de trainee da Empresa Júnior byron.solutions.

O repositório do projeto pode ser encontrado aqui

📱 Demonstração Visual do projeto

Link do site: https://barber-shop-landing-page.vercel.app/

gif da animação do projeto

💾 Para clonar o projeto use:

$ git clone https://github.com/PedroNB10/barber-shop-landing-page.git

⚙️ Configuração

Para que tenha o acesso a todas as funcionalidades do projeto como a de envio de formulário e autênticação com googleOAuth, renomeie o arquivo .env.example para .env e adicione as suas variáveis de ambiente:

GOOGLE_CLIENT_ID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
GOOGLE_CLIENT_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
NEXTAUTH_SECRET="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
NEXTAUTH_URL="http://localhost:3000"

NEXT_PUBLIC_EMAILJS_PUBLIC_KEY="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
NEXT_PUBLIC_TEMPLATE_ID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
NEXT_PUBLIC_SERVICE_ID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

As 3 últimas variáveis são da biblioteca EmailJS e as outras da biblioteca NextAuth e da API do Google. Além disso é preciso criar um projeto no Google Console para que use a API do Google Calendar.

Segue um tutorial de configuração desse um projeto google similar:

https://youtu.be/tgcCl52EN84?si=474uufmQk-r6exQV

Segue um tutorial para fazer a autenticação com google usando NextAuth:

https://youtu.be/AbUVY16P4Ys?si=GnuAFyNReKBlWPK4

Segue um tutorial para configuração do EmailJS:

https://www.youtube.com/watch?v=Zbg1BHOVzRg

💿 Inicialização

Para acessar o projeto é necessário inicializá-lo em um server. Isso pode ser feito da seguinte forma:

npm run dev
# or
yarn dev

Após isso, basta abrir http://localhost:3000 no navegador para visualizar o resultado.

📝 Edição

A edição da página é feita pelo arquivo app/page.tsx e app/layout.tsx. A página será atualizada automaticamente para acompanhar as edições.

Para adição de páginas adicionais ou outras features é recomendado o uso da documentação do Next.js

🔧 Linguagens e Ferramentas

👨🏻‍💻 Autores