Forem: Gabriel Penteado

A Dentist's Code: My move to Software Development

Gabriel Penteado — Fri, 07 Jun 2024 17:23:15 +0000

Hello everyone, I want to share a personal journey that transformed my life in ways I never imagined. My professional background is in dentistry. I spent years mastering the art and science of dental care, but I always had a persistent interest in technology simmering beneath the surface. This fascination inspired me to take a bold step and venture into the world of software development.

Transitioning from dentistry to software development was definitely a challenge for me. It involved countless hours of self-study, facing a steep learning curve, and often feeling like a beginner all over again. Even though skills like precision, problem-solving, and attention to detail that I learned during dental practice came in handy, I had to master a whole new set of tools and technologies.

Our passion for something gives us the strength to overcome obstacles in a rewarding manner. When we are deeply committed to a task, even the most difficult challenges become surmountable. My dedication to coding and creativity has been my driving force during tough times.

One of the most rewarding projects I have worked on is called 'Dental Procs'. It is a tool made specifically for dentists. This project demonstrates the possibility of combining my two experiences in life (Health Dentistry and Software Engineering) to make something very useful.

Dental Procs is a specialized application designed for dentists to monitor the most performed procedures in their clinics and track performance trends over time. The app permits dentists to create new procedures, associating them with specific days of the week, and provides a comprehensive chart that offers an overview of procedure frequency.

Dental Procs is built using a modern tech stack:

Frontend (Web): React, Vite, TypeScript, TailwindCSS, RadixUI
Frontend (Mobile): React-Native
Backend: Node.js, Fastify, Prisma, Zod
Database: MySQL
Charts and Analytics: ApexCharts

This project not only bridges my past and present careers but also demonstrates the importance of pursuing your interests.. Each challenge faced and overcome during this journey has led to a product that I am incredibly proud of and excited to share with the dental community.

You can find the source code here, watch a video presentation, and also try it on the website. Furthermore, feel free to visit my personal website to discover more about my work.

To anyone considering a major career shift, I encourage you to embrace the difficulties and trust in your passion. The road may be tough, but the reward at the end makes it all worthwhile.

Thank you for reading my story.

Dockerize a React App - with Nginx

Gabriel Penteado — Fri, 19 Jan 2024 19:08:30 +0000

What is Docker?

Docker is a software platform that allows you to build, test, and deploy applications quickly. It enables users to group applications and their dependencies in isolated environments called containers. This makes it easy to design and shape containers with minimal instructions. Docker containers are lightweight and efficient, working independently to prevent interference between applications. Dockerizing your React application can provide many benefits, including a consistent development environment, easy deployment, isolated dependencies, and faster builds.

Dockerfile

To build an image of your application, you need to specify instructions for the same in a Dockerfile. This instructions will be executed one after the other.

The instructions sequence from top to bottom is to use a specific Node image, copy all files from the React App to a temporary folder, install all dependencies from package.json, execute the build, move all files from the ‘dist’ folder created to the ‘app’ folder, remove the temporary folder, and expose port 8080.

To build the image:
docker build -t react-image .

The -t option specifies the name for the image, and the dot at the end indicates the location of the Dockerfile; in this case, the root folder.

.dockerignore is a configuration file that describes files and directories that you want to exclude when building a Docker image. E.g. /node_modules

Container

To create a container from the image run the command:
docker run -it -d --name react-container -p 8080:8080 -v react-volume:/app react-image

-d runs the container in the background, not display the running process on your terminal, this is called detached mode.
-it runs the container in interactive mode; allows you to interact with the container through the command line.
--name specifies a name for the container.
-p maps a host port to a container port.
-v mounts a host volume inside the container. In this example we create a volume named react-volume inside the /app folder.
react-image is the name of the image we created.

Nginx

Nginx is a open-source web server and reverse proxy server. It is used to serve a React application with Docker in a production environment.

To separate Dockerfile images, create a nginx folder with two files: a Dockerfile and nginx.conf

ningx.conf is a file to modify the default configuration of the nginx image. With these commands we specify to nginx listen on port 80 and when a client access the root (“/”) of the application, look in the root of the image container for the /app folder and then find the index.html

The Ningx Dockerfile will have two instructions:

From an Nginx image, remove the default.conf file, and copy the nginx.conf file to its place, in the same path.

To build the image:
docker build -t nginx-react

And run the container:
docker run -d -it --name nginx-react -p 80:80 --volumes-from react-container nginx-react

The only new command here is --volumes-from , which will make any volumes defined in the react-container available in the nginx container. Now, nginx-container have access to all files created after the build on the react-container.

Finally, the React project is running in a Docker container and can be accessed through the browser at localhost:80 or just locahost because 80 is the default port.

Docker Compose

Docker Compose is a tool for configuring and operating Docker applications that consist of multiple containers. By utilizing a YAML or YML file, you can set up the services required for your application. Then, with a single command, you create and start all the services from your configuration.

Create a docker-compose.yml file:

The docker-compose file have all instructions for the containers (app-dc ; nginx-dc) and it will create and start them with a single command:
docker compose up -d

Developers can achieve a smooth and scalable deployment by using Docker containers to encapsulate the application and its dependencies, along with the powerful web server provided by Nginx.

Thank you for reading.
If you liked this article shared it!
I appreciate your feedback.

An overview of Next Route Groups

Gabriel Penteado — Tue, 16 Jan 2024 19:20:27 +0000

Next Route Groups are a way to organize routes in the app directory without changing the URL paths. By enclosing a folder name in parentheses, you can create a Route Group that helps keep related routes together. This allows for better organization and management of routes within the app.

