Introduction
Thanks for your hard work.
This time, I integrated Supabase with a learning log app built in React to achieve data persistence.
Additionally, I implemented hosting via Firebase, CI/CD automated deployment using GitHub Actions, and automated testing with Jest + React Testing Library.
This article reviews the app's architecture, development challenges and solutions, along with lessons learned and personal growth.
App Overview
GitHub Repository:
https://github.com/kazukashima/kadai1.git
This app records daily learning content and study time, automatically calculates the total hours, and displays the results.
| Feature | Description |
|---|---|
| Supabase Integration | Cloud storage of learning records |
| Initial Display | Retrieves learning records from Supabase for list view |
| Registration Function | Adds learning content and time via form |
| Deletion Function | Allows deletion of registered records (also removes them from Supabase) |
| Loading Indicator | Displays spinner during data retrieval |
| Firebase Deployment | Verify operation in production environment |
| Makefile | Verify operation in production environment |
| CI/CD | Automated testing & production deployment via GitHub Actions on push |
| Firebase Deployment | Verify operation in production environment |
The completed image is here.
Development Challenges and Solutions
1. Supabase couldn't be imported in Jest
- Issue: “Cannot find module ‘../supabaseClient’” error
- Solution: Worked around using mock files and moduleNameMapper
2. Firebase CLI Failed in CI
-
Issue: Couldn't run
firebase login, requiring FIREBASE_TOKEN instead - Solution: Resolved by storing in GitHub Secrets and loading via .yml
3. CI/CD Errors
- Issue: Attempted to automatically deploy to Firebase via GitHub Actions, but failed due to lack of Firebase CLI login permissions. Build stopped because .env file wasn't loaded.
- Solution: Registered Firebase authentication key in GitHub Secrets, used dotenv for .env loading, reviewed firebase-tools configuration in .yml
4. Type Conversion for Total Time Calculation
- Issue: Attempted to test the function calculating total study time in the “Study Log App” built with React using Jest. The component internally used supabaseClient, which depends on the fetch API and window object. However, Jest's default environment (Node.js) lacks these, resulting in errors like ReferenceError: fetch is not defined.
- Solution: Set up a jsdom environment and replace supabaseClient with a mock.
Key Growth Areas
Overcame resistance to cloud technologies
By actually using Supabase and Firebase, I experienced firsthand how they can be operated via GUI and how integration/deployment is simpler than imagined. This dispelled the notion that “cloud = difficult.”Developed awareness for both implementation and testing
Beyond just building UI, I became conscious of writing “code that enables automated functional verification” using Jest + React Testing Library.Strengthened understanding of asynchronous processing and module structure
Gained awareness of the underlying processes for environment setup, data integration, and testing—including asynchronous data fetching with useEffect, Supabase's data structure, and .env/mock files.Hands-on experience with CI/CD workflows
Built automated testing and deployment systems using GitHub Actions, practicing the full development-to-production pipeline.
Lessons Learned and Insights
- The barrier to entry for cloud services was lower than I imagined Supabase and Firebase offer robust GUIs, making them intuitive even for beginners. I learned the entire process—from database creation and table editing to deployment—end-to-end.
- The importance of tackling small problems one by one I was able to troubleshoot issues independently using documentation, Qiita articles, and error messages as clues.
- Experiencing the power of automation with GitHub Actions It instantly eliminated the hassle of manually performing each build and deployment step. I gained an understanding of separating production and development environments and the basics of CI/CD.
Conclusion
Through this Challenge 2, I experienced the entire development workflow: frontend → backend integration → hosting → testing → deployment automation.
In particular, building with Supabase and Firebase feels like a skill I can apply in real-world work.
Top comments (0)