henriquemarcelo / github-blog Goto Github PK

Ignite Feed - Um projeto de aprendizado em React e Typescript

O projeto Ignite Feed é um aplicativo web que simula a interface gráfica de um feed de uma rede social. Ele foi criado no curso "Ignite" da Rocketseat com o propósito de ensinar conceitos avançados de React, Typescript e manipulação de datas.

O aplicativo é uma excelente oportunidade para os desenvolvedores que desejam aprimorar suas habilidades em programação front-end. O projeto apresenta conceitos fundamentais e práticos que podem ser aplicados em muitos outros projetos.

O Ignite Feed é um exemplo de como é possível aplicar as técnicas de React e Typescript para criar uma interface de usuário dinâmica e responsiva. Ele também demonstra como é possível manipular datas de forma eficiente para criar uma aplicação que simule um feed de uma rede social.

O código fonte do Ignite Feed está disponível no Github em https://github.com/HenriqueMarcelo/ignite-feed. Para quem deseja testar o aplicativo em funcionamento, ele está disponível em https://henriquemarcelo.github.io/ignite-feed/.

Conclusão
O Ignite Feed é um projeto interessante para os desenvolvedores que desejam aprender mais sobre React, Typescript e manipulação de datas. Ele é um ótimo exemplo de como é possível aplicar essas tecnologias para criar uma interface de usuário moderna e responsiva. Se você está buscando um projeto para aprimorar suas habilidades em front-end, o Ignite Feed é uma ótima escolha.

I'm so excited to share with you the release of my latest app, Rocket Gym! Developed as part of RocketSeat's React Native Ignite course, this project was an amazing opportunity to hone my skills and learn new concepts for mobile app development.

Rocket Gym is an app aimed at fitness enthusiasts and exercise lovers. With an intuitive and modern interface, the app offers a variety of features designed to help users achieve their fitness goals. With features such as login and registration, list of exercises by muscle group and history of completed activities, Rocket Gym is the perfect companion to follow and boost your fitness journey.

During development, I used a combination of cutting-edge technologies and libraries, including Expo, TypeScript, NativeBase, React Hook Form, Yup, Axios, React Navigation, and ESLint. These tools allowed me to create an amazing user experience while ensuring the security and efficiency of the application.

I'm really proud of Rocket Gym's end result and I hope it inspires and motivates others to adopt a healthier lifestyle. I invite you to try Rocket Gym and join me on this fitness journey. Download the app right now at [download link] and start turning your workouts into true rockets to success!

#RocketGym #Fitness #ExerciciosFisicos #Ignite #ReactNative #DesenvolvimentoMobile

Descubra o poder de gerenciamento de tempo com o Ignite Timer

O Ignite Timer é um projeto criado dentro do curso Ignite da Rocketseat e tem como objetivo auxiliar no gerenciamento de tempo com a técnica Pomodoro. Se você não conhece a técnica, ela consiste em um método de gerenciamento de tempo desenvolvido no final da década de 1980 pelo italiano Francesco Cirillo. O método consiste em dividir o trabalho em períodos de 25 minutos, separados por breves intervalos. Esses períodos são chamados de "pomodoros" e, após cada pomodoro, é feita uma pausa de 5 minutos.

O Ignite Timer é uma ferramenta simples, porém eficiente, que permite definir o tempo de trabalho e intervalo, e realiza a contagem regressiva. Além disso, o aplicativo armazena um histórico dos timers realizados, permitindo que você avalie a sua produtividade ao longo do tempo.

O projeto foi desenvolvido com React, Typescript e outras bibliotecas como DateFNS, Immer, React Hook Form e ZOD. O uso dessas bibliotecas permite uma fácil manipulação de datas, gerenciamento de estado e validação de formulários. Além disso, o aplicativo utiliza o Local Storage do navegador para armazenar os dados do histórico, tornando a experiência do usuário ainda mais satisfatória.

O Ignite Timer é uma excelente ferramenta para quem busca gerenciar melhor o seu tempo e aumentar a produtividade. O projeto está disponível em: https://github.com/HenriqueMarcelo/ignite-timer e pode ser acessado em funcionamento em: https://henriquemarcelo.github.io/ignite-timer/.

Util: a simple application to make your daily life easier

If you have ever been faced with the need to make a rule of three, transform a date into a timestamp or a timestamp into a date, you know how boring and time consuming these tasks can be. With this in mind, we developed "Util", a simple and easy-to-use web application.

With "Util", you can quickly and easily make a rule of three. Just enter the ratio and the known value, and the application does the rest for you. Also, you can turn a date into a timestamp and vice versa with just a few clicks.

Util" is a free application and does not require any installation. Just go to the website and start using it immediately. It has been developed with the highest quality, ensuring accuracy and reliability in all calculations.

The application is extremely useful for students, professionals, and anyone who needs to do everyday calculations. With "Util" you save time and effort and can concentrate on other more important activities.

