Introduction
Congratulations on your hard work!
In this app development, we developed an online business card app that anyone can register on the spot and automatically deletes the next day.
Using React, TypeScript, Supabase, Firebase, and Chakra UI, we've implemented CI/CD, testing, and automatic deletion batching.
--
App Overview
GitHub Repository:
https://github.com/kazukashima/kadai4.git
This app records daily learning content and study time, and automatically calculates and displays the total time.
| Features | Contents |
|---|---|
| Firebase Deployment | Automatically Update to Production Environment |
| Superbase Integration | Cloud storage of business card and skill data |
Development challenges and solutions
1. Integration of React Hook Form and Chakra UI
When I used React Hook Form's register command with Chakra UI's and ,
for some reason, validation did not work, and I was able to submit even with blank fields.
After investigating, I found that Chakra UI's form components have a slightly unusual design,
and register alone does not properly manage values.
So, I explicitly set the value exchange using a controller,
and validation started working properly.
This experience taught me the importance of understanding and using form mechanisms differently depending on the UI library.
2. Setting Environment Variables in GitHub Actions
When setting up automatic deployment with GitHub Actions,
it worked locally but failed in CI because .env was not loaded.
I learned that .env is not automatically reflected in Actions,
so I resolved the issue by registering it in Secrets and explicitly specifying it with env:.
I realized that environment variables are handled differently locally and in CI,
and learned the importance of first designing how Secrets are passed.
3. Checking the Execution of Batch Processing (ts-node + GitHub Actions Cron)
When I ran a batch using GitHub Actions to delete the previous day's data every morning at 6:00 a.m.,
I encountered an issue where the data worked locally but not in production.
The cause was a difference in the path and the time difference (UTC vs. Japan time). I solved this problem by standardizing the execution method using npx ts-node --esm and calculating dates based on UTC.
This experience made me realize that a CI environment is not the same as a local environment.
Points of Growth
1. I gained a sense of confidence in releasing through testing.
I introduced Jest and the React Testing Library and implemented page-level testing.
This allowed me to check whether anything had broken when making changes,
creating an environment where I could deploy with confidence.
In particular, I gained a great deal from practicing the idea of "testing in isolation," such as mocking useNavigate and mocking Superbase functions.
Writing tests naturally allowed me to organize component responsibilities and data flow,
which resulted in a significant improvement in code comprehension and stability.
2. I learned to handle time-dependent processes.
By implementing a batch process that deletes the previous day's data every morning at 6:00 AM, I experienced the challenges and excitement of time-dependent programs.
At first, the deletion process didn't work properly due to the discrepancy between UTC and Japan time.
I struggled with the situation where things worked locally but not in production.
In the process, I gained a deep understanding of how Supabase handles timestamps, how UTC-based date calculations work,
and how GitHub Actions execute.
Through this experience, I feel I've gained the ability to design not just tasks, but also when and in what environment they will run.
--
Lessons Learned/Insights
Automation is not just an opportunity to "reduce effort" but also to "understand the system."
Creating a batch process that automatically deletes files at 6 a.m. every morning gave me the ability to organize the relationships between "time," "environment," and "logic," rather than simply running a script.The importance of sharing what I've learned.
I was able to troubleshoot independently using documentation, Qiita articles, and error messages.
--
Conclusion
Through this development, I was able to experience the entire process of creating an app, from creating it → testing it → automatically publishing it.
I want to increase the amount of output I produce and firmly solidify my knowledge.
Top comments (0)