We're sorry but this portfolio doesn't work properly without JavaScript enabled. Please enable it to continue.
SquareCircle
Look out some of my

Essential Skills

An expert path to end-to-end software development

Technology is evolving faster than people's ability to adapt, and despite everything, learning is still the key to keep up to date. In this section you will be able to see some of my open projects applying real life concepts.

Rodrigo Tosta Avatar

Knowledge in 90% of the SPA JavaScript frameworks

Lead software engineer with in-depth knowledge in the most popular single-page application frameworks and its eacosystems.

  • Check
    Applications with quick page loading time
  • Check
    Improved user experience using UI/UX concepts
  • Check
    Progressive web application to bring more engagement
  • Check
    State management and reactive programming
Stack Overflow surveyChart

End-to-end JavaScript

Strong hands-on experience leading a wide variety of web and mobile applications using end-to-end solutions.
Expertise to extract the best from all the modern frameworks available in the market.

  • Vue

    Vue

    Ecosystem implementing pinia, reactivity, composition api, form vuelidate, plugins, axios and others.

    RunningCheck out this project
  • Vite

    Vite

    NPM package development, StoryBook for visual documentation, Vitest (unit tests), Github Actions (CI/CD workflow).

    RunningCheck out this project
  • Next Js

    Nuxt

    Single-file component, File-based routing, auto-imports, built-in composables, server side rendering, hybrid rendering and others.

    RunningCheck out this project
  • Angular

    Angular

    Concepts using Ngrx, RxJs, reactive programming, reactive forms, pipes, directives and others.

    RunningCheck out this project
  • React

    React

    Function components using hooks, HOC, redux saga, hooks form, css-modules, axios and others.

    RunningCheck out this project
  • Next Js

    Next

    Concepts using server side sendering, static site generation, serverless, SWR fetching and Vercel.

    RunningCheck out this project
NPM Package
The end-to-end process of development, tests and documentation

NPM package development

Leveraging widely adopted frameworks and libraries in the current market, the package incorporates Jest for unit tests, Storybook for comprehensive visual component documentation, and GitHub workflows for building and deployment of multiple package versions.

This hands-on project provides a straightforward and robust end-to-end process that encompasses all the essential elements needed to develop a well-tested and documented library.

  • Github Actions
  • Package / Lib
  • Vitest
  • Storybook
Check out my hands-on project

A complete, shareable, testable, and well-documented package

Figma and responsive web application

Applications UI from scratch

Work closely along with design and product teams suggesting best pratice and functional approaches to turn business requirements into technical designs. Ability to translate UX designs into functional web applications using modern CSS preprocessors or frameworks like Tailwind, Material Design and Bootstrap.

  • Check

    Responsive Design

    A wide quanity of applications that are able to render well on a variety of devices and screen sizes.

  • Check

    Adaptive Design

    Multiple design variants to better fit the screen/functionality providing a better user experience.

  • Check

    Cross Browser

    Make sure that the application is compatible in multiple browsers regardless of version.

  • Check

    Figma UI/UX

    I'm able to get my hands dirty and create design systems even not being a designer.

Check out my design system

Simple example of Figma design system with typography, color pallets and components

StoryBook
Stories capture the states of UI components

Storybook documentation

Understanding how to configure Storybook, customize themes to align with your company's specification, and efficiently organize stories in close proximity to their corresponding components.

Additionally, it's essential to establish clear guidelines for showcasing your project's design elements, including color, typography, and other essential aspects.

It's crucial to set up Storybook in your projects to ensure thorough documentation and standardization of your frontend structure.

Check out my hands-on project

An illustrative example to demonstrate how to build an interactive documentation

Techniques and strategies used during development

Development Flow
  • Check

    Clean code

    Code correctly formatted, features organised according to their proximity to the application, component complexity reduced, meaningful names, non-repeating code and write only functionalities that are used.

  • Check

    SOLID principals

    Single responsibility principle following patterns to separate concerns in modules and keep component-based development to increase productive and make it easier to manage and maintain.

  • Check

    Design patterns

    Dependency injection to use a single object instance globaly, observer to work with state management, factory method to abstract commum behaviours and adapter to build bridges between the application and third-parties libraries.

  • Check

    Rapid application development

    RAD focuses on speed, flexibility and quality reducing the development time and increasing the quality of the final product. Features are implemented in small cycles facilitating work in horizontal teams and that requires frequent functionalities changes.

Data Processing
Cloud containers and data warehouse

Automated data processing and database architecture

Multiple data sources connections, data integration, containers processing, relational and non relational database modeling. All data is manipulated, cleaned and transformed using Python and reorganised into databases.

  • Microsoft SQL
  • MongoDB
  • Postgre SQL
  • MySQL
  • Firestore
  • Firebase
  • AWS RDS
  • AWS ECR/ECS
  • Python
Check out my hands-on project

AWS ECS/ECR services to handle data collection and processing

SquareCircle
Infrastructure as code

Serverless application

Focus on the adoption of a serverless architecture for custom applications in the cloud using AWS services and Terraform (infrastructure as code).

All the configuration to set up an event-driven production-ready web application that embraces serverless principles and integrate multiple cloud services.

  • API Gateway
  • Cognito User Pool
  • DynamoDB
  • Lambda Functions
  • CloudWatch
  • AppSync GraphQL
  • CloudFront
  • S3 Bucket
Loading...
AWS Serverless
  • Item 1

    REST API & GraphQL

    API Gateway to interact with applications and microservices, or AppSync as a serverless GraphQL to query/update multiple datasources.

  • Item 1

    OAuth2.0 Flow

    Authentication/Authorizations handled by Cognito user pools integrated with API Gateway and AppSync (applications or server-to-server credentials).

  • Item 1

    NoSQL & RDS

    Data modeling using scalable serverless cloud databases whether using data structure based on documents/collections or relational tables.

Check out my hands-on project

AWS serveless infra project to handle API Gateway and Authentication