Exploring JavaScript and Frameworks: My Journey in Front-end, Back-end, and Mobile Projects

The goal of this article is to talk about my experiences with JavaScript and discuss the use of some frameworks that I have used in projects. I will detail each architecture in front-end, back-end, and mobile projects.

Introduction:

The first time I started using JavaScript, I already had experience with other programming languages like C, C++, and Python. I used JavaScript in 2012 to build scripts within a website, performing simple tasks such as capturing mouse click events, performing basic calculations, and using basic loops like if, else, for, among others, to build simple logic for websites. Gradually, I learned more about JavaScript and gained a better understanding of the ECMA script standard, eventually reaching the V8 JavaScript engine and the features of the Google Chrome browser. As my expertise was always in back-end development, I started learning Node.js to use JavaScript on the back-end and then moved on to using React.js on the front-end until I reached React Native for mobile development. In this article, I will share my experiences with JavaScript and discuss how I used frameworks in various front-end, back-end, and mobile projects.

Back-end projects with Node.js:

1. Brazilian Fintech Project — Retail Bank:?????

I started using Nest.js as a framework for web services in a project for a Brazilian fintech. I created a REST API with MongoDB as the database for a customer registration service, including the entire onboarding process with features such as document validation, permission levels and access, and entity linkage for corporate accounts. I integrated it with other anti-fraud services using RabbitMQ messaging. In this project, I used TypeScript, which facilitated type checking and the implementation of design patterns. I used Jest for automated testing, JWT for authentication, Eslint for code formatting, Docker for containerization of the application, and SonarQube for code quality inspection. The architecture separated the layers into Controllers, DTOs, services, and providers, with the use of interfaces for entities and environment variables to handle sensitive data during the pipeline process.

Architecture of the project:

2. Gift Card Management Project: ????

In another project for an API to issue, distribute, and redeem gift cards, I also used Node.js and Nest.js with a serverless architecture on the Google Cloud Platform (GCP). I wrote another article detailing this project, titled “Building Efficient Architectures for Gift Card Systems and APIs,” divided into?Part 1?and?Part 2.

3. Fintech Project with a Focus on Financial Content: ????

In another project for a different fintech company focused on content and sale of financial products, specifically credit cards and cashback, I migrated the existing WordPress structure to a back-end built with Node.js and Nest.js. I used Postgres as the relational database and DynamoDB for NoSQL database. I implemented an architecture on AWS using CDK scripts for infrastructure construction, incorporating resources like AWS API Gateway and Lambda Functions. In this project, I developed features for registering financial products for sale, user registration on the platform, integration with the Open Banking system implemented in Brazil at that time, which connected to various banks. The DynamoDB data structure was updated accordingly, and through the API, the rates of cards from all major banks in Brazil were displayed, allowing users to compare fees and benefits. The project was divided into layers: Controllers, Services, DTOs, Modules, Entities, and interfaces were used. We also used migrations for creating the relational database and automated testing with Jest.

Architecture of this project:

4- Agricultural Machinery Marketplace Project: ????

In this project, I used Node.js with NestJS and the Postgres database. At this point, I already had a pattern for creating APIs using Node.js with NestJS and TypeScript. I always structured the project architecture by separating the layers into Controllers, Models, Interfaces, DTO (data transfer object), and Entities. I containerized everything with Docker, created pipeline scripts with automated testing jobs using Jest, and performed builds and deploys to AWS. I always utilized AWS resources such as API Gateway, Load Balancers, and ECS or EKS (Kubernetes). I also created migrations for database versioning and used RDS with Postgres as the SQL database. For future use cases similar to this one, I won’t go into detail about the project architecture, but I’ll provide a simplified diagram whenever there are exceptions.

In this project, my responsibility was to create features for user and agricultural equipment/machinery registration. I implemented a customizable questionnaire so that equipment owners could provide specific technical information along with the equipment’s conditions.

5- Education Platform Project — Edtech (LMS): ????

This project was a Learning Management System (LMS) that included features such as student and teacher registration, quiz and exam creation, the ability for teachers to upload educational materials in video and PDF formats, a learning progress tracking system for students, class creation, and content blocking functionalities. I was involved in building all of these features and followed the same development and architecture patterns mentioned above.

6- Other Projects:

In addition to the previously mentioned projects, I’ll group some projects here by simply mentioning their categories. For example, there was a project for Human Resources management, one for controlling the migration of telecommunications providers, a content management project for virtual laboratories in universities (implemented with AdonisJS instead of NestJS), a project for managing efficiency and viability in implementing solar panels, and others that couldn’t be covered in this article to avoid making it too lengthy.

Front-end Projects with ReactJS and Vue.js:

