Flaviane-Brum/SLA-Express

Este projeto foi desenvolvido para colocar em pratica os conceitos aprendidos em Next.js

SLA EXPRESS

📝 Sobre o projeto

Website feito para um motoboy, com as informações de preços e contato. Onde o usuário poderá enviar e-mail ou entrar em contato via whatsapp.

📸 Screenshots das telas

🖥️ Desktop

📱 Mobile

Você pode conferir o resultado final em: https://sla-express.vercel.app

🎯 Objetivo do projeto

Este projeto foi desenvolvido para colocar em pratica os conceitos aprendidos em Next.js

Features

- Consumo da API Email.js
- Validação de formulário

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode

Rodando o server

# Instale as dependências
$ yarn
# ou
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ yarn start
# ou
$ npm run start

Instalação do EmailJS SDK

$ npm install emailjs-com --save

Variáveis de ambiente

Para usar o EmailJS, você vai precisar das seguintes variáveis de ambiente:

    NEXT_PUBLIC_SERVICE_ID: "YOUR_SERVICE_ID"
    NEXT_PUBLIC_TEMPLATE_ID: "YOUR_TEMPLATE_ID"
    NEXT_PUBLIC_EMAILJS_USER_ID: "YOUR_USER_ID"

Exemplo de uso

import React, { useRef } from "react";
import emailjs from "emailjs-com";
const form = useRef();

emailjs
  .sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", form.current, "YOUR_USER_ID")
  .then(
    (result) => {
      console.log(result.text);
    },
    (error) => {
      console.log(error.text);
    }
  );

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

• CSS Modules
• Sass
• NextJS
• EmailJS
• Context API

Made with ♥️ by Flaviane Brum.