This week I worked on several tasks and gained experience with various technologies. Here’s a breakdown of what I worked on:
I worked extensively with the Postman application, which is a powerful platform for building and using APIs. It simplifies the entire API lifecycle and promotes collaboration among team members, allowing us to create better APIs faster.
API Integration with Axios:
As part of my internship, I utilized Axios, a promise-based HTTP client, for integrating APIs. Axios is commonly used in both node.js and browser environments. It provided me with a convenient and efficient way to make HTTP requests and handle responses. I used Axios to integrate external APIs and update the weather information within our application based on the user’s location. It was exciting to see real-time weather updates within the application.
I worked with Material UI, an open-source React component library. Material UI implements Google’s Material Design principles and offers a wide range of prebuilt components that are production-ready out of the box. I utilized Material UI components such as Box, Button, Container, Textfield, and Typography to enhance the user interface of the application.
Custom Theming in Material UI:
In addition to using Material UI components, I implemented custom theming to improve the look of the application. It was fascinating to work on defining a custom palette for both light mode and dark mode, ensuring a consistent and visually appealing experience for our users.
Fourth of July Celebration:
As a fun break from work, I joined my friends in Alexandria, VA, to celebrate the Fourth of July. We enjoyed the festivities associated with this national holiday, which allowed me to relax and recharge.
PERN Stack & Interoperability:
In terms of the stack we used, I focused on achieving interoperability between our application and the database using the PERN stack. PERN stands for PostgreSQL, Express, React, and Node.js. I worked with PostgreSQL, a powerful and open-source object-relational database known for its performance. Express, a minimal and flexible Node.js web application framework, which provided a robust set of features for building the back-end. With React, I could created user interfaces by combining reusable components, and Node.js served as the runtime environment for executing JavaScript code.
Throughout this week, I gained valuable experience in API integration, front-end development with React and Material UI, custom theming, and back-end development with the PERN stack. These skills will undoubtedly contribute to my growth.
Challenges
One of the biggest challenges I faced this week was working with MUI theming. While implementing the custom theme, I encountered issues where certain components I used in the application would break the theming. This required me to scrap those components and start again to ensure the consistent look and feel across the application.
Upon closer examination, I realized that the problem stemmed from my approach to importing MUI components. Initially, I was relying on the automatically generated imports suggested by Visual Studio Code. However, I later discovered that I should have been grabbing and using the imports directly from the MUI documentation.
This realization emphasized the importance of closely following the official documentation when working with third-party libraries like Material UI. The documentation provides precise instructions and guidelines for using each component correctly, including the proper way to import them.
By adhering to the documentation, I ensured that I was using the appropriate imports, which played a crucial role in maintaining the integrity of the MUI theming and avoiding issues with component compatibility. This experience served as a valuable lesson in the significance of meticulous attention to detail and the benefits of relying on official documentation as a reliable resource.
Moving forward, I learned to be more cautious with automatically generated imports and to double-check the documentation for accurate import statements.
Want to Follow Along?
![implement-react-v18-from-scratch-using-wasm-and-rust-–-[24]-suspense(1)-–-render-fallback](https://prodsens.live/wp-content/uploads/2024/09/27190-implement-react-v18-from-scratch-using-wasm-and-rust-24-suspense1-render-fallback-380x250.png)
