We're sorry but this portfolio doesn't work properly without JavaScript enabled. Please enable it to continue.
SquareCircle
GID master side projects

Playground

Hands-on projects applying real life concepts

The best way to learn a new skill is through implementation, If you can apply your knowledge to an actual project putting in practise real concepts, then you'll become more efficient in your new skillset.

Rodrigo Tosta Avatar
GID Master Lab

Hands-on applications

Coding standards, best practices and guidelines

The concept behind GID master lab is to develop demo applications exploring patterns, architectures and upcoming features used across the most modern frameworks currently available in the market. It exposes a clean code structure and deep understanding of how the end-to-end Javascript applications are designed.

Progressive web application

The purpose of this application is to demonstrate the diverse available features of various frameworks, with a focus on highlighting usability and introducing key concepts.

It has been optimized exclusively for mobile view. To ensure an enhanced user experience, we recommend accessing it either through your browser's mobile mode or directly from your mobile device.

Gid MasterGid MasterGid Master

Developing practical skills through hands-on projects

While some of these frameworks and architectures have evolved, these repos continue to serve as valuable references.

  • Angular

    Angular

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

    RunningCheck out this project
  • Vue

    Vue

    Ecosystem implementing Vuex, reactivity, composition api, form vuelidate, plugins, axios 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 rendering, static site generation, serverless, SWR fetching and Vercel.

    RunningCheck out this project
  • NodeJs

    NodeJs

    REST API, Express, TypeScript, MVC, MongoDB, Schemas, Middlewares, Async/Await, ES6.

    RunningCheck out this project
  • Firebase

    Firebase

    Firestore, Realtime Database, Firebase Authentication, Hosting, Cloud Functions, Messaging Cloud.

    RunningCheck out this project
Resources

A new and complete responsive web application

This project encompasses the entire product development lifecycle, guiding you through every step required to construct a comprehensive web and mobile application.

The application's incorporation of a blend of responsive and adaptive design principles enhances its user-friendliness.

  • Check

    Front-end Frameworks

    Applications developed in Angular, Vue, Nuxt, React, NextJs and Svelte applying some new concepts and exploring features such state management, reactive programming, SSR, SSG and Vite to write packages.

  • Check

    AWS Serverless

    Adoption of a serverless architecture in the cloud using AWS services such as Cognito for authentication, AppSync for graphql, Gateway API for REST API, DynamoDB as non-sql database and Lambda functions.

  • Check

    MicroFrontend

    Convert modules/features from a monolith web application into small individual applications that can be developed and executed as independent application, but also combined and deployed as a single application.

  • 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

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.

NPM Package
Resources for developers

Experiences with technical articles

Quick readings to help you with everyday tricks during your development. Most of these articles are used as documentation for common questions.