Click to expand!
This project is a content management system that allows users to visualize, create, edit and delete text contents.
This project was developed through containers and container orchestration using Docker and docker-compose yml files. Three services were created, one for the database, one for Back-end and lastly the Front-end.
The programming language used was JavaScript, with the superset TypeScript to strengthen good practices and clean code.
To develop the Back-end portion of this project, Node.js was used with the Express.js to create a RESTful API, connected through the Sequelize ORM with a MySQL instance.
To add a security layer to this application, the npm libraries jsonwebtoken and bcryptjs were used to ascertain user authorization for harsher CRUD operations as update and delete, and to encrypt users' passwords into the database.
Also, to assure the proper functionality of the API, integration tests using Mocha, Chai and Sinon were created.
The API's documentation was created and published using Postman and can be found here.
The connection between Back-end and Front-end parts of the application was made using Axios. The Front-end part of the project was developed using React and styled with CSS3. The React Router library was used to enable routing in this Single Page Application and React's native Context API and Hooks composed the application's state management.
Before proceding to the installation, please make sure you have Docker, Docker-compose and Node.js installed on your machine.
- Clone the repository and access the created directory:
git clone git@github.com:saraivais/ep-motrix.git
cd ep-motrix
- Use the following script command to build & start the application:
npm run compose:up
- Access via browser the Front-end part of this application using the url:
http://localhost:3000/
-
If you wish to test the API using its integration tests:
-
Use the following script command to access the back-end container:
npm run enter:backend
- Run the test command:
npm test
This project was very enjoyable to develop and I learned a lot about containerization and container orchestration through docker-compose. The creation of a development docker-compose file allowed me to maintain the containers up during development and problem-solve as needed, for I had always script monitoring using volumes and development tools such as nodemon and ts-node.
I also took this as an opportunity to learn a new tool, Axios, to make the Back-end and Front-end connection using my own API, and to get better at project setup, using airbnb eslint to monitor a fluid code development.
For the future of this project, I wish to implement a new feature, an editing tool to fully implement wysiwyg and to create a testing coverage using Cypress.
Overall, I am happy with this project's development and the result I got. Hope you all enjoy!
Clique para expandir!
Este projeto é um sistema de gerenciamento de conteúdo que permite aos usuários visualizar, criar, editar e excluir conteúdos de texto.
Este projeto foi desenvolvido por meio de contêineres e orquestração de contêineres usando0 Docker e arquivos yml docker-compose. Foram criados três serviços, um para o banco de dados, um para o Back-end e por último o Front-end.
A linguagem de programação utilizada foi o JavaScript, com o superset TypeScript para fortalecer as boas práticas e código limpo.
Para desenvolver a parte de Back-end deste projeto, Node.js foi usado com o Express.js para criar uma API RESTful, conectada por meio da ORM Sequelize com uma instância do MySQL.
Para adicionar uma camada de segurança a esta aplicação, as bibliotecas npm jsonwebtoken e bcryptjs foram usadas para verificar a autorização do usuário para operações CRUD mais rigorosas como atualizar e excluir, e para criptografar as senhas do usuários no banco de dados.
Além disso, para garantir o bom funcionamento da API, foram criados testes de integração usando Mocha, Chai e Sinon.
A documentação da API foi criada e publicada usando o Postman e pode ser encontrada aqui.
A conexão entre as partes Back-end e Front-end da aplicação foi feita usando o Axios. A parte Front-end do projeto foi desenvolvida usando React e estilizada com CSS3. A biblioteca React Router foi usada para habilitar o roteamento nesta Single Page Application e o Context API, nativo do React, e os Hooks compuseram o gerenciamento de estado do aplicativo.
Antes de iniciar a instalação, por favor se assegure que possui instalados Docker, Docker-compose e Node.js em sua máquina.
- Clone o repositório e acesse o diretório criado:
git clone git@github.com:saraivais/ep-motrix.git
cd ep-motrix
- Use o seguinte comando de script para construir e iniciar o aplicativo:
npm run compose:up
- Acesse via navegador a parte Front-end deste aplicativo usando a url:
http://localhost:3000/
-
Se você deseja testar a API usando seus testes de integração:
-
Use o seguinte comando de script para acessar o contêiner de back-end:
npm run enter:backend
- Execute o comando de teste:
npm test
Este projeto foi muito agradável de desenvolver e aprendi muito sobre conteinerização e orquestração de contêineres através do docker-compose. A criação de um arquivo de composição docker de desenvolvimento me permitiu manter os contêineres ativos durante o desenvolvimento e solucionar problemas conforme necessário, pois sempre tive monitoramento de scripts usando volumes e ferramentas de desenvolvimento como nodemon e ts-node.
Também aproveitei isso como uma oportunidade para aprender uma nova ferramenta, Axios, para fazer a conexão Back-end e Front-end usando minha própria API e também melhorar a configuração do projeto, usando o airbnb eslint para monitorar um desenvolvimento fluido de código.
Para o futuro deste projeto, desejo implementar um novo recurso, uma ferramenta de edição para implementar totalmente o wysiwyg e criar uma cobertura de testes usando o Cypress.
No geral, estou feliz com o desenvolvimento deste projeto e com o resultado que obtive. Espero que gostem!