You can send me an email or a Linkedin message
that I will get back as soon as possible.
Playground
Hands-on projects applying real life conceptsThe 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.
Hands-on applications
Coding standards, best practices and guidelinesThe 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.
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
Concepts using Ngrx, RxJs, reactive programming, reactive forms, pipes, directives and others.
Check out this projectVue
Ecosystem implementing Vuex, reactivity, composition api, form vuelidate, plugins, axios and others.
Check out this projectReact
Function components using hooks, HOC, redux saga, hooks form, css-modules, axios and others.
Check out this projectNext
Concepts using server side rendering, static site generation, serverless, SWR fetching and Vercel.
Check out this projectNodeJs
REST API, Express, TypeScript, MVC, MongoDB, Schemas, Middlewares, Async/Await, ES6.
Check out this projectFirebase
Firestore, Realtime Database, Firebase Authentication, Hosting, Cloud Functions, Messaging Cloud.
Check out this project
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.
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.
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.
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
Ecosystem implementing pinia, reactivity, composition api, form vuelidate, plugins, axios and others.
Check out this projectVite
NPM package development, StoryBook for visual documentation, Vitest (unit tests), Github Actions (CI/CD workflow).
Check out this projectNuxt
Single-file component, File-based routing, auto-imports, built-in composables, server side rendering, hybrid rendering and others.
Check out this projectAngular
Concepts using Ngrx, RxJs, reactive programming, reactive forms, pipes, directives and others.
Check out this projectReact
Function components using hooks, HOC, redux saga, hooks form, css-modules, axios and others.
Check out this projectNext
Concepts using server side sendering, static site generation, serverless, SWR fetching and Vercel.
Check out this project
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.
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.
Setting up your first Django project, application, database and CRUD forms in less than 10 minutes.
Functional Programming Concepts
Functional Programming Concepts show a way to develop application composing functions without any side effects and that except the same response. The idea is send parameters through pure functions and always expected the same response.
RxJs — Reactive and Imperative Programming
Angular uses RxJs as part of its ecosystem, honestly, it is the best library by far. RxJs definitely changed the way that front-end developers manipulate and transform data before displaying on screen.
Angular CLI Proxy Settings for API Calls
Angular CLI provides a proxy settings for API calls to help developers to avoid those annoying cross domain issues during development process.
Hardware Pixel and CSS Pixel
Definitely, high-density displays affects the way we see Hardware Pixel and CSS Pixel, let’s understand how to use device pixel ratio (DPR) to calculate pixels conversion, and how it improves the web page quality.
Responsive images sizes improve application performance
Responsive images sizes is a frontend technique that help to improve application performance, considering that images are responsible for more than 60% of download size, developers should be aware of these techniques.
Viewport meta tag to control responsive website
Viewport defines the area of the screen that the browser can render content to. It’s the size of the window you’re viewing your website regardless the device screen size, that’s why viewport meta tag is considered the first step to to control a responsive website.