How this website is done?

Developpment news: v 1.0.1

18/07/2024 - Contact form - Basic pages and simple design: main, contact, biography and website development process pages - Deploying Next releases: - Implementation of automated builds - API/swagger - create separate page for history of releases - cookies and RGPD

Conception

I created this website to show my knowledge and to practice. I chose MEAN solution stack that includes MongoDB, Express.js, Angular and Node.js. The MEAN stack is an open-source collection of JavaScript technologies that has gained significant popularity. It makes it easy to build complex, full-stack web applications and is an excellent option for front and back end development. This stack corresponds well to the need of lightweight fast website.

image

Prototyping

I used Figma to create the prototype of my future portfolio website. It's a handy tool that helped me to design and to create automatic css files. I designed in Figma both desktop and mobile interfaces of the future webpages. Techno: Figma, VScode

image

Front end

For this part I decided to use Angular. It’s a component-based framework that helps to create scalable and robust web applications. Angular uses TypeScript as a coding language which is compiled after into JS. Techno: HTML, CSS, Angular, JavaScript, TypeScript

image

Back end

The back end part of MEAN stack is Node.js, a server-side JavaScript runtime environment, and Express - a Node.js framework for building APIs. Even if I prefer Java and Spring Boot, JS family is quite popular and have good perspectives. For this project I chose non-relational database MongoDB because it’s popular, simple to implement and provides free cloud hosting. Techno: ExpressJs, NodeJs, NPM, MongoDB, Mongoose

image

Deploying

For deploying I chose method of project containerization. I wrote several .dockerfiles for different components: front-end, back-end, database and loadbalancer and then built images with docker.compose.yaml. Then all images were tagged and pushed to Docker Hub. After this stage I downloaded images to my domestic server and deployed in container on the single port thanks to Nginx. Techno: Docker, Docker Hub, Nginx, domestic server

image