So don't waste any more time doing calculations manually. Access "Util" now and try out all its features for yourself. The source code of the project is available on Github for anyone who wants to contribute and help make the application even better.

Discover how to manage your daily tasks with the "To Do List" web application

Managing tasks can be a daunting task, but with the help of the "To Do List" web app, you can easily organize yourself. "To Do List" is a project created during Rocketseat's "Ignite" course, and aims to teach the basics of React, Typescript and form manipulation.

With "To Do List" you can easily create, edit and remove tasks. In addition, it displays the total number of tasks as well as the number of completed tasks. This helps you to have an overview of your tasks and to focus on the most important ones.

One of the main features of "To Do List" is its simplicity and ease of use. Its intuitive interface makes task management an easy and hassle-free task. It is a great application for anyone who wants to stay organized and productive.

You can try out "To Do List" by accessing it at https://henriquemarcelo.github.io/to-do-list/. The source code is available at https://github.com/HenriqueMarcelo/to-do-list if you want to study or contribute to the project.

Try "To Do List" and start managing your daily tasks in an easy and efficient way!

Estou muito animado em compartilhar com vocês o lançamento da minha mais recente aplicação, o Rocket Gym! Desenvolvido como parte do curso Ignite de React Native da RocketSeat, esse projeto foi uma oportunidade incrível para aprimorar minhas habilidades e aprender novos conceitos para o desenvolvimento de aplicativos móveis.

O Rocket Gym é um aplicativo voltado para entusiastas de fitness e amantes de exercícios físicos. Com uma interface intuitiva e moderna, o aplicativo oferece uma variedade de recursos projetados para ajudar os usuários a alcançar seus objetivos de condicionamento físico. Com funcionalidades como login e cadastro, lista de exercícios por grupo muscular e histórico de atividades concluídas, o Rocket Gym é o companheiro perfeito para acompanhar e impulsionar sua jornada fitness.

Durante o desenvolvimento, utilizei uma combinação de tecnologias e bibliotecas de ponta, incluindo Expo, TypeScript, NativeBase, React Hook Form, Yup, Axios, React Navigation e ESLint. Essas ferramentas me permitiram criar uma experiência de usuário incrível, garantindo a segurança e a eficiência do aplicativo.

Estou realmente orgulhoso do resultado final do Rocket Gym e espero que ele inspire e motive outras pessoas a adotarem um estilo de vida mais saudável. Convido vocês a experimentarem o Rocket Gym e se juntarem a mim nessa jornada de fitness. Baixe agora mesmo o aplicativo em [link para download] e comece a transformar seus treinos em verdadeiros foguetes para o sucesso!

#RocketGym #Fitness #ExerciciosFisicos #Ignite #ReactNative #DesenvolvimentoMobile

Coffee Delivery is a project developed by me as a challenge within Rocketseat's Ignite course. It is a web application that simulates the front-end of an online coffee shop, allowing the user to choose products and fill in their details to place an order.

The project was developed using React and other libraries such as Phosphor React, React Hook Form and Styled Components. The use of these technologies allows a modern and interactive interface, as well as a more fluid and pleasant experience for the user.

With Coffee Delivery, it is possible to visualize all available products, choose the desired quantity of each one, and perform the checkout by filling in the delivery and payment information. After finalizing the purchase, the user is redirected to a confirmation page.

Besides being an interesting challenge for those who are learning to program in React, Coffee Delivery can also be an inspiration for those who are thinking of creating an online coffee shop. With the source code available on GitHub, it is possible to study the structure of the application and adapt it to different needs.

If you are looking for a fun and challenging project to improve your React skills, or if you are thinking about creating an online coffee shop, Coffee Delivery is a great option for inspiration and learning.

Descubra como gerenciar suas tarefas diárias com o aplicativo web "To Do List"

Gerenciar tarefas pode ser uma tarefa árdua, mas com a ajuda do aplicativo web "To Do List", você pode se organizar facilmente. O "To Do List" é um projeto criado durante o curso "Ignite" da Rocketseat, e tem como objetivo ensinar os conceitos básicos do React, Typescript e manipulação de formulários.

Com o "To Do List", você pode facilmente criar, editar e remover tarefas. Além disso, ele exibe o número total de tarefas, bem como o número de tarefas concluídas. Isso ajuda você a ter uma visão geral de suas tarefas e se concentrar nas mais importantes.

Uma das principais características do "To Do List" é a sua simplicidade e facilidade de uso. Sua interface intuitiva torna o gerenciamento de tarefas uma tarefa fácil e sem complicações. É um ótimo aplicativo para quem deseja manter-se organizado e produtivo.

Você pode experimentar o "To Do List" acessando-o em https://henriquemarcelo.github.io/to-do-list/. O código fonte está disponível em https://github.com/HenriqueMarcelo/to-do-list, caso você queira estudar ou contribuir para o projeto.

Experimente o "To Do List" e comece a gerenciar suas tarefas diárias de maneira fácil e eficiente!

Olá, pessoal! Hoje gostaria de compartilhar com vocês um projeto muito interessante que desenvolvi durante o curso Ignite da Rocketseat: o Github Blog.

O Github Blog é uma aplicação web que permite que desenvolvedores criem e publiquem posts diretamente em seu repositório Github, como uma "issue" neste mesmo repositório. O aplicativo foi desenvolvido com a ideia de tornar a criação e publicação de conteúdo mais simples e acessível, possibilitando que desenvolvedores possam compartilhar suas ideias e projetos com a comunidade de maneira fácil e intuitiva.

Com o Github Blog, os usuários podem criar, editar e publicar posts em questão de minutos. Além disso, a aplicação utiliza a API do Github para buscar informações sobre os repositórios do usuário e exibi-los em seu perfil.

O Github Blog é uma ferramenta extremamente útil para desenvolvedores que desejam criar conteúdo e compartilhar suas ideias com a comunidade. O aplicativo é totalmente open source e está disponível no Github para quem desejar contribuir com o projeto.

Gostaria de convidar todos a conhecerem o Github Blog em https://henriquemarcelo.github.io/github-blog/ e a se juntarem a nós nesta iniciativa de tornar a criação e publicação de conteúdo mais acessível e democrática.

#githubblog #rocketseat #webdev #github #programação #desenvolvedor #dev #tecnologia #nextjs #react #typescript #opensource

O DT Money é um projeto desenvolvido durante o curso "Ignite" da Rocketseat, e tem como objetivo ser um gerenciador de finanças pessoais. Com ele, é possível cadastrar tanto entradas quanto saídas de dinheiro, e a partir dessas informações o aplicativo mostra o somatório de entradas e saídas, além do total geral.

Uma das grandes vantagens do DT Money é a possibilidade de exibir todas as transações em uma listagem que pode ser facilmente filtrada através de um campo de busca. Ao cadastrar uma transação, o usuário informa uma descrição, o valor, a categoria e se é uma entrada ou saída. As informações salvas são enviadas para um backend através de uma REST API.

Durante o desenvolvimento do projeto, foram utilizados diversos conceitos e tecnologias fundamentais para o desenvolvimento de aplicações web modernas. Foram explorados conceitos como components estilizados, useContext, acesso a API REST, formulários, validações, formatações com INTL, Typescript e muito mais. Além disso, foram utilizadas bibliotecas como Axios, React Hook Form, ZOD, Radix, Styled Components, eslint e json server.

O DT Money é uma aplicação moderna e funcional, que pode ser utilizada por qualquer pessoa que deseja controlar suas finanças pessoais de forma simples e prática. É uma ótima opção tanto para quem está começando a se organizar financeiramente quanto para quem já tem mais experiência nesse assunto.

Util: um aplicativo simples para facilitar o seu dia-a-dia

Se você já se deparou com a necessidade de fazer uma regra de três, transformar uma data em timestamp ou um timestamp em data, sabe o quanto essas tarefas podem ser chatas e demoradas. Foi pensando nisso que desenvolvemos o "Util", um aplicativo web simples e fácil de usar.

Com o "Util", você pode fazer uma regra de três de maneira rápida e fácil. Basta informar os valores da proporção e do valor conhecido, e o aplicativo faz o resto por você. Além disso, você pode transformar uma data em timestamp e vice-versa com apenas alguns cliques.

O "Util" é um aplicativo gratuito e não requer nenhum tipo de instalação. Basta acessar o site e começar a usá-lo imediatamente. Ele foi desenvolvido com a mais alta qualidade, garantindo precisão e confiabilidade em todos os cálculos.

O aplicativo é extremamente útil para estudantes, profissionais e qualquer pessoa que precise fazer cálculos do dia-a-dia. Com o "Util", você economiza tempo e esforço, e pode se concentrar em outras atividades mais importantes.

Então, não perca mais tempo fazendo cálculos manualmente. Acesse agora mesmo o "Util" e experimente você mesmo todas as suas funcionalidades. O código fonte do projeto está disponível no Github para quem quiser contribuir e ajudar a tornar o aplicativo ainda melhor.

Today I would like to share with you a very interesting project I have recently developed: Vocab++.

Vocab++ is a web application that aims to help language students expand their vocabulary in a more efficient and practical way. The application is very simple to use: the user pastes a text and Vocab++ creates a list with the words used in that text, showing how many times each one of them was used.

The great advantage of Vocab++ is the possibility to mark words that the user already knows the meaning of. Thus, the next time the user uses the application, the words he already knows will not be shown in the list, making it easier to identify the words that still need to be learned.

Vocab++ was developed with the VueJS framework and is hosted at http://kursi.com.br/vocab-plus-plus/. The deployment of the application is done automatically through a Github Action, which ensures greater agility and security for the user.

