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
Link do site: https://barber-shop-landing-page.vercel.app/
$ git clone https://github.com/PedroNB10/barber-shop-landing-page.git
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
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.
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