The latest articles on DEV Community by Jenny Zhang (@jennyzzt). https://dev.to/jennyzzt https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2678425%2F25cd360a-19b2-481d-b957-be365c5a3812.png https://dev.to/jennyzzt en Jenny Zhang Mon, 20 Jan 2025 07:22:47 +0000 https://dev.to/jennyzzt/dearfamz-bereal-for-families-2pi6 https://dev.to/jennyzzt/dearfamz-bereal-for-families-2pi6 <p><em>This is a submission for the <a href="https://dev.to/challenges/github">GitHub Copilot Challenge </a>: Fresh Starts</em></p> <h2> What I Built </h2> <p>Communicating with my parents has always been a challenge, but I still want to stay connected with them in a way that is not as intrusive to my private life as I would like. Also, I realized I don't know very simple things about my parents, e.g., what are their favorite colors? Would they prefer oranges or apples? Hence, I made <strong>DearFamz</strong>, a mobile application that aims to help family members connect and understand each other better through simple interactions.</p> <p>Inspired by BeReal but tailored for families, I hope that DearFamz will foster fresh starts in family relationships. The app prompts family members at regular intervals (daily or weekly) to answer engaging questions, giving them the opportunity to share thoughts, memories, photos, or even something seemingly trivial. You choose what to share, maintaining healthy boundaries while building stronger, more meaningful connections with your loved ones.</p> <h2> Demo </h2> <p>Check out the demo video here: <a href="https://youtube.com/shorts/Fq9UFbdz9xg?feature=share" rel="noopener noreferrer">https://www.youtube.com/shorts/Fq9UFbdz9xg</a></p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Signup Page</th> <th>Signup Name Page</th> <th>(Home Page) Feed Today</th> <th>(Home Page) Feed All Time</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe6yf95epzn4y4wvcv539.png" alt="Signup Page" width="457" height="894"></td> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvurmrods2bdx1sr4abfr.png" alt="Signup Name Page" width="457" height="894"></td> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F02wof5vduyv04yrljo4a.png" alt="Feed Today" width="465" height="907"></td> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqh6mn7bqb976zgvxxs8f.png" alt="Feed All Time" width="449" height="898"></td> </tr> </tbody> </table></div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Connect Today Page</th> <th>Edit Family Page</th> <th>Profile Page</th> <th>Profile Edit Page</th> </tr> </thead> <tbody> <tr> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fonzz8zkqp6o3e4hxi8at.png" alt="Connect Today Page" width="452" height="893"></td> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4hsdqggnzb5sx687g3o9.png" alt="Edit Family Page" width="463" height="903"></td> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fargu8v36wg6hpt8uwwfb.png" alt="Profile Page" width="459" height="894"></td> <td><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb9w3raca67iyzkc2kw0u.png" alt="Profile Edit Page" width="448" height="902"></td> </tr> </tbody> </table></div> <h2> Repo </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/jennyzzt" rel="noopener noreferrer"> jennyzzt </a> / <a href="https://github.com/jennyzzt/dearfamz" rel="noopener noreferrer"> dearfamz </a> </h2> <h3> DearFamz </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">DearFamz</h1> </div> <p>Communicating with my parents has always been a challenge, but I still want to stay connected with them in a way that is not as intrusive to my private life as I would like. Hence, I made DearFamz, a mobile application that aims to help family members connect and understand each other better through simple interactions.</p> <p>DearFamz prompts families at regular intervals (daily or weekly) to share genuine answers to engaging questions. Choose what you wish to share, keep healthy boundaries, and stay connected with your loved ones. This app is heavily inspired by <a href="https://bereal.com/" rel="nofollow noopener noreferrer">BeReal</a>.</p> <div class="markdown-heading"> <h2 class="heading-element">Screenshots</h2> </div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Signup Page</th> <th>Signup Name Page</th> <th>(Home Page) Feed Today</th> <th>(Home Page) Feed All Time</th> </tr> </thead> <tbody> <tr> <td><a rel="noopener noreferrer" href="https://github.com/jennyzzt/dearfamz/blob/main/screenshots/signup_page_filled.png?raw=true"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fjennyzzt%2Fdearfamz%2Fraw%2Fmain%2Fscreenshots%2Fsignup_page_filled.png%3Fraw%3Dtrue" alt=""></a></td> <td><a rel="noopener noreferrer" href="https://github.com/jennyzzt/dearfamz/blob/main/screenshots/signup_name_page_filled.png?raw=true"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fjennyzzt%2Fdearfamz%2Fraw%2Fmain%2Fscreenshots%2Fsignup_name_page_filled.png%3Fraw%3Dtrue" alt=""></a></td> <td><a rel="noopener noreferrer" href="https://github.com/jennyzzt/dearfamz/blob/main/screenshots/family_feed_today.png?raw=true"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fjennyzzt%2Fdearfamz%2Fraw%2Fmain%2Fscreenshots%2Ffamily_feed_today.png%3Fraw%3Dtrue" alt=""></a></td> <td><a rel="noopener noreferrer" href="https://github.com/jennyzzt/dearfamz/blob/main/screenshots/family_feed_allbuttoday.png?raw=true"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fjennyzzt%2Fdearfamz%2Fraw%2Fmain%2Fscreenshots%2Ffamily_feed_allbuttoday.png%3Fraw%3Dtrue" alt=""></a></td> </tr> </tbody> </table></div> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Connect Today Page</th> <th>Edit Family Page</th> <th>Profile Page</th> <th>Profile Edit Page</th> </tr> </thead> <tbody> <tr> <td><a rel="noopener noreferrer" href="https://github.com/jennyzzt/dearfamz/blob/main/screenshots/connecttoday_page_pic.png?raw=true"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fjennyzzt%2Fdearfamz%2Fraw%2Fmain%2Fscreenshots%2Fconnecttoday_page_pic.png%3Fraw%3Dtrue" alt=""></a></td> <td><a rel="noopener noreferrer" href="https://github.com/jennyzzt/dearfamz/blob/main/screenshots/editfamily_page.png?raw=true"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fjennyzzt%2Fdearfamz%2Fraw%2Fmain%2Fscreenshots%2Feditfamily_page.png%3Fraw%3Dtrue" alt=""></a></td> <td><a rel="noopener noreferrer" href="https://github.com/jennyzzt/dearfamz/blob/main/screenshots/profile_page.png?raw=true"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fjennyzzt%2Fdearfamz%2Fraw%2Fmain%2Fscreenshots%2Fprofile_page.png%3Fraw%3Dtrue" alt=""></a></td> <td><a rel="noopener noreferrer" href="https://github.com/jennyzzt/dearfamz/blob/main/screenshots/profile_page_edit.png?raw=true"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fjennyzzt%2Fdearfamz%2Fraw%2Fmain%2Fscreenshots%2Fprofile_page_edit.png%3Fraw%3Dtrue" alt=""></a></td> </tr> </tbody> </table></div> <div class="markdown-heading"> <h2 class="heading-element">Project Structure</h2> </div> <ul> <li> <code>lib/</code> contains all the ui pages <ul> <li> <code>flutter run</code> to run</li> </ul> </li> <li> <code>functions/</code> contains code to generate questions weekly <ul> <li> <code>firebase emulators:start --only firestore</code> to emulate Firestore</li> <li> <code>firebase</code>…</li> </ul> </li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/jennyzzt/dearfamz" rel="noopener noreferrer">View on GitHub</a></div> </div> <h2> Copilot Experience </h2> <p>Throughout the development of DearFamz, Copilot massively enhanced my productivity:</p> <ol> <li>Project Overview: At the start, I asked Copilot for an overview of how to build the app. It suggested high-level guidance on structuring the project.</li> <li>Code Autocomplete: Copilot’s autocomplete feature for editing code files, which makes it incredibly convenient to quickly write repetitive or boilerplate code.</li> <li>Inline Chat for Small Edits: For minor edits or improvements. Quick edits without switching away from the code file.</li> <li>Feature Development &amp; Refactoring: When I needed to implement new features that required architectural changes or refactoring, I used Copilot’s chat feature to brainstorm and get suggestions. This made it easier to think through the design and implementation process.</li> <li>Switching Models: Claude for coding, o1 for reasoning. This is what I found what each model is better at.</li> </ol> <h2> GitHub Models </h2> <p>I used GitHub Models to generate the core content for the app:</p> <ol> <li>Content Generation: A key part of DearFamz is its database of daily or weekly questions designed to engage users. I used GitHub Models to prototype and generate a diverse range of questions that are meaningful, engaging, and family-focused.</li> <li>Experimenting with Models: I tested different models to evaluate their performance in generating relevant and creative question prompts.</li> </ol> <h2> Conclusion </h2> <p>I built this app for my own family to use. If you think you'll like it too, look out for the launch! 🚀</p> devchallenge githubchallenge webdev ai