FullStack App ( Spring + Angular ) : ImperBlog :bookmark_tabs:
August 12, 2022 · View on GitHub
1) ENGLISH
Application for creating blog posts, developed with Java using Spring Framework for backend and Angular along with PrimeNG Library for frontend development.
1) PORTUGUESE
Aplicação para a criação de postagens ao estilo BLOG, desenvolvida com Java utilizando o Spring Framework para o backend e o Angular juntamente com a Biblioteca PrimeNG para o desenvolvimento frontend.
2) ENGLISH
The App has the following features:
- Creating a user account
- Login access validation using Spring Security
- Creating multiple posts per user
- Listagem de todas as postagens na página inicial
- Listing of all posts on the homepage
- view a post
- Edit a logged-in user's post
- Delete a post from the logged in user
- View the graph of users by gender (M & F)
- Responsive design suitable for most devices
- Logout
- JWT Token Usage
- Update token automatically
- Frontend URL protection
- Redirection to login when token expires
- Backend unit tests in Controllers, Services and Repositories classes
- And additional features or functionality in both Backend and Frontend for better user usability
2) PORTUGUESE
O App conta com as seguintes funcionalidades:
- Criação de uma conta de utilizador
- Validação de acesso com login utilizando Spring Security
- Criação de várias postagens por utilizador
- Listagem de todas as postagens na página inicial
- Listagem de todas as postagens de um utilizador no seu perfil
- Visualizar uma postagem
- Editar uma postagem do utilizador logado
- Deletar uma postagem do utilizador logado
- Visualizar o gráfico de utilizadores por gênero ( M & F )
- Design Responsivo adequado para a maioria dos dispositivos
- Logout
- Utilização do Token JWT
- Refresh Token automático
- Proteção de URL's no frontend
- Redirecionamento para o login quando o token expira
- Testes unitários no Backend nas classes dos Controllers, Services e Repositories
- E recursos ou funcionalidades adicionais tanto no Backend como no Frontend para melhor usabilidade do usuário
EN: The final system is available for testing at: https://imperblog.vercel.app/
PT: O sistema final encontra-se disponível para teste em : https://imperblog.vercel.app/
:key: EN: Requirements to run on Localhost
:key: PT: Requisitos para executar em Localhost
- Java Jdk ( 8/11 )
- Spring Tools Suit | Eclipse IDE | IntelliJ IDEA | NetBeans : Backend
- VScode: Frontend
- PostMan
- Node Js & npm
- TypeScript
- Angular CLI
- PgAdmin 4 & PostgreSQL
- Maven
:interrobang: EN: Note ( Database creation )
- It is important that you first create the database with the name imperblog_bd before running the backend if you have PgAdmin 4 & PostgreSQL installed on your machine as shown in the following image:
:interrobang: PT: Observação ( Criação do banco de dados )
- É importante que primeiramente crie o banco de dados com o nome imperblog_bd antes de executar o backend caso tenha o PgAdmin 4 & PostgreSQL instalados na sua máquina como mostra a imagem a seguir:
EN
- When starting the backend application, the database will automatically be loaded with the respective tables defined in
imperblog-backend/src/main/db/migration - If you want to change the name of the database, create one of your choice and remember to change it in the properties file
application.propertieslocated in the directoryimperblog-backend/src/main/resourceson line 1spring.datasource.url=jdbc:postgresql://127.0.0.1:5432/your-database-name
PT
- Ao iniciar a aplicação backend , automaticamente o banco de dados será carregado com as respetivas tabelas definidas em
imperblog-backend/src/main/db/migration - Caso deseje alterar a nome do banco de dados, crie um a sua escolha e lembre-se de alterá-lo no ficheiro de propriedades
application.propertiesque encontra-se no diretórioimperblog-backend/src/main/resourcesna linha nº 1spring.datasource.url=jdbc:postgresql://127.0.0.1:5432/nome-do-seu-banco-de-dados
:computer: EN: Installation :computer_mouse:
To perform the installation, you must have a good internet connection and follow the steps below :arrow_down_small:
- Downloading files from GitHub : In Code use the Download ZIP option to download the entire repository.
- Unzip the downloaded file.
- Open the
imperblog-backenddirectory in your preferred backend IDE and wait for Maven to import/download the dependencies. - Run the project
imperblog-backendso that it is available atlocalhost:8080. - Open the directory
imperblog-frontendin your preferred frontend IDE, and at the root of the directory, open the command line and run the commandnpm installto install the Angular framework dependencies and PrimeNG. - Run, typing in GitBash the command
ng serve -oin the root of theimperblog-frontendproject, so that the application starts and the browser automatically opens or typeng serveand access the url o address:http://localhost:4200. - If everything is perfectly installed, accessing the url
http://localhost:4200will have access to the Login as shown in the following image:
PT: Instalação :computer_mouse:
Para realizar a instalação, é necessário possuir uma boa conexão com a internet e seguir os passos a baixo :arrow_down_small:
- Baixando os arquivos do GitHub : Em Code use a opção Download ZIP para baixar todo o repositório.
- Descompactar o arquivo baixado.
- Abrir o diretório
imperblog-backendem sua IDE backend preferida e esperar que o Maven faça o import/download das dependências. - Executar o projecto
imperblog-backendpara que o mesmo fique disponível emlocalhost:8080. - Abrir o diretório
imperblog-frontendem sua IDE frontend preferida , e na raiz do diretório, abra a linha de comando e execute o comandonpm installpara que se faça a instalação das dependências do framework Angular e PrimeNG . - Execute, digitando no GitBash o comando
ng serve -ona raiz do projetoimperblog-frontend, para que a aplicação inicie e o browser abra automaticamente ou digiteng servee aceda na url o endereço:http://localhost:4200. - Caso tudo esteja perfeitamente instalado ao aceder a url
http://localhost:4200terá acesso ao Login como mostra a imagem a seguir:
:computer: EN: Unitary tests :bar_chart:
Unit tests are in the directory: imperblog-backend/src/test/java
To run all tests in simultaneous do as shown in the following image:arrow_down_small:
:computer: PT: Testes Unitários :bar_chart:
Os testes unitários encontram-se no diretório: imperblog-backend/src/test/java
Para executar todos os testes em simultâneo faça como mostra a imagem a seguir :arrow_down_small:
EN: And as a result we will have all the tests executed :arrow_down_small:
PT: E como resultado teremos todos os testes executados :arrow_down_small:
EN: To run the tests of a specific class, in which we will use the PostServiceTest class as an example, do as shown in the following image :arrow_down_small:
PT: Para executar os testes de uma classe específica, em que utilizaremos a classe PostServiceTest como exemplo faça como mostra a imagem a seguir :arrow_down_small:
EN: And as a result we will have only the tests of the PostServiceTest class executed :arrow_down_small:
PT: E como resultado teremos somentes os testes da classe PostServiceTest executados :arrow_down_small:
:computer: Postman Collection :satellite:
/postman_collection
EN: I'll be adding new features as time goes on, I hope you like it :heart:
PT: Vou adicionando novas funcionalidades consoante o tempo, espero que tenham gostado :heart: