Cristian-Sknz / Ichirin

Site de Mangas Yuri (Ichirin no Hana Yuri) refeito com NextJS, Typescript e Java (Spring Framework)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ichirin no Hana Logo

Ichirin

Chika Fujiwara

Sobre

Este projeto será apresentado em meu portfolio, mostrando algumas das tecnologias que sei atualmente. Este projeto é um projeto full-stack, com o front-end feito com ReactJS e NextJS utilizando o TypeScript e o back-end feito em Java utilizando o Spring Framework.

🔥 Status

Como este projeto ainda não está concluido, recomendo que teste em ambiente de desenvolvimento.

Atualmente o projeto irá passar por um "replanejamento", no começo criei este projeto sem nenhum planejamento apenas fui desenvolvendo com as ideias que tinha na cabeça. Bem isso não foi algo que deu muito certo, o projeto tomou uma proporção alem das minhas expectativas e continua a evoluir tomando porporções de desenvolvimento ainda maiores. Este replanejamento será feito para deixar as ideias e objetivos do projeto mais claros.

Decidi replanejar pois como disse, o projeto está ficando bem grande e com isso, eu estava começando a desenvolvendo de forma desorganizada sem completar o desenvolvimento de features e desenvolvendo varias features ao mesmo tempo. Este replanejamento irá fazer com que o desenvolvimento do projeto fique mais saudavel e fazendo com que seja mais produtivo até chegar no resultado final.

Desenvolvimento atual:

Você pode ver o progresso do projeto em Issues. As modificações que não estão totalmente prontas, não serão commitados na master, tente dar uma olhada em outras branches para ver o progresso do projeto.

Como iniciar em modo de produção?

Docker logo Para isso você irá precisar utilizar o Docker para deixar todos os ambientes funcionando em conjunto, corretamente e sem problemas! Tem duas formas de criar o ambiente de produção com o Docker.

1. Build completo com o docker-compose

A primeira forma requer menos etapas e não precisa ter as ferramentas de desenvolvimento instaladas na sua maquina, porem é mais demorado por conta do processo de building. Comece editando o arquivo docker-compose.yml na raiz do projeto.

Modifique os seguintes campos:

services:
  backend:
    container_name: ichirin-backend
    build:
      context: ./ichirin-backend
      dockerfile: dockerfile_build
      # Aqui estará como 'dockerfile', altere para 'dockerfile_build'
....

Agora você só precisa rodar o comando docker-compose up -d, que o docker irá criar a build da imagem e irá rodar o projeto automaticamente, fique ligado no terminal para ver as etapas sendo concluidas. Depois é só acessar o link da aplicação que estará funcionando sem problemas!

2. Usando a build pronta do backend

Aqui você precisará ter instalado o Gradle na sua maquina e utilizar o comando gradle build em ./ichirin-backend, após fazer isso você precisará apenas rodar o comando docker-compose up -d na raiz do projeto utilizando o arquivo docker-compose.yml padrão que vem na raiz do projeto.

Criar as imagens e containers Docker utilizando este metodo é muito mais rapido, pois o docker não terá que baixar todas as dependências do gradle (que são muitas) a cada build, com isso as proximas builds do projeto serão menos custosas.

Como iniciar em modo de desenvolvimento?

Como este projeto é um projeto que tem tanto o front-end e back-end, caso queira desenvolver ambas as partes, terá que ter uma serie de ferramentas instaladas em seu sistema, abaixo separei quais ferramentas você irá precisar em cada stack.

Back-end com Java e Spring Framework

Para iniciar o ambiente de desenvolvimento back-end, você precisará ter instalado o JDK/Java 11, a versão do Gradle que tenha suporte a JDK 11 e uma IDE para desenvolver e editar codigo, recomendo que utilize o IntelliJ IDEA, mas você pode utilizar outra IDE de sua preferência, o unico requisito para a IDE será ter suporte a Java e Gradle.

Após ter preparado o ambiente, dê um build do projeto para se certificar que todas as dependências estão instaladas, depois de tudo pronto, o projeto está preparado para ser editado e desenvolvido sem problemas. Lembre-se de mudar a url do banco de dados em ./resources/application.yml

Utilize o Postman!

Postman Logo

Aqui está disponivel uma coleção do postman com todas as rotas e campos necessarios para cada resposta preenchidos:

✍️ Ichirin API Postman Collection


Front-end com typescript, React e NextJS.

Para iniciar o ambiente de desenvolvimento front-end, primeiramente você precisará ter uma instancia do backend funcionando (você pode criar um container com o backend utilizando o docker-compose.yml). Para declarar o caminho da API você precisa editar o arquivo .env.development

# Troque o valor da chave a seguir:
API_HOST=<ip do backend>
# Exemplo
API_HOST=http://192.168.99.100:8080

Após concluir o passo anterior, você precisará ter instalado em sua maquina o NodeJS, execute o comando npm install ou yarn install na raiz do front-end.

Após instalar todas as dependências o projeto está pronto para ser editar e desenvolvido, recomendo você utilizar o Visual Studio Code, mas você pode utilizar a IDE de sua preferência, os requisitos da IDE são ter suporte a Typescript e Sintaxe JSX/TSX.

Para iniciar o ambiente basta utilizar o comando npm run dev ou yarn dev.

Pull Requests

Ainda não estou aceitando pull-requests pois este é um projeto pessoal e apenas está open-source, ao concluir este projeto pull-requests poderão ser aceitas, caso o intuito seja melhorar e aprimorar o projeto.

About

Site de Mangas Yuri (Ichirin no Hana Yuri) refeito com NextJS, Typescript e Java (Spring Framework)

License:GNU Affero General Public License v3.0


Languages

Language:Java 57.5%Language:TypeScript 41.5%Language:JavaScript 0.8%Language:CSS 0.2%