About me EN

I'm a Full Stack Developer with 4 years of experience in NEXTJS, MySQL, VTEX, and Docker, with Django as my primary technology. I've been specializing in creating editable websites with my own CMS, combining Django on the Backend with NEXTJS on the Frontend, thus creating incredible applications. Download my resume below and get to know me better!

About me

Blog EN

Blog

Certificates EN

Certificates

Orange

Green

Crimson

Blue

Purple

Contact Form EN

Contact Form

Send me a message so we can have a project briefing. Remembering that the delivery time is up to 20 days.

Shall we have a coffee?

Hero EN

Português

English

Español

日本語

Français

Italiano

Deutsch

中文

English version

Portfolio EN

Site institucional de psicologia com design clean e minimalista.

Juliana PSI

HTML

Javascript

E-commerce de instrumentos musicais criado com a Loja Integrada totalmente funcional

Som da terra

VTEX

Figma

Som da Terra

Um site institucional desenvolvido para um escritório de contabilidade.

GB Contabilidade

ReactJS

NEXTJS

Typescript

Tailwind CSS

NodeJS

Atendimento automatizado, respostas instantâneas e redução de custos com a Automatizando Negócios.

Automatizando negócios

Estação Espacial Internacional em tempo real com dados atualizados e visualização interativa.

Space Walk

ERP completo desenvolvido em Python para gestão empresarial integrada e eficiente.

Aurora ERP

Python

Django

Portfolio

