Documentação do Projeto: Tech+

Descrição do Projeto

Este projeto é uma aplicação web desenvolvida para gerenciar o contato de usuários interessados no projeto Tech+. A aplicação conta com um formulário de contato com integração de e-mail. O back-end foi desenvolvido com Node.js e Express, enquanto o front-end foi feito utilizando React.js.

Tecnologias Utilizadas

    Front-End

  • React.js: Biblioteca JavaScript para construção de interfaces de usuário.
  • React-Bootstrap: Biblioteca de componentes prontos para a construção de layouts responsivos.
  • Axios: Biblioteca para realizar requisições HTTP de maneira fácil e eficiente.
  • CSS: Para customização dos componentes visuais e responsividade da aplicação.

    • Back-End

  • Node.js: Ambiente de execução JavaScript no lado do servidor.
  • Express.js: Framework para Node.js que facilita a construção de APIs e servidores.
  • Nodemailer: Biblioteca para enviar e-mails de forma simples usando SMTP.

    • Banco de Dados

  • Nenhum banco de dados foi utilizado. A aplicação realiza o envio de e-mails diretamente.

Funcionalidades do Projeto

  • Formulário de Contato: O formulário coleta informações do usuário como nome, e-mail, telefone, assunto e mensagem.
  • Envio de E-mail: Após o envio do formulário, as informações são enviadas para o e-mail configurado, utilizando o Nodemailer.
  • Validação do Formulário: A aplicação valida o preenchimento de todos os campos antes de enviar o formulário.
  • Respostas Responsivas: A aplicação foi projetada para ser responsiva em dispositivos móveis, tablets e desktops.

Como Rodar o Projeto

    Pré-requisitos

    Antes de rodar o projeto, certifique-se de ter o Node.js e o npm instalados em seu computador. Você pode verificar se está instalado executando os seguintes comandos no terminal:

    node -v 
    npm -v

    Se não tiver o Node.js instalado, você pode baixar e instalar a versão mais recente através do site oficial.

    1. Clonar o Repositório

    Primeiro, clone o repositório do GitHub para a sua máquina local:

    git clone https://github.com/seu-usuario/projeto-tech-plus.git
    cd projeto-tech-plus

    2. Instalar as Dependências

    Instale as dependências do projeto, tanto no front-end quanto no back-end.

    Front-End (React)

    No diretório src (onde está o código do front-end):

    cd src
    npm install

    Back-End (Node.js + Express)

    No diretório do back-end (onde está o arquivo server.js e emailService.js):

    cd services
    npm install

    3. Configurar as Variáveis de Ambiente

    No diretório raiz do projeto, crie um arquivo .env para armazenar as variáveis de ambiente.

    Exemplo de arquivo .env para configuração do e-mail:

    EMAIL_USER=seu-email@gmail.com
    EMAIL_PASS=sua-senha-do-email

    4. Rodar o Back-End

    Com o back-end configurado, inicie o servidor:

    cd services
    node server.js

    Isso iniciará o servidor na porta 5000 (ou a porta que você definir) e você verá a seguinte mensagem:

    🚀 Server is running on http://localhost:5000

    5. Rodar o Front-End

    Com o back-end rodando, inicie o front-end:

    cd src 
    npm start

    Isso iniciará o front-end na porta 3000 por padrão, e você poderá acessar a aplicação no seu navegador via:

    http://localhost:3000

    6. Testar o Formulário

    Após seguir os passos acima, o formulário estará funcionando corretamente. Você pode preenchê-lo e testá-lo. Quando o formulário for enviado, um e-mail será enviado para o e-mail configurado no back-end, com os dados do contato.

Estrutura de Diretórios

    A estrutura do projeto é a seguinte:

    • projeto-tech-plus
      • public
      • src
      • assets
        • banner_projeto.png
        • banner1.png
        • banner2.png
        • banner3.png
        • banner4.png
        • banner5.png
        • banner6.png
        • banner7.png
        • banner8.png
        • logo.png
      • components
        • CardCurso.tsx
        • Carrossel.tsx
        • Footer.tsx
        • FormularioContato.tsx
        • Header.tsx
      • pages
        • Contato.tsx
        • Cursos.tsx
        • Home.tsx
      • Sobre.tsx
      • services
        • emailService.js
        • server.js
      • styles
        • CardCurso.css
        • Carrossel.css
        • Contato.css
        • Cursos.css
        • Footer.css
        • FormularioContato.css
        • Header.css
        • Home.css
        • index.css
        • Sobre.css
      • App.js
      • index.js
      • .env
      • .gitignore
      • package-lock.json
      • package.json
      • README.md
      • tsconfig.json

Considerações Finais

    Segurança:

  • O projeto inclui o envio de e-mails via SMTP utilizando o Nodemailer.

    • Escalabilidade:

  • O back-end está configurado para lidar com novos tipos de formulário e expandir facilmente conforme novas funcionalidades sejam adicionadas ao projeto.

    • Licença:

  • Este projeto está licenciado sob a MIT License.
  • Se tiver qualquer dúvida, sinta-se à vontade para abrir uma issue ou enviar um pull request!

Fale comigoGitHub