Sobre • Funcionalidades • Layout • Como executar • Tecnologias • Agradecimentos • Autor • Licença
👨🏻💻 Code Review - Portfolio Web - é um PWA desenvolvido para realizar a apresentação de portfólio de projetos pessoais e profissionais.
- Donwload do currículo em formato PDF
- Links para as redes sociais
- Apresentação das principais habilidades através de stacks
- Apresentação dos projetos desenvolvidos em caráter
- Educacional
- Profissional
- Protótipos
- Envio de mensagemns de contato
- Validação dos campos dos formuários
- Assinatura de newsletter via Sendinblue API
- Proteção dos formulários com reCAPTCHA
- APP otimizados para dispositivos mobiles (PWA)
O layout da aplicação para computadores e celulares:
Este projeto é divido em duas partes:
- Backend (lado do servidor)
- Frontend (lado do cliente)
💡Dica:
O "Backend" e o "Frontend" se encontram em diretórios de nome homônimo, na raís do projeto.
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disso, sugiro que você faça uso de um bom editor de código, como por exemplo o VSCode.
💡Dica:
Se preferir, você pode utilizar a extensão runme para executar todos os comandos diretamente do readme.
- Clone este repositório:
$ git clone git@github.com:tiagordebarros/code-review-portfolio-web.git- Acesse o diretório do projeto via terminal
$ cd code-review-portfolio-web
⚠️ Atenção:
Para ter acesso à 100% das funcionalidades da aplicação, você deverá renomear o arquivo .env.example para .env e substituir todas as variáveis de ambiente pelas suas variáveis locais. Há um arquivo .env.example no diretório do backend e outro no do frontend.
- Vá para o diretório do backend:
$ cd backend
- Instale as dependências:
$ npm install
- Execute a aplicação em modo de desenvolvimento:
$ npm run dev
- Acesse o servidor na porta 3001:
start http://localhost:3001
💡Dica:
Você pode utilizar o botão abaixo para conferir quais são as rotas diposníveis no backend e quais são os seus retornos.
- Vá para o diretório do frontend:
$ cd frontend
- Instale as dependências:
$ npm install
- Execute a aplicação em modo de desenvolvimento:
$ npm start
- Acesse o cliente na porta 3000:
start http://localhost:3000
As seguintes ferramentas foram usadas na construção desse projeto:
Frontend (React)
- Emailjs
- Font Awesome
- React Router Dom
- Testing Library
- Animate.css
- Axios
- Bootstrap
- React Bootstrap
- React Icons
- React Responsive Carousel
- React Router
- reCAPTCHA
Para a lista completa, veja o arquivo package.json
Backend (NodeJS)
Para a lista completa, veja o arquivo package.json
- API: SendinBlue's API v3
- Editor: Visual Studio Code → Extensions: PWA Builder
- Markdown: StackEdit, Editor.md
- Commit convention: Conventional Commits
- Readme template: README Ecoleta
- Testes de API: Postman
- Ícones: React Icons, Font Awesome
- Fontes: CentraNo2
💜 Agradecimentos especiais para a Judy, criadora da versão original desse projeto👏. Você pode conferir a versão desenvolvida por ela, clicando neste link.
 Judy Gab |
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b experimental/no-ref/my-awesome-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feat: add new awesome feature" - Envie as suas alterações:
git push -u origin experimental/no-ref/my-awesome-feature
⚠️ Atenção:
Por favor, faça uso da convenção Conventional Commits ao escrever os seus commits. Caso prefira, você pode utilizar uma das seguintes ferramentas para lhe auxiliar a escrever commits mais rápidos no padrão solicitado. Segue: VS Code Conventional Commits, commitlint, OpenCommit.
 Tiago Barros |
Este projeto esta sobe a licença MIT.
Feito com ❤️ por Tiago Barros ✉️ Entre em contato!
Português 🇧🇷 | English 🇺🇸 | Italiano 🇮🇹