FullStack Bank CICD

📃 About

Full stack digital wallet application developed in Next.js and Node.js with TypeScript and built with Docker.

Note: the application is currently only in Brazilian Portuguese, I want to add an English translation soon.

👨‍💻 Developed Skills

• Develop a frontend application with the Netx.js framework and TypeScript
• Use Sass and CSS Modules for frontend styling
• Develop a RESTful API in Node.js with Express.js and TypeScript
• Use an ORM
• Use a PostgreSQL database
• Document the API with Open API and the Swagger UI framework
• Implement backend integration tests using Mocha.js, Chai.js and Sinon.js with 100% coverage
• implement E2E tests with the Cypress framework in conjunction with the Testing Library
• Dockerize the application using Docker Compose

📝 Methodologies and paradigms

• Mobile First
• BEM (Block-Element-Modifier) ​​in CSS
• Object-Oriented Programming (OOP)
• SOLID Principles

🛠️ Stacks

• TypeScript
• React.js
• Next.js
• Sass
• Cypress
• Testing Library
• Node.js
• Express.js
• Sequelize.js
• PortgreSQL
• Swagger UI
• Mocha.js
• Chai.js
• Sinon.js
• Docker
• Docker Compose

Download Plugins :

• nodejs : NodeJs Plugin
• sonar : SonarQube Scanner
• owasp : OWASP Dependency-Check
• docker : Docker, Docker Pipeline

Configure Plugins :

• Manage Jenkins > Global Tool Configuration

Dependency-Check installations

• Name : DP
• Install Automatically > Install from github.com > dependency-check 6.5.1

Docker installations

• Name : docker
• Install Automatically > Version (latest)

NodeJs installations

• Name : node16
• Install Automatically > Version (16.20.2)

SonarQube Scanner installations

• Name : sonar-scanner
• Install Automatically > Version (Default)

Jenkinsfile Prerequisite :

• for the stage named : Trivy we need to have trivy established into our Environmental System

sudo apt-get install wget apt-transport-https gnupg lsb-release

wget -qO - https://aquasecurity.github.io/trivy-repo/deb/public.key | gpg --dearmor | sudo tee /usr/share/keyrings/trivy.gpg > /dev/null

echo "deb (signed-by=/usr/share/keyrings/trivy.gpg) https://aquasecurity.github.io/trivy-repo/deb $(lsb_release -sc) main" | sudo tee -a /etc/apt/sources.list.d/trivy.list

sudo apt-get update

sudo apt-get install trivy -y

Dockerfiles Locations :

• /app/docker-compose.yml
• /Jenkinsfile
• /app/backend/Dockerfile
• /app/frontend/Dockerfile

🛠️ Installation and execution

To run this application you need to have Git, Docker, Node and Docker Compose installed on your computer. Docker Compose needs to be version 2.5.0 or higher and Node version 16.

In addition, to run the step-by-step commands below, your operating system must also have a Bash terminal installed. If you are using Linux or macOS, Bash is already installed by default. However, if your system is Windows, you may need to do separate installation.

1. In the project root directory, run the command below in the terminal to install the dependencies

npm install

2. Start the application containers

npm run compose:up

By running the command above, three containers will be started:

• ng_frontend - mapped on the port 3000
• ng_backend - mapped on the port 3001
• ng_db - mapped on the port 3002

They are the front-end, back-end and the database, respectively. After the containers starts, you can enter the http://localhost:3000 address in your browser to see the application running.

To stop the containers, run the command below:

npm run compose:down

📚 API Documentation

With the application running, access the http://localhost:3001/docs address in your browser to see the API documentation implemented with Swagger UI.

🧪 Tests

Integration

I've implemented backend integration tests with 100% coverage. To check their result, just run the command below in the project root directory:

npm run test: integration

Note: to run the integration tests, it is not necessary for the application to be running, as the interaction with the database is mocked and the tests start an instance of the API before being started.

E2E (End-to-End)

I've also implemented some E2E tests with the Cypress framework in conjunction with the Testing Library to use semantic selectors. Applications must be running before running E2E tests.

To open Cypress in the browser, run the command in the project root directory:

npm run test:e2e:open

A window will open with the list of specs, just click one of them to start the tests.

If you prefer, it is also possible to run the E2E tests without the graphical interface by using the command below:

npm run test:e2e

Run all tests

Run the command below in the project root directory tp run all integration and E2E tests in sequence in your terminal:

npm run test

Note: this command runs the E2E tests without the graphic interface.

📱 Screenshots/Capturas de tela

Source Credits :

Original Source Code : Click Here
Tutorial Reference : Click Here

Feedback

Your feedback is valuable! If you have suggestions for improving existing content or ideas for new additions, please open an issue or reach out to the repository maintainers. If you have any other feedbacks, you can reach out to us at harsh.thakkar0369@gmail.com

Connect with Me