Vocab++ is an extremely useful tool for language students who want to expand their vocabulary in a more efficient and practical way. The application is completely open source and is available on Github for those who wish to contribute to the project.

I would like to invite everyone to get to know Vocab++ at http://kursi.com.br/vocab-plus-plus/ and try this tool that will revolutionize the way you study languages.

#vocab++ #languages #vuejs #technology #development #open-source #github #programming #students

Discover the power of time management with Ignite Timer

The Ignite Timer is a project created within Rocketseat's Ignite course and aims to help you manage your time with the Pomodoro technique. If you are not familiar with the technique, it consists of a time management method developed in the late 1980s by the Italian Francesco Cirillo. The method consists of dividing your work into 25-minute periods, separated by short breaks. These periods are called "pomodoros", and after each pomodoro there is a 5-minute break.

Ignite Timer is a simple but efficient tool that allows you to set the time to work and break, and count down. In addition, the app stores a history of timers performed, allowing you to evaluate your productivity over time.

The project was developed with React, Typescript and other libraries such as DateFNS, Immer, React Hook Form and ZOD. The use of these libraries allows easy date manipulation, state management and form validation. In addition, the application uses the browser's Local Storage to store the history data, making the user experience even more satisfying.

Ignite Timer is an excellent tool for anyone looking to better manage their time and increase productivity. The project is available at: https://github.com/HenriqueMarcelo/ignite-timer and can be accessed in operation at: https://henriquemarcelo.github.io/ignite-timer/.

O Coffee Delivery é um projeto desenvolvido por mim como desafio dentro do curso Ignite da Rocketseat. É uma aplicação web que simula o front-end de uma loja virtual de cafés, permitindo que o usuário escolha produtos e preencha seus dados para realizar um pedido.

O projeto foi desenvolvido utilizando React e outras bibliotecas como Phosphor React, React Hook Form e Styled Components. O uso dessas tecnologias permite uma interface moderna e interativa, além de uma experiência mais fluida e agradável para o usuário.

Com o Coffee Delivery, é possível visualizar todos os produtos disponíveis, escolher a quantidade desejada de cada um e realizar o checkout com preenchimento de dados de entrega e pagamento. Após finalizar a compra, o usuário é redirecionado para uma página de confirmação.

Além de ser um desafio interessante para quem está aprendendo a programar em React, o Coffee Delivery também pode ser uma inspiração para quem está pensando em criar uma loja virtual de cafés. Com o código fonte disponível no GitHub, é possível estudar a estrutura da aplicação e adaptá-la para diferentes necessidades.

Se você está procurando um projeto divertido e desafiador para aprimorar suas habilidades em React, ou se está pensando em criar uma loja virtual de cafés, o Coffee Delivery é uma ótima opção para se inspirar e aprender.

O Book Wise é uma aplicação web desenvolvida durante o curso Ignite da Rocketseat. O projeto consiste em uma plataforma em que os usuários podem fazer avaliações para livros que já leram, atribuindo uma nota de 1 a 5 e deixando um comentário.

Uma das principais funcionalidades da aplicação é a possibilidade de visualizar as avaliações feitas por outros usuários, além de ver a média de nota que um determinado livro recebeu. Além disso, a plataforma oferece uma página de exploração em que é possível filtrar a listagem de livros por categoria, nome ou autor.

Para construir o projeto, foram utilizadas diversas tecnologias e bibliotecas, como NextJS, Prisma, Stitches, Next Auth, Axios e outras. O deploy da aplicação foi feito na Vercel, enquanto o deploy do banco de dados foi realizado na Planetscale.

O Book Wise é uma ótima opção para quem quer compartilhar suas experiências literárias com outros usuários e conhecer novos livros. Além disso, foi um projeto desafiador e que me permitiu aprimorar meus conhecimentos em diversas tecnologias do universo Javascript.

DT Money is a project developed during Rocketseat's "Ignite" course, and aims to be a personal finance manager. With it, you can register both incoming and outgoing money, and from this information the application shows the sum of inputs and outputs, and the grand total.

One of the great advantages of DT Money is the possibility to display all transactions in a list that can be easily filtered through a search field. When registering a transaction, the user enters a description, the amount, the category, and whether it is an inflow or outflow. The saved information is sent to a backend through a REST API.

During the project's development, several fundamental concepts and technologies for the development of modern web applications were used. Concepts such as stylized components, useContext, REST API access, forms, validations, formatting with INTL, Typescript and much more were explored. Furthermore, libraries such as Axios, React Hook Form, ZOD, Radix, Styled Components, eslint and json server were used.

DT Money is a modern and functional application that can be used by anyone who wants to control their personal finances in a simple and practical way. It is a great option both for those who are starting to get organized financially and for those who already have more experience in this subject.