I gradually started working on front-end projects using ReactJS and Vue.js. In most of the mentioned projects, I also acted as a full-stack front-end developer. For example, in?projects 1 (Brazilian Fintech — Retail Bank) and 5 (Education Platform — Edtech LMS), I used ReactJS with Styled Components, Material-UI as the CSS framework, Docker for containerization, GitLab for pipeline scripts, Redux, and Redux Toolkit for state management. In?project 3 (Fintech project focused on financial content), I used NextJS, which helped and facilitated the front-end application development.

In addition to ReactJS, I used Vue.js exclusively for front-end development in another fintech project focused on currency exchange for international payments. I also worked on projects that solely involved front-end development using Vue.js and Vuetify. For example, a patient management project focused on sleep health, a medical document management and processing project using the PACS (Picture Archiving and Communication System), an LMS system for online classes in basic schools with integrations using the Agora framework for image streaming, a control system for on-premises cloud-based gaming machines, a satellite image management and geoprocessing system, and a media management and distribution system discussed in my article titled “Building a Media Management and Distribution System with Serverless Architecture.”

Some of the mentioned projects have had their back-end architecture described in detail in other articles I have written. Although I usually work as a full-stack developer, my expertise lies primarily in back-end development, constructing architectures that typically involve cloud environments like AWS or GCP. However, for front-end projects, I have also utilized cloud resources and direct integrations, as we will see in the next topic, where I implemented mobile projects.

Mobile Projects with React Native: ??

I finally entered the world of mobile development using React Native, which was made easier by my previous knowledge of ReactJS. In project 4 (Agricultural Machinery Marketplace Project), I developed an application using React Native, focusing on the Android and iOS stores. For building an app with React Native, I typically follow the same pattern: using TypeScript for better flow control and data typing between components, using CSS frameworks like Paper, React Native Elements, and Material UI Kit, managing states with Redux (similar to web front-end development with ReactJS), using Cypress for automated end-to-end testing, and componentizing screens. I generate Android builds with the .aab file format and use my Google developer credentials, while for iOS, I utilize my MacBook with Xcode for App Store publication since I have an enterprise developer account. I also use TestFlight for testing on iPhones and generate .IPA files for publication.

Following the same pattern as the project mentioned above, I also developed a social networking app for gamers to find matches and players. Details of this architecture were published in another article I wrote titled “Building a Mobile App for Gamers: Uniting Players for Ultimate Gaming Experiences.”

Other mobile projects using React Native included a meditation content management app, where I developed features for user and content creator registration, a player for playing videos within the app, and managing paid content. I also worked on an app for company management focused on issuing invoices in the accounting field, integrating with Brazilian government agencies for generating DAS (Documento de Arrecada??o do Simples Nacional), and incorporating a financial control and cash flow system for micro-entrepreneurs. Additionally, I participated in a project for managing energy efficiency and viability for implementing solar panels.

In addition to React Native projects, I have also developed several other mobile projects using Flutter. I wrote an article comparing my experiences with React Native and Flutter titled “My Experiences with Mobile Projects: React Native vs. Flutter.”

Impressions on JavaScript, Frameworks, and Architectures: ??

I believe that using TypeScript is essential for building a solid and consistent back-end architecture that adheres to principles and design patterns such as SOLID, Clean Code, Clean Architecture, Object-Oriented Programming, and other patterns that benefit from typing and better control over attribute scopes in project entities. In the back-end, I recommend using an ORM for migration management and control during the database creation process, including tables and relationships, to ensure consistency between the data layer and object representation.

Containerization using Docker facilitates infrastructure management for your project and allows for the use of container management tools like AWS ECS and EKS. Implementing a pipeline system with automated testing following the principles of Test-Driven Development (TDD) and using environment variable files (.env) to configure deployments for different environments are also beneficial. For project architecture itself, I recommend reading the book “Domain-Driven Design” by Eric Evans, which greatly expanded my understanding of software architectures. I also strongly recommend implementing interfaces in the Model layer. Swagger is a helpful tool for API route documentation, facilitating communication between front-end and back-end teams.

For front-end development, from an infrastructure perspective, I recommend following similar practices as in the back-end. For state management, I strongly recommend using Redux and Redux Toolkit. Regarding authentication systems, I have had various experiences, such as creating an API using JWT for token management and implementing it in the front-end, using Firebase Authenticator (more common for mobile projects in my experience), AWS Cognito, or the Okta framework. Each of these options has its peculiarities that should be discussed and evaluated on a project-by-project basis.

For mobile projects, the most important aspect is the developer’s experience in publishing the app on the Android and iOS stores, as it adds significant value to their career. The rest of the development process, for those already familiar with ReactJS, is quite similar, with the addition of utilizing native resources such as accelerometer, gyroscope, camera, and GPS, which often require integration with APIs like Google Maps to plot points on a map using markers.

Finally, for those aspiring to become full-stack developers with skills in back-end, front-end, and mobile development, I recommend reading my article titled “A Roadmap for Success in Software Development and Infrastructure.” I am also available for discussion on any of the ideas and architectures mentioned here. Feel free to leave your comments, and I will be happy to respond.