Bright full moons, dazzling meteor shower displays and remarkable total \neclipses\n will give stargazers plenty of reasons to look to the sky in 2026.\nThe new year kicks off with the full wolf moon on Saturday, the first of three supermoons this year. Jupiter, the largest planet in our solar system, will appear south of the silvery orb, according to \nEarthSky.\n\nThe luminosity of the supermoon, which appears brighter and fuller than a regular full moon due to its proximity to Earth, may prevent visibility of the Quadrantid meteor shower.\nThe Quadrantids are expected to peak from 4 to 7 p.m. ET Saturday — right when the full moon is dominating the night sky.\nBut there are many more meteor showers and celestial events to look forward to in 2026, according to Robert Lunsford, fireball report coordinator for the \nAmerican Meteor Society\n.\nSupermoons and full moons\n\nMost years see 12 full moons with one occurring each month. But in 2026, there will be 13, with two in May.\nThe second full moon in a month is known as a blue moon — like the phrase “once in a blue moon.”\nTypically, full moons happen every 29 days, while most months in our calendar last 30 or 31 days, so the months and moon phases don’t exactly align — resulting in a blue moon about every 2 ½ years.\nAfter January’s supermoon, the next two supermoons will be in November and December. On average, the moon is about 238,900 miles (384,472 kilometers) from Earth. But December’s supermoon will be the closest of the year at 221,667 miles (356,740 kilometers) away, according to \nEarthSky\n.\nHere are the rest of the full moons in 2026, according to the \nFarmers’ Almanac\n:\nFebruary 1: Snow moon\nMarch 3: Worm moon\nApril 1: Pink moon\nMay 1: Flower moon\nMay 31: Blue moon\nJune 29: Strawberry moon\nJuly 29: Buck moon\nAugust 28: Sturgeon moon\nSeptember 26: Harvest moon\nOctober 26: Hunter’s moon\nNovember 24: Beaver moon\nDecember 23: Cold moonMeteor showers
\nMeteor showers\n\nAfter the peak of the Quadrantids in early January, sky-gazers will have to wait a bit until the Lyrid meteor shower in April.\nHere are the dates for the rest of the meteor showers peaking in 2026, according to the \nAmerican Meteor Society\n.\nLyrids: April 21-22\nEta Aquariids: May 5-6\nSouthern Delta Aquariids: July 30-31\nAlpha Capricornids: July 30-31\nPerseids: August 12-13\nOrionids: October 21-22\nSouthern Taurids: November 4-5\nNorthern Taurids: November 11-12\nLeonids: November 16-17\nGeminids: December 13-14\nUrsids: December 21-22\n“The Perseids and the Geminids will be the best showers of the year,” Lunsford said. “The Perseids are predicted to peak with no lunar interference.”\n
The Geminids produced a powerful shower in 2025 with hourly meteor rates as high as 135, Lunsford noted.\n“There is no reason why we could not expect similar rates in 2026 once the moon sets.”\nSolar eclipses\n\n
Sky-gazers can look forward to the dramatic appearances of two solar eclipses and two lunar eclipses this year, according to \nNASA\n.\nAn annular solar eclipse will occur on February 17 over Antarctica. The phenomenon happens each year when the moon is near or at the farthest point in its orbit from Earth as it passes between Earth and the sun. As a result, the moon can’t completely block the sun as it does during a \ntotal solar ecl\n\n\nipse\n, and instead the sun’s fiery light surrounds the moon’s shadow, creating a ring of fire effect. Meanwhile, a crescent-shaped partial solar eclipse will be visible in Antarctica, Africa and South America.\nBe sure to wear proper eclipse glasses to view solar eclipses safely as the sun’s light can be damaging to the eyes.\n
A total solar eclipse will be visible in Greenland, Iceland, Spain, Russia and part of Portugal on August 12. A partial eclipse will occur for those watching in Europe, Africa and North America.\nLunar eclipses\nA total lunar eclipse will appear in t\nhe night sky for those in Asia, Australia, the Pacific Islands and the Americas on March 3.\nA\n lunar eclipse\n can occur only during a full moon when the sun, Earth and moon align and the moon passes into Earth’s shadow. When this happens, Earth casts two shadows on the moon. The partial outer shadow is called the penumbra; the full, dark shadow is the umbra.\nWhen the full moon moves into Earth’s shadow, it darkens, but it doesn’t disappear. Instead, sunlight passing through Earth’s atmosphere lights the moon in a dramatic fashion, turning it red — which is why the event is often referred to as a “blood moon.”\n\nThis phenomenon happens because blue light undergoes stronger atmospheric scattering than red light, and as a result, red is the most dominant color as sunlight passes through our atmosphere and casts light on the moon. Depending on the weather conditions in your area, the moon may appear rusty or brick-colored red.\nA partial lunar eclipse will be visible for those in the Americas, Europe, Africa and Western Asia between August 27 to 28. Partial eclipses occur when the sun, Earth and moon don’t completely align, so only part of the moon passes into shadow.\nCheck \nTime and Date’s website\n to see the exact timing and locations for these eclipses.
\nPlanet parades and appearances\n\nFebruary will host a parade of six planets visible in the night sky.\nSaturn will be close to the horizon, while Venus and Mercury will appear to rise above the setting sun, according to \nEarthSky.\n Neptune will also appear next to Saturn, but the distant ice giant will only be visible through a telescope or binoculars.\n
Meanwhile, Uranus will be visible near the moon on February 23 — again, with the help of binoculars or a telescope. Luminous Jupiter will also be visible for sky-gazers looking east in the early evening. The moon and Jupiter will be close together on February 26.On May 19 after sunset, the crescent moon will gleam between Jupiter and Venus. Then, during the first week of June, Jupiter and Venus will appear side by side due to the positions of their orbits despite the planets not being close neighbors in space. In the early evenings of June 8 and 9, Venus and Jupiter will appear to swap spots in the night sky, creating the optical illusion of a double planet, according to EarthSky.\nJust over a week later, Venus will appear above the waxing crescent moon, and below it, Jupiter and Mercury will be visible.\nAnother celestial optical illusion that will delight sky-gazers is Jupiter’s disappearing act in the fall. In the early morning hours of October 6, the crescent moon and Jupiter will appear so close together that for those viewing in North America from east of St. Louis, the moon will seem to temporarily hide Jupiter for about an hour before it reappears on the other side.\nIn the predawn hours of November 16, the red glow of Mars will appear close to Jupiter in the eastern sky. And on the morning of December 4, the crescent moon will pair with bright Venus, while Jupiter and Mars will form another scintillating duo.


