👉 Sobre
👉 Funcionalidades
👉 Melhorias
👉 Layout
👉 Demonstração
👉 Como executar
👉 Tecnologias
👉 Autor
👉 Licença
Uma aplicação para cadastrar e calcular o valor dos seus projetos freelancers de forma simples e fácil. Crie seu perfil com Github, complete seu perfil informando seu planejameno financeiro e pronto, o sistema irá calcular o valor da sua hora de trabalho.
Cadastre seus freelas informando a quantidade de horas estimada para sua conclusão e o sistema calcula o valor do Job com base no valor da sua hora de trabalho.
Esta versão do JobsCalc foi desenvolvido com a intenção de consolidar os conhecimentos com as tecnologias NextJS (front-end) e Spring (back-end). O back-end pode ser encontrado AQUI
O projeto original jobscalc é construído com um servidor NodeJS, EJS para template engine e SQLite como banco de dados, pode ser desenvolvido acessando a Maratona Discover 2 da Rocketseat.
Então, confira o resultado no link abaixo:
- Front-end;
- Página:
- de Login com Github;
- Principal listando os jobs em andamento, encerrados e não iniciado;
- do perfil para configurar o planejamento de estimativas de ganhos e horas de trabalho;
- para cadastro de jobs;
- para editar jobs;
- modal para deletar jobs;
- Autenticação com Next-Auth;
- Rotas privadas para usuários não autenticados;
- Notificações com Toastify;
- Versão web mobile;
- Página:
- API Routes
- Perfil
- POST /api/profiles - Cria um novo perfil de usuário
- PUT /api/profiles/[profileId] - Atualiza dados do perfil do usuário
- Jobs
- GET /api/profiles/[profileId]/jobs - Lista os jobs do perfil do usuário
- POST /api/profiles/[profileId]/jobs - Cria um novo job
- PUT /api/profiles/[profileId]/jobs/[jobId] - Atualiza dados do job
- DELETE /api/profiles/[profileId]/jobs/[jobId] - Deleta o job
- GET /api/profiles/[profileId]/jobs/[jobId] - Lista os dados do job
- Perfil
- Usar fakeAPI para remover dependência do projeto back-end em java disponível AQUI.
- Mostrar um load de carregamento nas páginas enquanto o servidor não retorna os dados do backend
- Otimização de imagens substituindo todas as tags 'img' para o component Image do NextJS
-
- Criação do design da página de login com github.
- Customização da pagina de edição de job
- Criação de componente para alteração de status.
- Versão para web mobile
💡O Frontend precisa que o Backend esteja sendo executado para funcionar, que pode ser encontrado AQUI.
💡Para integração com a autenticação é preciso configurar as variáveis de ambiente para o Next-Auth se conectar com a api do Github.
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, Yarn. Além disto é bom ter um editor para trabalhar com o código como VSCode
# Clone este repositório
$ git clone https://github.com/glaubermatos/jobscalc.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd jobscalc
# Instale as dependências
$ yarn
# Execute a aplicação em modo de desenvolvimento
$ yarn dev
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000
# É necessário configurar as variáveis de ambiente
Configure o github para permitir autenticação, crie uma OAuth App AQUI.
# Copie o arquivo .env.local.example para a raiz do seu projeto renomeando para .env.local (que será ignorado pelo Git):
$ cp .env.local.example .env.local
Adicione detalhes para um ou mais provedores (por exemplo, Google, Twitter, GitHub, Email etc.).
Para ver detalhes da implementação do Next-Auth AQUI.
Saiba mais sobre o Next-Auth.
Este é um projeto Next.js inicializado com create-next-app. As seguintes ferramentas foram usadas na construção do projeto:
Aplicação web (NextJS + TypeScript)
Veja o arquivo package.json
- Editor: Visual Studio Code
- Teste de API: Insomnia
- Ícones: Feather Icons
- Fontes: IBM Plex Sans | Inter
🌟 Glauber de Oliveira Matos 🌟
Este projeto esta sobe a licença MIT.
Feito com 😆 por Glauber de Oliveira Matos 👋🏽 Entre em contato!