Book Wise is a web application developed during Rocketseat's Ignite course. The project consists of a platform where users can rate books they have read, assigning a score from 1 to 5 and leaving a comment.

One of the main features of the application is the possibility to view the ratings made by other users, as well as to see the average rating a particular book has received. In addition, the platform offers an exploration page where it is possible to filter the list of books by category, name or author.

To build the project, several technologies and libraries were used, such as NextJS, Prisma, Stitches, Next Auth, Axios and others. The application deployment was done at Vercel, while the database deployment was done at Planetscale.

Book Wise is a great option for those who want to share their literary experiences with other users and get to know new books. Besides, it was a challenging project that allowed me to improve my knowledge in several technologies of the Javascript universe.

Hey everyone, I'm really excited to share with you about the "Ignite Teams" project, developed as part of RocketSeat's React Native Ignite course. This simple application allowed me to learn and practice basic and advanced React Native concepts, while developing a very useful feature: organizing groups efficiently!

"Ignite Teams" was built using Expo and TypeScript, which made development more agile and organized. During the project, I had the opportunity to use libraries such as Styled Components and React Navigation, as well as learning how to embed custom fonts and work with SVG to add icons and vector images to the application.

With "Ignite Teams", you can add and remove groups, as well as add participants to those groups and organize them into teams. This functionality is perfect for facilitating the organization of team projects, events or any activity that requires division into groups.

If you're interested in checking out the result of this application, feel free to head over to my GitHub repository and try "Ignite Teams" for yourself. I'm sure you'll find a lot of use in this simple yet effective tool for organizing your groups in a hassle-free way.

Thank you all for your support and encouragement during the development of this project. I hope that "Ignite Teams" will be useful to you and that it will inspire your own work with React Native. Let's boost our skills together and achieve incredible results!

#IgniteTeams #ReactNative #ApplicationDevelopment #RocketSeat #GroupOrganization

Olá, pessoal! Hoje gostaria de compartilhar com vocês um projeto muito interessante que desenvolvi recentemente: o Vocab++.

O Vocab++ é uma aplicação web que tem como objetivo auxiliar estudantes de idiomas a expandirem seu vocabulário de maneira mais eficiente e prática. A aplicação é muito simples de usar: o usuário cola um texto e o Vocab++ cria uma lista com as palavras utilizadas naquele texto, mostrando a quantidade de vezes que cada uma delas foi utilizada.

O grande diferencial do Vocab++ é a possibilidade de marcar as palavras que o usuário já sabe o significado. Assim, nas próximas vezes que o usuário utilizar a aplicação, as palavras que ele já sabe não serão mostradas na lista, facilitando a identificação das palavras que ainda precisam ser aprendidas.

O Vocab++ foi desenvolvido com o framework VueJS e está hospedado em http://kursi.com.br/vocab-plus-plus/. O deploy da aplicação é feito automaticamente através de uma Github Action, o que garante maior agilidade e segurança para o usuário.

O Vocab++ é uma ferramenta extremamente útil para estudantes de idiomas que desejam expandir seu vocabulário de maneira mais eficiente e prática. A aplicação é totalmente open source e está disponível no Github para quem desejar contribuir com o projeto.

Gostaria de convidar todos a conhecerem o Vocab++ em http://kursi.com.br/vocab-plus-plus/ e a experimentarem esta ferramenta que irá revolucionar a forma como você estuda idiomas.

#vocabulario #idiomas #vuejs #tecnologia #desenvolvimento #open-source #github #programacao #estudantes

O Ignite Shop é um projeto desenvolvido durante o curso "Ignite" da Rocketseat. Trata-se de uma loja virtual simples conectada com a API da Stripe, que permite realizar compras online de forma segura e eficiente.

Uma das principais características do projeto é a sua simplicidade. A loja possui uma página inicial que lista os produtos disponíveis e permite que o usuário visualize mais informações sobre cada um deles. Além disso, o usuário pode adicionar os produtos ao carrinho de compras, onde é possível ver o valor total da compra e finalizar a compra através da API da Stripe.

Outra característica importante do Ignite Shop é a sua facilidade de uso. O projeto utiliza o framework Next.js, que permite criar uma aplicação web rápida e eficiente com JavaScript. Além disso, o uso do Static Site Generator (SSG) permite gerar as páginas estáticas do site durante o processo de build, o que torna o carregamento das páginas mais rápido e melhora a experiência do usuário.

O Ignite Shop também utiliza diversas bibliotecas e ferramentas para tornar a experiência do usuário mais agradável. Por exemplo, a biblioteca use-shopping-cart permite manipular o carrinho de compras de forma fácil e intuitiva. Além disso, a integração com a API da Stripe permite realizar pagamentos de forma segura e eficiente.

Outra biblioteca importante utilizada no projeto é o Stitches, que permite criar componentes estilizados de forma fácil e rápida. Com o Stitches, é possível definir estilos para os componentes de forma declarativa, o que torna o código mais limpo e fácil de entender.