All the eclipses, supermoons, meteor showers and planets to spot in 2026

Introducing Aurora ERP: Streamlining Operations with Python and Modern Web Tech\nBuilt to simplify and automate my own music instrument business, Aurora ERP is the perfect example of how a custom-built solution can empower operations and open doors to exciting new tech opportunities.\n\n\n🚀 What is Aurora ERP?\nAurora ERP is a web-based enterprise resource planning system I developed to manage and optimize my company, \nSom da Terra\n, a music instrument store. It was built from scratch using \nDjango (Python)\n on the backend and \nTailwind CSS\n on the frontend for a clean and responsive UI.\nAurora is tailored to my business needs, yet modular and extendable — a reflection of both my engineering skills and my entrepreneurial mindset.\n🛠️ Tech Stack\nBackend\n: Django (Python)\nFrontend\n: HTML + TailwindCSS\nDatabase\n: PostgreSQL\nHosting\n: Self-hosted (Docker-ready)\nUI Features\n: Light/Dark mode, responsive layout\n🔧 Core Features\nProduct Management\n: Create categories, upload product images, manage stock\n\nUser Roles & Access Control\n: Admins, sellers, restricted staff — all with dedicated permissions\n\nBudget & Quote Generation\n: Generate sales budgets directly from the system\n\nMarketplace Integration\n: Ready for integration with major marketplaces (e.g. Mercado Livre)\n\nSales Dashboard\n: Home page with real-time operational chart (using Chart.js)\n\n🌗 User Experience Enhancements\nLight & Dark Mode Toggle\nResponsive UI\n using TailwindCSS for fluid mobile-to-desktop transitions\nClean, intuitive navigation\n designed for minimal training and high adoption\n📊 Live Dashboard at a Glance\nThe homepage provides an overview of operational metrics with a dynamic graph. Whether it's sales trends or product counts, Aurora keeps your performance front and center.\n💡 Why Build My Own ERP?\nAs the owner of a growing business, I needed a system that adapts to my workflow — not the other way around. No third-party platform offered the flexibility I needed. So I built one.\nAurora ERP is not just a tool — it's proof of my full-stack development skills, business analysis capability, and passion for automation.\n💼 A Note to Recruiters\nAurora ERP showcases my ability to:\nArchitect and implement scalable backend systems\nBuild intuitive and modern UIs\nIntegrate complex logic into a user-friendly experience\nCombine business acumen with software development\nWant to see the system in action? Let’s talk.\n📫 Contact me via \nLinkedIn \nor \nGitHub\n\nThanks for reading!

Introducing Aurora ERP: Streamlining Operations with Python and Modern Web Tech

