Works and Challenges of XPE React Bootcamp. Trabalhos e desafios do bootcamp XPE React.

This was an introductory activity to the Next.js framework, where we delved into the advantages of utilizing this framework. We developed an application that follows the best practices for web page rendering, employing a hybrid approach involving SSG, SSR, and CSR.

Consequently, static contents are generated on the server side, resulting in swifter load times for these sections. Moreover, resources that require frequent updates are retrieved on the client side, delivering fresh data at the moment of request.

Esta foi uma atividade introdutória ao framework Next.js, durante a qual exploramos as vantagens de utilizar este framework. Desenvolvemos uma aplicação que adere às melhores práticas de renderização de páginas web, empregando uma abordagem híbrida que engloba SSG, SSR e CSR.

Dessa forma, os conteúdos estáticos são gerados no lado do servidor, o que resulta em maior rapidez nas seções correspondentes. Além disso, recursos sujeitos a atualizações frequentes são recuperados no lado do cliente, proporcionando a obtenção de dados atualizados no momento da requisição.

In challenge 03, it was necessary to implement user session recording for greater security and also to improve application optimization. Additionally, the system received an enhancement; now it provides a summary of the user's monthly expenses.

No desafio 03, foi necessário implementar a gravação da sessão do usuário para maior segurança e também realizar melhorias na otimização da aplicação. Além disso, o sistema recebeu um aprimoramento; agora ele apresenta um resumo dos gastos mensais do usuário.

In Practical Work 3, we started using React with TypeScript in our application, along with implementing the Google interface called 'Material UI.' This way, we developed more robust applications with the security of TypeScript and a more professional appearance, using well-known components from Google. The challenge involved retrieving data from a backend provisioned by Json-server and making requests that already brought filtered data based on the reference month and year.

No Trabalho Prático 3, começamos a utilizar o React com TypeScript em nossa aplicação, além de implementar a interface do Google chamada "Material UI". Dessa forma, desenvolvemos aplicações mais sólidas e seguras usando TypeScript, ao mesmo tempo em que conseguimos uma aparência mais profissional, graças aos componentes conhecidos do Google. O desafio consistiu em recuperar dados de um backend provisionado pelo Json-server e fazer requisições, trazendo os dados já filtrados de acordo com o mês e ano de referência.

In Challenge 02, it was necessary to retrieve data from a backend provisioned using JSON Server and the "elections.json" file in the "data" folder. Once the raw information from the file was retrieved, it was necessary to process and manipulate the data to provide relevant and organized information to the users accurately. For the development of this application, React was used, and a strong emphasis was placed on best practices, avoiding prop drilling and utilizing lifting up state concepts. To retrieve the data, the Axios framework was used with established methods in the "services" folder to prevent code duplication that could occur in larger projects.

No Desafio 02, foi necessário recuperar os dados de um backend provisionado a partir do JSON Server e do arquivo "elections.json" na pasta "data". Uma vez recuperadas as informações brutas encontradas no arquivo, foi necessário tratar e manipular os dados para fornecer informações relevantes aos usuários de forma organizada e assertiva. Para o desenvolvimento dessa aplicação, foi utilizado o React, e um ponto forte de prática foram as boas práticas, evitando o "prop drilling" e usando conceitos de "lifting up state". Para a recuperação de dados, foi utilizado o framework Axios com métodos estabelecidos na pasta "services" para evitar a duplicação de código que poderia ocorrer em projetos maiores.

English:

In Practical Assignment number 2, it was necessary to use fictitious data about investment funds and build a mobile-first interface to display and manipulate the data to make it more explanatory

Português:

No Trabalho Prático número 2, foi necessário utilizar dados fictícios sobre fundos de investimentos e construir uma interface mobile first para exibir os dados e manipula-los para serem mais explicativos.

In challenge 01, it was necessary to develop a web page capable of making queries using the Axios library and displaying the information through a graph, provided by the ChartJS library.

No desafio 01 foi necessário deseenvolver uma página web capaz de fazer consultas utilizando a biblioteca Axios e exibir as informaçãoes através de um grafico, disponibilizado a partir da biblioteca ChartJS.

In practical assignment number 1, it was necessary to consume a makeup API and establish some filters in order to search for each of the products registered in the API in a simplified manner.

No trabalho prático número 1, foi necessário consumir uma API de maquiagem e estabelecer alguns filtros para poder buscar de forma simplificada cada um dos produtos registrados na API.