Por fim, o Ignite Shop é um excelente projeto para quem está iniciando no desenvolvimento web com JavaScript. Além de ensinar conceitos importantes, como integração com APIs e manipulação de carrinho de compras, o projeto utiliza ferramentas modernas e bibliotecas populares, o que torna o aprendizado mais fácil e agradável.

O código fonte do projeto está disponível no GitHub e pode ser acessado através deste link: https://github.com/HenriqueMarcelo/ignite-shop. Além disso, é possível acessar a aplicação em produção através deste link: https://ignite-shop-gilt.vercel.app/.

The Ignite Shop is a project developed during Rocketseat's "Ignite" course. It is a simple e-shop connected with Stripe's API, which allows online shopping in a secure and efficient way.

One of the main characteristics of the project is its simplicity. The store has a home page that lists the available products and allows the user to view more information about each one. In addition, the user can add products to the shopping cart, where it is possible to see the total amount of the purchase and checkout through Stripe's API.

Another important feature of the Ignite Shop is its ease of use. The project uses the Next.js framework, which allows you to create a fast and efficient web application with JavaScript. In addition, the use of the Static Site Generator (SSG) allows the static pages of the site to be generated during the build process, which makes the pages load faster and improves the user experience.

The Ignite Shop also uses several libraries and tools to make the user experience more pleasant. For example, the use-shopping-cart library allows you to manipulate the shopping cart easily and intuitively. Also, the integration with Stripe's API allows payments to be made securely and efficiently.

Another important library used in the project is Stitches, which allows you to create stylized components quickly and easily. With Stitches you can define styles for the components declaratively, which makes the code cleaner and easier to understand.

Finally, the Ignite Shop is an excellent project for those just starting out in web development with JavaScript. Besides teaching important concepts such as API integration and shopping cart handling, the project uses modern tools and popular libraries, which makes learning easier and more enjoyable.

The project's source code is available on GitHub and can be accessed through this link: https://github.com/HenriqueMarcelo/ignite-shop. In addition, you can access the application in production through this link: https://ignite-shop-gilt.vercel.app/.

In the world of software development, it is not uncommon to find projects that face significant challenges due to architectural issues and poorly implemented code standards. Recently, I had the opportunity to work on a project exactly like this: a virtual catalog and B2B e-commerce web system integrated with an existing ERP for distributor management. This blog will post about my experience, the challenges encountered and the solutions implemented to turn the project into a success.

The Project: Virtual Catalog and B2B E-commerce

The project in question involved the creation of a web system that acted as a virtual catalog and a B2B e-commerce platform. The main objective was to allow distributors' customers to place orders online, with these orders being sent directly to the existing ERP, which operated in a Windows environment. This ERP was crucial for managing inventory, orders and other operational aspects of distributors.

Initial Problems: Architectural Flaws and Code Patterns

When I was hired, the system was already partially developed by a previous programmer who, unfortunately, did not follow good architecture and development practices. This resulted in code that was disorganized, full of bugs, and difficult to maintain. Integration with the ERP was far from ideal, and the system's performance left a lot to be desired.

Approach and Solutions

My first task was to perform a thorough analysis of the current state of the code and identify the main points of failure. Based on this analysis, I created a refactoring plan that addressed the following aspects:

1. Code Architecture Improvement: The code structure has been reorganized to follow modern design standards, making it easier to maintain and add new features.
2. Bug Correction: I identified and fixed several critical bugs that compromised the system's functionality.
3. Performance Optimization: Implemented performance improvements to ensure the system could handle a higher volume of orders without any issues.

Technologies Used

To achieve the project objectives, we use a combination of robust and modern technologies:

• Laravel: Used for the backend, providing a solid and secure foundation for system development.
• MongoDB: Chosen as a database for its flexibility and ability to deal with large volumes of unstructured data.
• Tailwind CSS: Employed for responsive and modern UI design.
• jQuery: Used for dynamic interactions on the front-end.
• Python: Key tool for integrating the web system with the desktop ERP, ensuring efficient communication between platforms.

Final result

After completing the refactoring and implementing new features, the web system was successfully put into production. Distributors' customers can now place orders efficiently and seamlessly, and these orders are automatically integrated into the ERP, significantly improving distributors' operational efficiency.

Conclusion

This project was an excellent example of how refactoring and implementing good development practices can transform a problematic system into an efficient and functional solution. I'm proud of the work accomplished and excited about the improvements this has brought to distributors and their customers. If you are interested in learning more about this and other projects I worked on, visit my portfolio at marcelohenrique.dev.br.

I hope this post has provided valuable insights into the importance of good software architecture and how structured approaches can solve even the most challenging problems in development projects. If you have any questions or would like to discuss software development, feel free to get in touch!

Ignite Call - A project for online appointment management