Top 10 Visual Studio Code extensions that every programmer must have.\nAs coding becomes increasingly complex and demanding, having the right set of tools can make all the difference in productivity, efficiency, and code quality. From streamlining workflow tasks to enhancing code readability and debugging capabilities, these extensions have been handpicked to address the diverse needs of developers across different programming languages and disciplines. Whether you're a seasoned veteran or just starting your coding journey, these top 10 extensions are guaranteed to elevate your \nVisual Studio Code\n experience and empower you to \nwrite better code faster\n. Keep up as we explore the must-have extensions that will revolutionize the way you \nwork\n in Visual Studio Code and \nboost your productivity\n.\n\n1. Peacock\n\n\nPeacock \nextension is perfect for that project you are working on that requires multiple open tabs in Visual Studio Code. With Peacock, you can assign a distinct color to each tab, making it easy to identify and navigate through your various projects.\n\nOn your visual studio code:\nPress \nctrl + shift + p\n to open the command palette\nChoose \nPeacock: Change to a favorite color\nChoose one of the pre-defined colors and see how it changes your editor.\n\n\n2. Prettier\n\nWould't be easy if you could indent your code just by typing a short code or by saving it. You can do that with \nPrettier\n.\nPrettier is a lifesaver for developers seeking to maintain consistent and clean code formatting effortlessly. Gone are the days of manually adjusting indentation, line breaks, and spacing to conform to coding standards. \nWith Prettier seamlessly integrated into Visual Studio Code, formatting becomes a breeze, allowing developers to focus more on writing code rather than worrying about its presentation.\nAfter you install it. Go to your file and press \nctrl + shift + p\n  or \ncommand + shift + p\n for macOS, search for \nformat\n and then choose Format Document.\nVisual Studio Code must throw an pop up requiring you to configure a default formatter. Click on Configure button.\n\nChoose Prettier option.\n\nIt's also possible to automatize this process and format your code on save. On your Visual Studio Code press \nctrl + ,\n or \ncommand + ,\n for macOS, search for Editor: Format on Save and enable the first option you find.\n\n\n3. Turbo Console Log\n\nThroughout the web development process, it's often crucial to check the contents of variables, and JavaScript's \nconsole.log\n function is our go-to tool for this task. \nBut what if there were a way to automate this process? That's precisely the issue this extension addresses. By simply pressing \nCtrl + Alt + L\n (or \nCommand + Alt + L\n for macOS), it generates a \nconsole.log\n statement for us, complete with the file name and the variable's line number.\n\n\n4. Auto Rename Tag\n\nThis \nextension\n greatly simplifies the process of renaming our tags in Visual Studio Code. Instead of manually retyping both the opening and closing tags, this extension streamlines the task by automatically updating both occurrences simultaneously with just a few keystrokes.\n\n\n5. Git Graph\n\nMany people may not be familiar with Git commands in the terminal. That's where \nGit Graph\n comes in handy. It provides a comprehensive UI that allows users to visually navigate through the versions of their code. \nWith Git Graph, users can easily understand the branching and merging of their Git repository, making version control more accessible and intuitive for all levels of expertise.\n\nThe code above has two branches, master and dev. The most common way to navigate between them is by running the \ngit checkout <branch name>\n command.\nInstead, let's use Git Graph.\n\nIt's all possible to check file changes and revent them.\n\n\n6. Indent Rainbow\n\nThe \nIndent Rainbow\n extension for Visual Studio Code introduces a unique and intuitive way to enhance code readability by visualizing the indentation structure. While traditional code editors rely solely on indentation characters (such as spaces or tabs) to denote code structure, Code Indent Color takes it a step further by assigning distinct colors to each indentation level. \nThis innovative approach provides developers with a visual representation of their code's hierarchy, making it easier to comprehend and navigate complex codebases. By instantly highlighting different levels of indentation with vibrant colors, Code Indent Color allows developers to quickly grasp the code's structure and identify nested blocks, loops, and functions.\nExtension on:\nExtension off:\n\n\n\n\n\n7. Better Comments \n\nComments are essential for maintaining the logic of our code and aiding in its scalability. They serve as valuable annotations that provide insights into the functionality, purpose, and reasoning behind specific code segments.\n\n\nextension\n our comments become way more visually efficient where we have different colors for question, alerts and highlights.\n\n\n8. TabNine\n\nThe \nTabNine\n extension for Visual Studio Code is a powerful tool designed to revolutionize the coding experience by leveraging machine learning technology. Unlike traditional code completion plugins, TabNine goes beyond basic suggestions, providing intelligent and context-aware completions that anticipate the developer's needs.\n\nBy analyzing the code context, TabNine offers highly accurate suggestions, saving valuable time and reducing cognitive load during the coding process. Whether it's completing variable names, suggesting entire lines of code, or offering relevant function calls, TabNine adapts to the developer's coding style and preferences, enhancing productivity and efficiency.\n\n9. CodeSnap\n\nHave you ever needed to take a screenshot of your code? With CodeSnap, developers can quickly capture and annotate sections of their code directly within the editor, creating visually appealing snapshots that convey the essence of their implementation. \nWhether it's highlighting a specific algorithm, showcasing a particular design pattern, or illustrating a complex functionality, CodeSnap simplifies the process of documenting and sharing code snippets with colleagues, clients, or the broader developer community.\n\nOutput:\n\n\n10. Live Server\n\nThe Live Server extension for Visual Studio Code is a game-changer for web developers seeking real-time feedback on their projects. With Live Server, developers can instantly spin up a local development server and view their web pages live in the browser. Gone are the days of manually refreshing the browser to see changes or worrying about setting up complex server configurations. \nLive Server handles all the heavy lifting, allowing developers to focus on coding without interruption. Whether it's HTML, CSS, JavaScript, or any other web technology, Live Server provides a seamless development experience, enabling developers to see their changes immediately reflected in the browser as they type.\n\n\nConclusion\nIn summary, these top 10 Visual Studio Code extensions revolutionize coding by simplifying tasks like formatting, version control, and code visualization. From Prettier's effortless code formatting to Git Graph's intuitive version control interface, each extension addresses common developer pain points. Moreover, with enhancements like Peacock's color-coded tabs and Indent Rainbow's visual indentation, coding becomes both efficient and visually appealing. By incorporating these extensions into your workflow, you can boost productivity and streamline your coding experience. Explore them today and witness the transformation in your coding journey.\n

