This week, I completed my onboarding, learned the fundamentals of React Admin, and completed my first project dependency update.

Onboarding and React Admin

On my first day, I attended an onboarding meeting with Dr. Shawn. The session gave me a clearer picture of what to expect during my internship, especially my responsibility to carefully review and verify my work before submitting it, as it may eventually be deployed to production.

After the onboarding session, I worked through the React Admin tutorial to build my foundation in the framework. I learned about components, data providers, and the development workflow, and understood that React Admin is a React-based framework for building tailored administrative interfaces.

Updating Project Dependencies

After completing the tutorial, I began updating the project dependencies. The first challenge came from the updated @mui/system package, which changed the code format required by the <Box> and <Grid> components in Dashboard.tsx. I resolved this by updating the affected code to follow the new format.

During testing, another issue appeared because node-fetch v3 was incompatible with the project’s current Jest configuration. I resolved this by keeping node-fetch on the compatible v2 version.

Once that was resolved, the remaining Dashboard tests failed because the updated @mui/x-charts package used structuredClone, a browser function unavailable in the jsdom testing environment. I added a fallback function in jest.setup.js to provide the required value during testing.

After resolving these challenges, the project built successfully and all 58 tests passed. A before-and-after comparison also confirmed that the Dashboard remained functional.

Plans for Next Week

The dependency update took up most of my time this week, leaving me with limited time to explore the repository’s structure and understand how its components are connected. Next week, I plan to develop a clearer high-level understanding of the repository so that I can make future code changes confidently without affecting other parts of the project.

Categories: Experiential

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.