<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: April Schuppel</title>
    <description>The latest articles on Forem by April Schuppel (@aprilschuppel).</description>
    <link>https://forem.com/aprilschuppel</link>
    <image>
      <url>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%2F2007777%2F9e404352-6fc3-4930-afe0-d12c50616f92.jpg</url>
      <title>Forem: April Schuppel</title>
      <link>https://forem.com/aprilschuppel</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/aprilschuppel"/>
    <language>en</language>
    <item>
      <title>Socialize: Optimize your social life!</title>
      <dc:creator>April Schuppel</dc:creator>
      <pubDate>Sun, 19 Jan 2025 22:19:16 +0000</pubDate>
      <link>https://forem.com/aprilschuppel/socialize-optimize-your-social-life-3mep</link>
      <guid>https://forem.com/aprilschuppel/socialize-optimize-your-social-life-3mep</guid>
      <description>&lt;p&gt;&lt;strong&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github"&gt;GitHub Copilot Challenge &lt;/a&gt;: Fresh Starts&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built Socialize - an app to help you organize and optimize your social life. &lt;/p&gt;

&lt;p&gt;You may be thinking “do we really need another social networking app”? But here’s the thing. It’s not meant to share your life online, but help you make the most of your life offline. It’s like a personal CRM for everyone from your best friend and your old boss to your uncle and that person you met at a work conference a few years ago.&lt;/p&gt;

&lt;p&gt;I got the idea for this app as I was wishing for something like it after being laid off from my job. I posted on LinkedIn about the news and got an influx of comments, messages, texts, phone calls, and emails. The support was coming from my friends and from people I’ve worked with throughout my career, some of whom I wished I had kept in better touch with. I started making a spreadsheet to help me keep track of who to follow up with, whether to catch up about life or because they told me they knew of a job opportunity I would be a good fit for.&lt;/p&gt;

&lt;p&gt;What if instead I had an app that made it really easy for me to be PROACTIVE instead of REACTIVE with my relationships? An app that helped me keep track of the people in my life and sent me reminders and recommendations to keep the relationships strong."&lt;/p&gt;

&lt;p&gt;It’s like a more modern version of the Sims relationships tab, which would show status and type of relationship, reminding you who you need to reach out to.&lt;/p&gt;

&lt;p&gt;&lt;a href="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%2F7t6ieush7kjox1ntqnh8.jpeg" class="article-body-image-wrapper"&gt;&lt;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%2F7t6ieush7kjox1ntqnh8.jpeg" alt="Example relationship tab in a Sims game" width="800" height="231"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I built this app using Next.js. I used a lot of shadcn/ui components to build out my pages.&lt;/p&gt;

&lt;p&gt;I’m submitting this to the “Fresh Starts” challenge because I’ve been viewing my time post-layoff AS a fresh start. It’s something to help me reignite my social network to look for my next adventure. It would be a great social good and help rejuvenate communities if every individual put more effort into their offline relationships.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/RNBy2DT4hZc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;You can find the app deployed here: &lt;a href="https://socialize-life.vercel.app/contacts" rel="noopener noreferrer"&gt;socialize-life.vercel.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The main functionality I was able to build was the basic contact list and profile view, interactions history list, and the ability to add a new contact.&lt;/p&gt;

&lt;p&gt;(I’m a drummer, and currently doing a daily drumming challenge, so I made my sample contacts famous drummers.)&lt;/p&gt;

&lt;p&gt;I wish I had more time to implement additional functionality such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;More CRUD actions like logging interactions and editing contact profiles&lt;/li&gt;
&lt;li&gt;A calendar to visualize when you’ve interacted with people and upcoming events&lt;/li&gt;
&lt;li&gt;Set reminders to reach out to people based on a set frequency target&lt;/li&gt;
&lt;li&gt;Add more categorization with things like groups, locations, and interests&lt;/li&gt;
&lt;li&gt;Incorporate AI to help generate customized messages based on templates and a person’s details and history&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Repo
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;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"&gt;
      &lt;a href="https://github.com/aprilschuppel" rel="noopener noreferrer"&gt;
        aprilschuppel
      &lt;/a&gt; / &lt;a href="https://github.com/aprilschuppel/socialize" rel="noopener noreferrer"&gt;
        socialize
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;This is a &lt;a href="https://nextjs.org" rel="nofollow noopener noreferrer"&gt;Next.js&lt;/a&gt; project bootstrapped with &lt;a href="https://nextjs.org/docs/app/api-reference/cli/create-next-app" rel="nofollow noopener noreferrer"&gt;&lt;code&gt;create-next-app&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Intro&lt;/h2&gt;

&lt;/div&gt;
&lt;p&gt;This is my submission for the &lt;a href="https://dev.to/challenges/github" rel="nofollow"&gt;DEV GitHub Copilot 1-Day Build Challenge&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/aprilschuppel/socialize" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;h2&gt;
  
  
  Copilot Experience