Top 10 Visual Studio Code extensions that every programmer must have

How to Integrate Django with React: Building a Planet Catalog App\nRepository 📖: \nLink\n\nIn this tutorial, we will walk through the process of integrating \nDjango\n, a high-level \nPython \nweb framework, with \nReact\n, a popular \nJavaScript \nlibrary for building user interfaces. Our goal is to create a simple \nDjango REST API\n that serves planet names and then build a React application to display these planets on the screen. By following this guide, you'll learn how to leverage the power of Django for \nbackend development\n and React for \nfrontend development\n to create a seamless \nfull-stack application\n.\nIn our Visual Studio Code, let's create a folder called Solar System App and develop our code inside of it.\n\nIn our project, we'll divide it into two parts. In the first one, we'll handle the Django backend, while in the second one, we'll create our frontend with ReactJS. For this, we should create a folder in our directory for each of the parts.\n\n\nPart 1: Creating a Django REST API\n1.1. Setting up a Django project:\nFirst of all, you need to make sure that you have Python installed on your machine. If you don't, follow this \ntutorial \nand install the language on your computer.\nWe should open our integrated terminal where we'll input our commands. We can do this by typing the shortcut \nctrl + shift + '\n  or by going to the top menu bar of our VS Code and selecting \nterminal\n > \nNew Terminal\n:\nEnter the backend directory by typing \ncd backend\n in the terminal, and then run the following command to install the Django library:\npip install django\nWe will also need the following libraries:\npip install djangorestframework django-cors-headers\nTo create the boilerplate of our Django application, we should run the following command:\ndjango-admin startproject setup .\nThis way, we'll be ready to test our application on our localhost by running the following code:\nWindows:\npython manage.py runserver\nMac or Linux:\npython3 manage.py runserver\nAnd voilà, by accessing the \nlink\n, we'll have our application up and running.\n\n\n\n1.2. Defining a Planet app and model:\nTime to create our application for our planets along with its model. \nIn Django, applications are like modular building blocks, each with a specific function within the project. They promote code reusability, facilitate maintenance, and enable project scalability. By dividing the application into independent and interconnected parts, applications simplify development and promote collaboration among developers.\nRun the following command:\npython manage.py startapp planets\nSo far, this is how the structure of our project should look like:\n\nWe should also create a model for our planets. In Django, \nmodels\n are like forms for our application. They tell us what type of information our application will store and how this information is organized.\nIt's like a table where we jot down all the important things about our data, like name, age, etc. This helps us organize and access our information easily and efficiently.\nGo to \nbackend/planets/models.py \nand paste the following code on the file\n:\nfrom django.db import models

class Planets(models.Model):
    name = models.CharField(max_length=255, default=False)