Ignite Call is an application that allows the creation of online appointments through integration with Google Calendar. The application was created as part of Rocketseat's Ignite course, where concepts like Next.js, Prisma, Next Auth, and other modern technologies were applied.

With Ignite Call, you can create events in Google Calendar to block already scheduled times and allow customers to schedule new available times. In addition, the application also provides features such as login with Google OAuth, data storage with Prisma, form creation with React Hook Form, and SEO optimizations with Next.js.

For the development of the project, libraries such as React Hook Form, Prisma, React Query, axios, Day.js, googleapis, Next.js, Next Auth, next-seo, nookies, Zod and others were used. The source code of the project can be accessed on Github, and the application itself is hosted on Vercel.

If you are looking for a complete and modern solution for online appointment management, Ignite Call may be an excellent choice. With a simple and intuitive interface, you can create and manage schedules easily and efficiently.

Translated with www.DeepL.com/Translator (free version)

Ignite Feed - A React and Typescript learning project

The Ignite Feed project is a web application that simulates the graphical interface of a social network feed. It was created in Rocketseat's "Ignite" course with the purpose of teaching advanced concepts of React, Typescript and date manipulation.

The application is an excellent opportunity for developers who want to improve their front-end programming skills. The project presents fundamental and practical concepts that can be applied in many other projects.

The Ignite Feed is an example of how it is possible to apply React and Typescript techniques to create a dynamic and responsive user interface. It also demonstrates how you can efficiently manipulate dates to create an application that simulates a social network feed.

The source code for the Ignite Feed is available on Github at https://github.com/HenriqueMarcelo/ignite-feed. For those who wish to test the application in operation, it is available at https://henriquemarcelo.github.io/ignite-feed/.

Conclusion
The Ignite Feed is an interesting project for developers who want to learn more about React, Typescript and date manipulation. It is a great example of how it is possible to apply these technologies to create a modern and responsive user interface. If you are looking for a project to improve your front-end skills, the Ignite Feed is a great choice.

Translated with www.DeepL.com/Translator (free version)

Olá pessoal, estou muito empolgado em compartilhar com vocês sobre o projeto "Ignite Teams", desenvolvido como parte do curso Ignite de React Native da RocketSeat. Essa aplicação simples me permitiu aprender e praticar conceitos básicos e avançados do React Native, enquanto desenvolvia uma funcionalidade muito útil: organizar grupos de forma eficiente!

O "Ignite Teams" foi construído utilizando Expo e TypeScript, o que tornou o desenvolvimento mais ágil e organizado. Durante o projeto, tive a oportunidade de utilizar bibliotecas como Styled Components e React Navigation, além de aprender a incorporar fontes personalizadas e trabalhar com SVG para adicionar ícones e imagens vetoriais ao aplicativo.

Com o "Ignite Teams", você pode adicionar e remover grupos, bem como adicionar participantes a esses grupos e organizá-los em times. Essa funcionalidade é perfeita para facilitar a organização de projetos em equipe, eventos ou qualquer atividade que exija a divisão em grupos.

Se você está interessado em conferir o resultado dessa aplicação, fique à vontade para acessar o meu repositório no GitHub e experimentar o "Ignite Teams" você mesmo. Tenho certeza de que você encontrará muita utilidade nessa ferramenta simples, porém eficaz, para organizar seus grupos de forma descomplicada.

Agradeço a todos pelo apoio e incentivo durante o desenvolvimento deste projeto. Espero que o "Ignite Teams" possa ser útil para você e que ele inspire o seu próprio trabalho com o React Native. Vamos juntos impulsionar nossas habilidades e alcançar resultados incríveis!

#IgniteTeams #ReactNative #DesenvolvimentoDeAplicativos #RocketSeat #OrganizaçãoDeGrupos

Ignite Call - Um projeto para gerenciamento de agendamentos online

O Ignite Call é uma aplicação que permite a criação de agendamentos online através de integração com o Google Agenda. A aplicação foi criada como parte do curso Ignite da Rocketseat, onde foram aplicados conceitos como Next.js, Prisma, Next Auth, e outras tecnologias modernas.

Com o Ignite Call, é possível criar eventos no Google Agenda para bloquear horários já agendados e permitir que os clientes agendem novos horários disponíveis. Além disso, a aplicação também fornece recursos como login com o Google OAuth, armazenamento de dados com Prisma, criação de formulários com React Hook Form, e otimizações de SEO com Next.js.

Para o desenvolvimento do projeto, foram utilizadas bibliotecas como React Hook Form, Prisma, React Query, axios, Day.js, googleapis, Next.js, Next Auth, next-seo, nookies, Zod e outras. O código fonte do projeto pode ser acessado no Github, e a aplicação em si está hospedada na Vercel.

Se você está procurando por uma solução completa e moderna para gerenciamento de agendamentos online, o Ignite Call pode ser uma excelente escolha. Com uma interface simples e intuitiva, é possível criar e gerenciar agendamentos de forma fácil e eficiente.