&lt;/h2&gt;

&lt;p&gt;I made the most use of Copilot Chat (I unfortunately used up all my completions working on other projects this month).&lt;/p&gt;

&lt;p&gt;The things I did most with chat were:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use “Fix using Copilot” within a file&lt;/li&gt;
&lt;li&gt;Drag multiple files as context into Copilot Chat and ask it to explain how the files were working together or how to fix bugs&lt;/li&gt;
&lt;li&gt;Generate sample data based on type definitions&lt;/li&gt;
&lt;li&gt;Explain and help troubleshoot console errors&lt;/li&gt;
&lt;li&gt;Ask to generate a starting point (ex: create a tsx file that let’s me input a new contact) when building a new component or page&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It was very helpful to NOT have to leave VS Code when troubleshooting. Easily providing all the files as context and being able to reference various things when asking questions or creating prompts was huge. Now that I’ve started using GitHub Copilot, it’s hard to imagine going back to coding without it.&lt;/p&gt;

&lt;h2&gt;
  
  
  GitHub Models
&lt;/h2&gt;

&lt;p&gt;Towards the end of my 24 hour period I did spend about 30 minutes trying to see if I could integrate GitHub Models to include functionality in my app to suggest conversation starters with various contacts. I got it working in the console locally but unfortunately, I couldn’t get it incorporated into my app within the time period.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I had a ton of fun building out this project. In the true spirit of a hackathon, my friend and I got on a Google Meet and spent 24 hours building. Straight through the night, fueled by caffeine and snacks, and completely wired by the end. But worth it for the learning experience (and SOCIALIZE-ing).&lt;/p&gt;

&lt;p&gt;As far as impact, with a little more work I could see myself using this tool regularly. &lt;/p&gt;

&lt;p&gt;If it were released into production and more broadly used, we’d be fighting the loneliness epidemic together.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>Community DB w/ Analytics Starter Kit (Neon, Confluent, Tinybird, Next.js)</title>
      <dc:creator>April Schuppel</dc:creator>
      <pubDate>Mon, 02 Sep 2024 06:57:00 +0000</pubDate>
      <link>https://forem.com/aprilschuppel/community-db-w-analytics-starter-kit-4ia1</link>
      <guid>https://forem.com/aprilschuppel/community-db-w-analytics-starter-kit-4ia1</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/neon"&gt;Neon Open Source Starter Kit Challenge &lt;/a&gt;: Ultimate Starter Kit&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Kit
&lt;/h2&gt;

&lt;p&gt;This starter kit is to help build a community database site to bring people with shared interests together. &lt;/p&gt;

&lt;p&gt;Users can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;View a table of items&lt;/li&gt;
&lt;li&gt;Rate and items in the table&lt;/li&gt;
&lt;li&gt;See a dashboard with analytics&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The example used was inspired by BoardGameGeek and uses board games as items.&lt;/p&gt;

&lt;h2&gt;
  
  
  Link to Kit
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/aprilschuppel/community-database-with-analytics" rel="noopener noreferrer"&gt;repo&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Journey
&lt;/h2&gt;

&lt;p&gt;I have only recently gotten into traditional development (a little less than 2 months ago). My first experience building a web app was using Next.js and Tinybird to build an Olympics tracker, so I decided to use those tools again.&lt;/p&gt;

&lt;p&gt;My stack includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Neon for storing board game data&lt;/li&gt;
&lt;li&gt;Confluent for tracking user events (ratings &amp;amp; stars)&lt;/li&gt;
&lt;li&gt;Tinybird for consolidating data from different sources to create user facing analytics&lt;/li&gt;
&lt;li&gt;Next.js for building the web app&lt;/li&gt;
&lt;li&gt;Tailwind 
CSS for styling&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Resources used:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The Learn Next.js Course and accompanying repo for its Dashboard app as a starting point&lt;/li&gt;
&lt;li&gt;The docs for everything in the stack&lt;/li&gt;
&lt;li&gt;Kaggle for board game datasets to reference&lt;/li&gt;
&lt;li&gt;Mockingbird for generating sample data&lt;/li&gt;
&lt;li&gt;Random users for avatars to use as user profile pictures&lt;/li&gt;
&lt;li&gt;Google Gemini for help along the way&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’ve learned a lot throughout the process, but at the same time feel like I discovered more about how much there is left to learn. While I’ve gotten a lot more comfortable with the UI side of things like creating components and Next.js makes routing between different pages easy. But I still don’t feel confident with being able to set up all the data things without referencing a lot of docs and samples (which is why it was a good thing to participate in this challenge!). Neon and Tinybird made working with data easy, my struggles were more around integrating that data into the apps. I am also still working on figuring out the best ways to set up the data architecture such as when to use event streaming.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>neonchallenge</category>
      <category>postgres</category>
      <category>database</category>
    </item>
  </channel>
</rss>