\nWe should add our newly created app to the list of applications in our \nsetup\n. We can do this by going to \nsetup/settings.py\n and adding the name of our app to the array called \nINSTALLED_APPS\n.\nWe also need to add the libraries we downloaded to our project to our file.\nYour file should look like this.\nINSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'planets',
    'rest_framework',
    'corsheaders',
]\n\nWe must also add three extra rows on settings.py\nMIDDLEWARE = [
    # ...
    # 👇 Add this line here
    'corsheaders.middleware.CorsMiddleware',
    # Add above line just before this line 👇
    'django.middleware.common.CommonMiddleware',
]

# 👇 Add this line here
CORS_ORIGIN_ALLOW_ALL = True\n\n1.3. Populating the database: \nNow that we have our application and model created, we can populate our database with our planets. But before that, we need to migrate our newly created model.\nIn Django, \nmigrations\n are like instructions for the database. When we change the structure of our models (for example, by adding a new field), we need to inform the database about these changes. Migrations are these instructions that make the necessary changes in the database to reflect the changes in our models.\nIt's like a to-do list to ensure that the database is always up-to-date with our application. We can do this by running the following commands:\nWindows:\npython manage.py makemigrations\npython manage.py migrate\n\nMac or Linux:\npython3 manage.py makemigrations\npython3 manage.py migrate\nThough there are more orthodox ways to add items to the database, let's choose the best one: through the \nDjango admin dashboard\n.\nIn Django, the admin dashboard is like a control room for your website. It's an area where you can manage all the data of your application easily and quickly, without needing to directly touch the database or the code.\nIt's like a control panel that allows you to add, edit, or delete data from your site, such as users, blog posts, or any other information your application manages. It's a powerful tool for site administrators, making the management and maintenance of the application easier.\nWe should create a user to access the dashboard. We can do this by running the following command:\npython manage.py createsuperuser\nAfter filling in the required information through the terminal, we can log into our panel through the \nlink\n:\n\nNotice that after logging in with the information we just entered, we can't find our \nPlanet \nmodel. To fix this, we should paste the following snippet of code into\n backend/planets/admin.py:\nfrom django.contrib import admin
from planets.models import Planet

@admin.register(Planet)
class PlanetAdmin(admin.ModelAdmin):
    
    list_display = [
        "name"
    ]  
    
    search_fields = [
        "name"
    ]\n\nAfter this, we should be able to add our planets to the database in a much simpler and faster way!\n\n\n1.4. Creating a REST API:\nBefore we create our frontend, it's necessary to prepare our API routes to be consumed. We should perform the following tasks for this.\nCreate a serializer.\nDefine a view to our planets.\nDefine a api route.\n1.4.1. Planet Serializer Class\nIn Django, a \nserializer class\n is responsible for converting complex objects, such as database models or other types of data, into simpler and more accessible formats, such as JSON. It allows data to be easily transmitted over the network or stored in a structured way.\nIt's like a translator that converts information into a language that computers and other systems can easily understand and manipulate. Serializer classes are useful in RESTful APIs, where we need to send or receive data efficiently and in a standardized manner.\nWithin the planets app directory, create a file named \nserializers.py\n and paste the following code into it:\nfrom django.contrib.auth.models import User
from rest_framework import serializers
from .models import Planet


class PlanetSerializer(serializers.ModelSerializer):
    class Meta:
        model = Planet
        fields = ["id", "name"]\n\n1.4.2. Planet View Class\nIn Django, a \nview class\n is like a set of instructions that determines how a web page will be displayed. It defines the logic behind rendering a page, handling user requests, and returning an appropriate response.\nIt's like the brain behind the interface of your web application, deciding what to show to the user based on the received requests. View classes are often used to control user interaction with the application, processing data, performing operations, and sending dynamic responses.\nInside \nbackend/planets/views.py \npaste the following code:\nfrom django.shortcuts import render
from rest_framework import generics

from planets.models import Planet
from planets.serializers import PlanetSerializer

class PlanetsListCreate(generics.ListCreateAPIView):
    serializer_class = PlanetSerializer
    queryset = Planet.objects.all()