No mundo do desenvolvimento de software, não é incomum encontrar projetos que enfrentam desafios significativos devido a problemas de arquitetura e padrões de código mal implementados. Recentemente, tive a oportunidade de trabalhar em um projeto exatamente assim: um sistema web de catálogo virtual e e-commerce B2B integrado com um ERP existente para gestão de distribuidores. Este blog postará sobre minha experiência, os desafios encontrados e as soluções implementadas para transformar o projeto em um sucesso.

O Projeto: Catálogo Virtual e E-commerce B2B

O projeto em questão envolvia a criação de um sistema web que atuasse como um catálogo virtual e uma plataforma de e-commerce B2B. O objetivo principal era permitir que os clientes dos distribuidores realizassem pedidos online, com esses pedidos sendo enviados diretamente para o ERP existente, que operava em um ambiente Windows. Este ERP era crucial para a gestão de inventário, pedidos e outros aspectos operacionais dos distribuidores.

Problemas Iniciais: Falhas de Arquitetura e Padrões de Código

Quando fui contratado, o sistema já estava parcialmente desenvolvido por um programador anterior que, infelizmente, não seguiu boas práticas de arquitetura e desenvolvimento. Isso resultou em um código desorganizado, cheio de bugs e difícil de manter. A integração com o ERP estava longe de ser ideal, e o desempenho do sistema deixava muito a desejar.

Abordagem e Soluções

Minha primeira tarefa foi realizar uma análise completa do estado atual do código e identificar os principais pontos de falha. Com base nessa análise, elaborei um plano de refatoração que abordava os seguintes aspectos:

1. Melhoria da Arquitetura do Código: A estrutura do código foi reorganizada para seguir padrões de design modernos, facilitando a manutenção e a adição de novas funcionalidades.
2. Correção de Bugs: Identifiquei e corrigi diversos bugs críticos que comprometiam a funcionalidade do sistema.
3. Otimização de Desempenho: Implementei melhorias de desempenho para garantir que o sistema pudesse lidar com um volume maior de pedidos sem problemas.

Tecnologias Utilizadas

Para alcançar os objetivos do projeto, utilizamos uma combinação de tecnologias robustas e modernas:

• Laravel: Utilizado para o backend, fornecendo uma base sólida e segura para o desenvolvimento do sistema.
• MongoDB: Escolhido como banco de dados pela sua flexibilidade e capacidade de lidar com grandes volumes de dados não estruturados.
• Tailwind CSS: Empregado para o design responsivo e moderno da interface do usuário.
• jQuery: Utilizado para interações dinâmicas no front-end.
• Python: Ferramenta chave para a integração do sistema web com o ERP desktop, garantindo uma comunicação eficiente entre as plataformas.

Resultado Final

Após a conclusão da refatoração e a implementação das novas funcionalidades, o sistema web foi colocado em produção com sucesso. Os clientes dos distribuidores agora podem realizar pedidos de forma eficiente e sem interrupções, e esses pedidos são integrados automaticamente ao ERP, melhorando significativamente a eficiência operacional dos distribuidores.

Conclusão

Este projeto foi um excelente exemplo de como a refatoração e a implementação de boas práticas de desenvolvimento podem transformar um sistema problemático em uma solução eficiente e funcional. Estou orgulhoso do trabalho realizado e animado com as melhorias que isso trouxe para os distribuidores e seus clientes. Se você estiver interessado em saber mais sobre este e outros projetos em que trabalhei, visite meu portfólio em marcelohenrique.dev.br.

Espero que esta postagem tenha oferecido insights valiosos sobre a importância de uma boa arquitetura de software e como abordagens estruturadas podem resolver até os problemas mais desafiadores em projetos de desenvolvimento. Se tiver alguma dúvida ou quiser discutir sobre desenvolvimento de software, sinta-se à vontade para entrar em contato!

Today I'd like to share with you a very interesting project that I developed during Rocketseat's Ignite course: the Github Blog.

The Github Blog is a web application that allows developers to create and publish posts directly in their Github repository, as an "issue" in this same repository. The application was developed with the idea of making the creation and publication of content simpler and more accessible, allowing developers to share their ideas and projects with the community in an easy and intuitive way.

With Github Blog, users can create, edit and publish posts in a matter of minutes. In addition, the application uses the Github API to fetch information about the user's repositories and display them on their profile.

The Github Blog is an extremely useful tool for developers who want to create content and share their ideas with the community. The application is completely open source and is available on Github for anyone who wishes to contribute to the project.

I would like to invite everyone to get to know the Github Blog at https://github-blog.marcelohenrique.dev.br/ and join us in this initiative to make content creation and publishing more accessible and democratic.

#githubblog #rocketseat #webdev #github #programming #developer #dev #technology #nextjs #react #typescript #opensource