A InfluenceHub é um projeto desenvolvido como parte de um desafio técnico fullstack. A InfluenceHub é uma empresa revolucionária no campo do marketing de influência. Nossa plataforma inovadora oferece uma solução abrangente para marcas e influenciadores encontrarem as parcerias ideais, impulsionando o sucesso de ambos os lados. Acreditamos no poder da colaboração e na importância de estabelecer conexões significativas. Por meio de nossa plataforma, proporcionamos um ambiente seguro e intuitivo, permitindo que marcas e influenciadores se conectem, negociem contratos e alcancem resultados excepcionais. Estamos comprometidos em simplificar e otimizar o marketing de influência, capacitando nossos usuários a alcançarem seu máximo potencial nesse cenário dinâmico e em constante evolução.
Nossa missão é impulsionar o sucesso de ambos, proporcionando um ambiente seguro e intuitivo para conectar-se, negociar contratos e alcançar resultados excepcionais. A plataforma oferece uma série de recursos e funcionalidades para marcas e influenciadores. Confira alguns dos principais destaques:
-
Encontre Influenciadores Relevantes: Explore nossa extensa rede de influenciadores para encontrar aqueles que são ideais para suas campanhas de marketing. Utilize filtros personalizados para segmentar por nicho, público-alvo e métricas relevantes. -
Negocie Contratos Eficientemente: Agilize o processo de negociação e fechamento de contratos com influenciadores por meio de nossa plataforma. Defina termos e condições, estabeleça prazos e acompanhe o progresso das colaborações, tudo em um único lugar. -
Acompanhe o Progresso e Analise Resultados: Obtenha análises em tempo real sobre o desempenho de suas campanhas de influência. Acesse métricas detalhadas, como engajamento, alcance e conversões, para tomar decisões estratégicas e maximizar o retorno sobre o investimento.
-
Amplie seu Alcance e Estabeleça Parcerias de Sucesso: Conecte-se com marcas relevantes e abra novas oportunidades para seu crescimento como influenciador. Aproveite nossa plataforma para expandir seu alcance, receber propostas de parcerias e conquistar colaborações valiosas. -
Gerencie Colaborações e Contratos: Simplifique o gerenciamento de suas colaborações e contratos em um único lugar. Acompanhe o andamento de suas campanhas, estabeleça prazos, entregáveis e detalhes financeiros de forma eficiente. -
Acesse Métricas Detalhadas: Analise o engajamento, alcance e desempenho de suas campanhas por meio de métricas detalhadas. Obtenha insights valiosos para aprimorar sua estratégia e demonstrar seu valor aos parceiros comerciais.
A plataforma está em desenvolvimento ativo e, neste momento, ainda não está aberta para cadastros. Estamos trabalhando arduamente para finalizar todos os recursos e proporcionar a melhor experiência possível para nossos usuários. Em breve, todos poderão utilizar e fazer parte dessa evolução do marketing de influência.
Enquanto isso, gostaríamos de compartilhar algumas das rotas planejadas para a plataforma Influence Hub:
-
/login: Rota destinada ao processo de login dos usuários. Aqui, os usuários poderão inserir suas credenciais de acesso para entrar em suas contas. -
/register: Rota para o registro de novos usuários. Nessa página, os interessados poderão criar uma conta no Influence Hub, fornecendo as informações necessárias. -
/forms: Rota que permitirá aos usuários preencherem formulários com detalhes relevantes sobre suas marcas ou perfis de influenciadores. Essas informações serão utilizadas para melhor conectar as marcas aos influenciadores ideais. -
/dashboard/influencer/:influencerName: Rota destinada ao painel de controle do influenciador, onde ele poderá visualizar informações relevantes sobre seu perfil, colaborações atuais, métricas de desempenho, bem como receber propostas de parcerias e acompanhar suas campanhas. -
/dashboard/company/:companyName: Rota para o painel de controle da empresa, onde as marcas poderão gerenciar suas campanhas de marketing de influência, visualizar e conectar-se com influenciadores, analisar métricas e obter insights valiosos para otimizar suas estratégias. -
/search/brands: Rota para pesquisar e explorar marcas disponíveis na plataforma Influence Hub. Os usuários poderão filtrar por nicho, público-alvo e outros critérios relevantes para encontrar as marcas que melhor se adequam aos seus interesses e objetivos de colaboração. -
/search/influencers: Rota para pesquisar e descobrir influenciadores registrados na plataforma Influence Hub. Os usuários poderão utilizar filtros personalizados, como nicho, número de seguidores e engajamento, para encontrar os influenciadores mais adequados às suas necessidades. -
/privacy-policy: Rota que apresentará nossa política de privacidade, na qual descreveremos como tratamos e protegemos as informações dos usuários. Valorizamos a segurança e a privacidade de nossos usuários e estamos comprometidos em seguir as melhores práticas e regulamentações aplicáveis.
Essas são apenas algumas das rotas que serão implementadas na plataforma Influence Hub. Estamos dedicados a desenvolver uma experiência completa e intuitiva para nossos usuários, e essas rotas fazem parte desse processo. Aguarde ansiosamente pelo lançamento oficial, quando todas as funcionalidades estarão disponíveis para você aproveitar ao máximo o poder do marketing de influência.
Fique atento para atualizações futuras, pois compartilharemos mais detalhes sobre o progresso do projeto e quando estaremos abertos para cadastros e uso público.
O Typescript é uma linguagem de programação que estende o JavaScript, adicionando tipos estáticos opcionais. Ele traz segurança e confiabilidade ao desenvolvimento de aplicativos, ajudando a detectar erros mais cedo e facilitando a manutenção do código. O Typescript foi aplicado tanto no desenvolvimento front-end quanto back-end, proporcionando benefícios como detecção de erros de tipo, autocompletar avançado e suporte a recursos modernos da linguagem.
O Next.js 13 é um framework do React para desenvolvimento de aplicativos web do lado do servidor. Ele traz recursos avançados, como renderização do lado do servidor (SSR) e geração de páginas estáticas, melhorando a performance e a experiência do usuário. O Next.js 13 foi aplicado no desenvolvimento do front-end da plataforma, garantindo uma renderização rápida, gerenciamento eficiente de rotas e uma experiência de usuário suave.
O Node.js é uma plataforma de desenvolvimento que permite a execução de código JavaScript no servidor. Ele é amplamente utilizado no desenvolvimento back-end de aplicativos web. Com o Node.js, os desenvolvedores podem criar servidores eficientes e escaláveis, lidar com operações assíncronas de forma eficiente e construir APIs RESTful poderosas.
O Express é um framework de aplicativo web para Node.js. Ele simplifica o processo de criação de APIs RESTful, permitindo que os desenvolvedores definam rotas, manipulem solicitações e respostas, gerenciem sessões e muito mais. Com o Express, é possível criar rapidamente um servidor web robusto e escalável, facilitando o desenvolvimento de aplicativos back-end.
O Nodemailer, biblioteca de envio de e-mails para Node.js, foi integrado à plataforma Influence Hub em conjunto com o Mailtrap. O Mailtrap é um serviço de teste de e-mails que permite simular o envio e recebimento de e-mails em um ambiente de desenvolvimento. Essa integração permite que a plataforma envie e-mails para o cliente por meio do Mailtrap durante a fase de desenvolvimento, garantindo que os e-mails de contato sejam direcionados corretamente e que não sejam enviados aos destinatários reais enquanto a plataforma estiver em estágio de desenvolvimento. Isso ajuda a evitar a entrega acidental de e-mails de teste aos usuários finais e fornece um ambiente seguro para a comunicação por e-mail durante a fase de desenvolvimento da plataforma Influence Hub.
O MySQL é um sistema de gerenciamento de banco de dados relacional amplamente utilizado. Ele oferece um ambiente confiável para armazenar dados, permitindo que as aplicações acessem, gerenciem e consultem informações de forma eficiente. No contexto da plataforma, o MySQL é utilizado para armazenar os dados de contato dos usuários, permitindo que a plataforma mantenha um registro dos contatos feitos pelos visitantes.
O Sequelize é um ORM (Object-Relational Mapping) para Node.js que simplifica a interação com bancos de dados relacionais, como o MySQL. Ele oferece recursos avançados para modelar e manipular dados, realizando mapeamento entre objetos e tabelas de banco de dados. Na plataforma Influence Hub, o Sequelize é utilizado em conjunto com o MySQL para gerenciar os dados de contato dos usuários, garantindo a segurança e eficiência na criação, atualização e consulta dessas informações. Com o Sequelize, o desenvolvimento e a manutenção do sistema se tornam mais eficientes e produtivos.
As tecnologias e bibliotecas mencionadas - Node.js, Nodemailer, Express e MySQL - foram aplicadas no desenvolvimento do back-end da plataforma Influence Hub. No entanto, é importante ressaltar que, devido à natureza do desafio técnico e às restrições de tempo, o back-end da plataforma atualmente funciona apenas em um servidor local. O deploy foi realizado apenas para o front-end da plataforma.
Quando o servidor local está ativo, a API REST construída com Node.js e Express funciona perfeitamente, permitindo a comunicação entre o front-end e o back-end da plataforma. Além disso, o Nodemailer é integrado para lidar com o envio de e-mails de contato. O servidor local garante que o envio de e-mails seja processado corretamente durante o desenvolvimento da plataforma, mas ainda não foi feito o deploy em um servidor público.
Embora a plataforma Influence Hub ainda não esteja disponível publicamente, o desenvolvimento do back-end utilizando Node.js, Nodemailer, Express e MySQL foi realizado para garantir a funcionalidade completa da plataforma. Futuramente, será possível realizar o deploy do back-end em um servidor público, permitindo que a plataforma esteja acessível para uso externo.
A plataforma Influence Hub foi estilizada e tornada responsiva utilizando o framework Tailwind CSS. O Tailwind é um framework CSS utilitário que oferece uma ampla variedade de classes pré-definidas, permitindo a criação rápida e eficiente de estilos personalizados. Ele foi essencial para atender às demandas de prazo do projeto, garantindo que o site fosse estilizado de forma consistente e responsiva.
Os campos de input da seção de contato foram estilizados utilizando o Material UI, um conjunto de componentes React pré-construídos. O Material UI fornece uma biblioteca de elementos estilizados e personalizáveis, que foram adaptados para atender às necessidades específicas do projeto. Foram implementadas máscaras para CPF, telefones e datas nos campos de input, facilitando o preenchimento correto e evitando erros comuns de digitação.
O SlideBar, componente responsável por exibir as imagens passando horizontalmente em looping, foi implementado utilizando CSS puro. O CSS foi utilizado para criar o efeito de movimento suave e contínuo das imagens, proporcionando uma experiência visual atraente para os usuários.
Além disso, pequenos ajustes foram feitos utilizando CSS puro para complementar o estilo dos componentes e garantir uma aparência coesa em toda a plataforma.
INSTALAÇÃO DA LANDING PAGE INFLUENCE HUB
⚠️ Configurações mínimas para execução do projeto
Na sua máquina você deve ter:
- Sistema Operacional Distribuição Unix (Preferencialmente)
- Node versão 16
- MySQL
- MySQL Workbench ((Preferencialmente))
➡️ O node deve ter versão igual ou superior à 16.14.0 LTS:
- Para instalar o nvm, acesse esse link;
- Rode os comandos abaixo para instalar a versão correta de `node` e usá-la:
- `nvm install 16.14 --lts`
- `nvm use 16.14`
- `nvm alias default 16.14`
O Sequelize não possui um método nativo para criar automaticamente o banco de dados. Ele é responsável apenas pela criação das tabelas. Para criar o banco de dados automaticamente, você pode utilizar o sequelize-cli ou criar manualmente utilizando uma ferramenta de administração do MySQL, como o MySQL Workbench.
-
Utilizando o
sequelize-cli, execute o comandonpx sequelize-cli db:createpara criar o banco de dados especificado na configuração. Certifique-se de ter osequelize-cliinstalado globalmente ou como uma dependência local. -
Se preferir utilizar o
MySQL Workbenchou outra ferramenta similar, você pode criar o banco de dados manualmente antes de iniciar o aplicativo.
Após criar o banco de dados, o Sequelize será capaz de criar automaticamente as tabelas especificadas no código, utilizando o método Contact.sync() conforme já implementado.
- Clone o repositório
git@github.com:Rafael-Souza-97/landing-page.git:
git@github.com:Rafael-Souza-97/landing-page.git- Entre na pasta do repositório que você acabou de clonar:
cd landing-page- Instale as depëndencias com
npm install:
npm install- Entre na pasta
back-enddentro do repositório do projeto:
cd back-end- Instale as depëndencias com
npm install:
npm install- Execute a aplicação com com
npm run devna raiz do projeto:
Executará a aplicação em modo de desenvolvimento.
`npm run dev`Abra http://localhost:3000 no seu navegador para visualiza-lo.
- Execute a aplicação com com
npm run devdentro da pastaback-end:
Executará o servidor em modo de desenvolvimento.
`npm run dev`O servidor rodará na porta 3001. [http://localhost:3001](http://localhost:3001/].
- Linguagem de Programação: TypeScript
- Framework de Front-end: Next.js 13
- Plataforma de desenvolvimento Back-end: Node.js
- Framework de arquitetura de APIwork web: Express
- Padrão de arquitetura de API: API REST
- Padrão de arquitetura do Software: Model-Service-Controller
- ORM (Object-Relational Mapping): Sequelize
- Cliente de teste de API: Thunder Client
- Banco de Dados: MySQL
- Biblioteca de Envio de E-mails: Nodemailer
- Linter de código: ESLint
- Editor de código: Visual Studio Code
- Sistema de controle de versão: Git e GitHub
- Sistema operacional: Linux - Ubuntu
- Framework CSS: Tailwind
- Biblioteca de componentes: Material UI
- Linguagem de Estilização: CSS
Este projeto foi implantado no Vercel, permitindo o acesso ao site através do link: INFLUENCE HUB. O deploy abrange tanto o front-end quanto o back-end da plataforma Influence Hub.
No entanto, é importante observar que o back-end da plataforma atualmente só funciona em um servidor local. Isso significa que, ao acessar o site implantado no Vercel, o back-end não estará totalmente funcional. Para utilizar todas as funcionalidades do back-end, é necessário executar o servidor localmente.
Apesar dessa limitação temporária, o front-end implantado no Vercel oferece uma visão geral do design e da experiência do usuário proporcionados pela plataforma Influence Hub.