\nNote that we're importing our serializer and using it to convert the rows coming from the database into a JSON object.\n\n1.4.3. Api URL\nFinally, it's time to create the URL for the API that will be consumed by the frontend. Go to \nbackend/setup/urls.py \nand add the following snippet to your \nurlspatterns\n:\npath('api/planets/', views.PlanetsListCreate.as_view(), name='planets'),\nYour final code should look like this:\nfrom django.contrib import admin
from django.urls import path
from planets import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/planets/', views.PlanetsListCreate.as_view(), name='planets'),
]
\n\n1.5. Testing the API:\nDjango REST Framework (DRF) is a powerful library that extends Django's capabilities to facilitate the creation of RESTful APIs. It provides additional tools and resources for developing APIs quickly and consistently, including serializers, authentication, permissions, and class-based views. DRF simplifies the implementation of CRUD operations (Create, Read, Update, Delete) and provides a flexible framework for developing robust and scalable APIs in Django.\nIt's like a complete toolbox for building modern and efficient web APIs with Django.\nBy accessing the following \nlink\n, we can see our added planets.\n\n\nPart 2: Building a React + Vite App\nLet's move to our frontend directory to create our ReactJS app. We first need to run the following commands on the backend terminal.\ncd ../\ncd frontend\n\n2.1. Setting up a React project with Vite:\nLet's move to our frontend directory to create our ReactJS app. We first need to run the following commands on the backend terminal.\nFor creating our app, let's choose a different approach from the most common, let's use vite. Vite.js is a build tool that is designed to be fast and lightweight. It uses native ES modules and a native development server to provide a fast and seamless development experience. Vite.js also supports code splitting and hot reloading.\nLet's run the command:\nnpm create vite@latest .\n\nChoose React as framework\n\nLet's also choose Javascript instead of TypeScript so we can keep things simple.\nFinally we must run these commands:\nnpm install\nnpm run dev\nAnd open our browser on this \nlink\n and then we have our running React app.\n\n\n2.2. Creating our table component\nWithin the \nfrontend/src\n folder let's create our table component. ReactJS apps don't have a component folder by default so don't forget to create it.\nYour frontend structure will look like this:\n\nBefore actually creating our component, let's add the tailwind CDN to our frontend/index.html file, thus we will have an highly customized app without really getting into CSS on this article.\nTailwind CDN:\n<script src="https://cdn.tailwindcss.com"></script>\nYour index.html will look like this:\n<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>

    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
\nBack to our table.jsx file, paste this snippet of code into it:\nimport { useState } from "react"