In this example, (admin-routes) (auth-routes) (client-routes)
are route groups. they are grouped together for better organization, without altering URL structure.

The URL path to the unauthorized page will be only /unauthorized .

Next Route Groups enables you to organize your content logically, create nested layouts, and maintain a clean URL structure.

Thank you for reading.
If you liked this article shared it!
I appreciate your feedback.

How to create a Dialog component with RadixUI and TailwindCSS

Gabriel Penteado — Wed, 10 Jan 2024 16:37:25 +0000

Why use RadixUI?

RadixUI is an open-source component library used to build friendly and accessible design systems and web applications. These components are unstyled and can be customized to user preferences.

RadixUI offers a wide range of UI components, including buttons, forms, modals, menus, tooltips, and more, focusing on simplicity, performance, and accessibility.

Getting started…

In this tutorial we are going to create a RadixUI modal dialog component which focus is automatically trapped, works in an uncontrolled way by default but can also be controlled . We are going to use TailwindCSS to style it.

You can use npm or yarn to install the package, here we use npm:

npm install @radix-ui/react-dialog

Import the Dialog component:

Let’s assume that TailwindCSS is already installed in the project.

Create a dialog modal as the code below:

< Dialog.Root> contains all the parts of a dialog.

< Dialog.Trigger > component is used to trigger the opening of the modal.

< Dialog.Portal > component portals your overlay and content parts into the body.

< Dialog.Close > component is used to close the modal.

< Dialog.Overlay > component creates a overlay behind the modal.

< Dialog.Title > an accessible title to be announced when the dialog is opened.

< Dialog.Content > contains content to be rendered in the open dialog.

The Dialog component created will look like this:

RadixUI simplifies the development process while ensuring accessibility and performance.

Thank you for reading.
If you liked this article shared it!
I appreciate your feedback.

Context API : Share state across components easily

Gabriel Penteado — Tue, 09 Jan 2024 17:57:00 +0000

In this post I will show you how React Context API is great to pass data that can be used in any component in your application.

What is Context API ?
First, with Vite, we created a TypeScript React application. In this example, we will share across all React applications, the state user and a function handleCreateUser to create a new user when a new data is received from the form.

Creating our context file userDataContext.tsx in the src folder src/context/userDataContext.tsx as below:

Import the createContext from “react”;
Define an interface for the user that will be created and an interface for the context.
Create context UserContext. In TypeScript we have to type the elements that we will be exporting in this context, in this case, the state user and a function to update this state handleCreateUser also is necessary to type the createContext method with the correspondent interface.
Next, create the Provider that will share the context elements with all application. Using the function UserProvider with one parameter children (children will be any child components that we want to share this context) and return this children wrapped by <UserContext.Provider>.
We pass the two context elements through an object in the Provider value prop just like that value={{user, handleCreateUser}} . In TypeScript we have to type these elements and also type the parameter element that the Provider is receiving, in this case, children as a JSX.Element.
Finally, export our Context and Provider.

In the main.tsx , we import the Provider and wrap our <App /> with it as the image below:

Now we have access to the context elements we created in our entire application!

Let’s use our context in the form.tsx component. To use it we have to import the context and the useContext hook from ‘react’.

The useContext hook take the UserContext as parameter and it is assign to a variable, in our exampleconst context = useContext(UserContext) . This variable now is a object with our context elements context.user and context.handleCreateUser . The destructuring assignment can be used too.

To create a new user we use the handleCreateUser function from the context and pass it to the onSubmit event (as we define in context, this function receive one parameter newuser). This way we create a new user and at same time we have access to the user created from any component in our application.

I hope this guide gave you a better understanding of how to use React context API.

Thank you for reading.
If you liked this article shared it!
I appreciate your feedback.

CSS Grid is a powerful tool to create layouts

Gabriel Penteado — Fri, 05 Jan 2024 18:31:52 +0000

In this post I will show you how you can make entire interfaces with a property of the CSS Grid.

CSS Grid Terminology

First let's take a look quickly about CSS Grid terminology.

Grid Container : The element on which grid is applied. The grid container is the parent of grid items.
Grid Item : All directly nested elements of a grid container.
Grid Cell : Every column in every row is a grid cell.CSS Grid can handle columns and rows, it is a 2-dimensional system.

The Grid container property

grid-template-areas: With this property we define the names of the grid areas and reference them with the grid-area property.

The Grid item property

grid-area: With this property you give a name to an item so that it can be referenced in the grid-template-areas template.

Creating a template.

In the body of the HTML file, we have a div element with class container. This is the parent element.
Inside of the container we created four children elements (header, section, aside and footer) each with class grid-item.

With the CSS file we set layout with Grid.
First, we define the div with class container as a grid container.
After, using the property grid-template-areas we make the grid template by referencing the names of each grid-area property.
Repeating the name of a grid-area causes the content to span those cells. A period (.) makes a empty grid cell. And none signifies no grid areas are defined.

This is a template with four columns and four rows.
The header spans all four columns in the first row.
The footer spans all four columns in the last row.
The main spans the first three columns in the second and third rows.
And the aside spans the last column of lines two and three.

We also define a gap: 5px; and the height: 100vh;
The result is shown in the figure below:

Its possible to change the size of each grid-item with the properties of the grid container: grid-template-columns and grid-template-rows.

The CSS grid is a powerful tool to create entire layouts in a simple and effective way.

Thank you for reading.
If you liked this article shared it!
I appreciate your feedback.