const Table = () => {
    const [planets, setPlanets] = useState([])

    return (
        <div className="flex flex-col w-[400px] absolute top-1/2 left-1/2 transform translate-x-[-50%] translate-y-[-50%]">
            <div className="overflow-x-auto sm:mx-0.5 lg:mx-0.5">
                <div className="py-2 inline-block min-w-full sm:px-6 lg:px-8">
                    <div className="overflow-hidden">
                        <table className="min-w-full border">
                            <thead className="bg-white border-b">
                                <tr>
                                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                                        #
                                    </th>
                                    <th scope="col" className="text-sm font-medium text-gray-900 px-6 py-4 text-right">
                                        Planet
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    planets.map((item)=> (
                                    <tr key={item.id} className="bg-gray-100 border-b [&:nth-child(even)]:bg-white">
                                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{item.id}</td>
                                        <td className="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap text-right">
                                            {item.name}🪐
                                        </td>
                                    </tr>
                                    ))
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Table\nSo far, your app must look like this:\n\n\nNotice the table is empty since we are not fetching any data yet.\n\n2.3. Fetching planets from Django\nWith our backend Django app running on port 8000. (don't forget to run \npython manage.py runserver\n on backend terminal), we are good to get data from our database through an api function we will build now.\nIn order to request data, we must install a lib called \naxios \nwhich will do the hard work for us. Run the following command on frontend terminal:\nnpm install axios\nOur api function will be placed on the utils folder within \nfrontend/src, \nafter creating this directory, paste the following code on the \napi.js\n file:\nimport axios from 'axios';

export async function api() {
    let url = `http://127.0.0.1:8000/api/planets/`;
    const res = await axios.get(url);
    return res.data;
}\n\nWe will run this function on our table.jsx inside of a useEffect and store its value on our useState. Don't forget to import these hooks.\nimport { useEffect, useState } from "react"
import { api } from "../utils/api"


const Table = () => {
    ...
    useEffect(()=>{
        const getPlanets = async () => {
            let results = await api() 
            setPlanets(results)
        }
        getPlanets()
    }, [])
    ...\n\nBy saving our file, the planets will be rendered as a magic trick on the screen.\n\n\nConclusion:\nBy following this step-by-step guide, you've learned how to integrate Django with React to build a full-stack web application. You've created a Django REST API to serve planet data and built a React frontend to display this data to users. This tutorial demonstrates the power of combining Django's robust backend capabilities with React's flexible frontend framework. Experiment with additional features and functionalities to further enhance your application!

How to integrate Django with ReactJS

Artificial intelligence (AI) is evolving rapidly and we are increasingly witnessing the emergence of new and powerful artificial intelligences in various areas. These emerging AIs are driving significant advances across industries, from healthcare to industrial automation. In this post, we will explore some of the most promising artificial intelligence emerging today, highlighting their capabilities and potential applications.\n\n1. GPT-4: A Linguistic Mind\nGPT-4 (Generative Pre-trained Transformer 4) stands as the latest advancement in artificial intelligence brought forth by OpenAI. Much like its predecessor, GPT-3, it boasts the remarkable capability to generate high-quality text, ranging from answers to inquiries to composing entire narratives. With an extensive array of parameters trained on diverse datasets, GPT-4 showcases immense potential in enhancing chatbots, streamlining research processes, and even aiding in content creation. As AI continues to evolve, GPT-4 emerges as a formidable tool poised to revolutionize various facets of human interaction and creativity.\n\n\n\n2. AlphaFold: Unraveling the Structure of Proteins\nDeveloped by DeepMind, AlphaFold AI is revolutionizing bioinformatics by accurately predicting the three-dimensional structure of proteins. This is essential for understanding diseases, developing medicines and designing enzymes for industrial applications. AlphaFold could significantly accelerate research in structural biology and open up new possibilities in the field of personalized medicine.\n\n\n\n3. Waymo: Autonomous Driving\nWaymo, an Alphabet company, has excelled in developing autonomous driving technologies. Its advanced AI allows vehicles to identify, understand and react to the environment around them, making driving safer and more efficient. Waymo has been testing autonomous vehicles on public roads and is shaping the future of mobility.\n\n\n\n4. OpenAI Codex: Natural Language Programming\nOpenAI Codex is an AI that can interpret and generate code in multiple programming languages. Based on GPT-3, Codex has the potential to help programmers and developers by offering code suggestions, creating simple programs, and even helping with debugging errors. This AI has the power to make programming more accessible and efficient.\n\n\n\n5. IBM Watson: Cognitive Intelligence\nIBM Watson is one of the best-known artificial intelligences and has been applied in a variety of areas, from healthcare to financial services. With its ability to process large volumes of data, understand natural language, and provide actionable insights, Watson is powering data-driven decision-making and the automation of complex tasks.\n\n\nAs artificial intelligence continues to develop, powerful new AI is emerging, bringing with it a range of applications and benefits for diverse industries. GPT-3, AlphaFold, Waymo, OpenAI Codex, and IBM Watson are just a few of the impressive AIs that are shaping the future and paving the way for a technologically advanced world.\n\n\n\n

Emerging Artificial Intelligence: Advances and Promising Applications

Services EN

I will look for the ideal solution for your business, with detailed and modern designs

Paint

Web designer

Web designing

I’ll leverage my expertise to bring your project to life with tailored solutions and innovative design.

Code

Website Creation

Landing pages

I create custom web systems with modern design and efficient functionality tailored to your business needs.