I Just Did What? FLOSS and Code 2020
The next thing I remember, I was participating in a Hackathon…
I recently was skimming through my LinkedIn feed and remember one of my connections had written a blog about how she had attended her first Hackathon. She mentioned that although she had been in programming for a little while, now, she never felt smart enough or that she was a strong enough developer to participate in one. She ended up attending the recent MLH Hackathon, TechTogether New York. I had signed up to attend this event, also, even though I couldn’t relate to her more. Who was I kidding, I thought. I could NEVER offer anything to a team and I would do nothing but flail miserably! Then the strangest thing happened…before I even had a chance to flake on that Hackathon, I ended up in a completely different event, without knowing what had happened. Enter GitHub’s FLOSS and Code 2020 Hackathon. I don’t know where it came from, I don’t know how I ended up doing it, it just happened and I didn’t even have time to think about it and find every excuse to not attend.
There’s a number of great things about The Flatiron School’s program, one being the weekly tech events email we get from Career Services. Last week, I just happened to notice that there was a meetup that GitHub was putting on ‘Introduction to GitHub’ and I thought ‘AWESOME! I need a deeper knowledge of Git” I attended the event and learned so much about merging, pull requests, how to have a remote origin and work on different branches, how to have multiple people working on separate branches of the same remote repo, what to do when you come upon merge conflicts. I’m elated that I went, I’m pretty sure I failed an interview partly for not knowing how to do a proper pull request on a repo that they asked me to work on. Checkout GitHub’s Youtube channel and especially their Trainings playlist for tutorial videos (There’s also a direct link to the event I attended with a passcode, if you reach out to me directly, I’ll send the link and code).
While I attended the meetup, the moderator mentioned that we were all there because we planned on attending the FLOSS and Code Hackathon and we wanted to make sure that we were involved in discussions, creating issues, etc. for the event. I thought I must be the only person there who hadn’t even known about the Hackathon and talked myself into staying anyways. The Hackathon was the next day, live on Youtube and everyone seemed excited about it. While attending the event, I felt like my skills of navigating in the repo put me somewhere in the middle of the herd and I wasn’t so bad with git, and…and the next thing I knew, I was introducing myself in the FLOSS and Code repository’s discussions tab. The next morning I reached out to a Flatiron cohort mate, she said she wasn’t ready for a Hackathon either, and I sent her the link to the event and told her I’d see her there anyways!
GitHub FLOSS and Code was spearheaded by someone I have heard great things about, Brian Douglas (follow him on twitter: @bdougieYO). Here is the Youtube link for the recording of the live event. The event had great speakers like Justin E. Samuels from Rebuild Black Businesses who’s also working with RenderATL for an event in 2021, as well as, Lauren Williams of Go Naked Hair. The event had tutorials from Tim Neutkens of Next.js with A good first issue; Nick DeJesus with his React Hook that handles shopping cart logic use-shopping-cart; Lee Robinson, a Next.js contributor who introduced us to the library that was built on ReactJS; and Thor Schaeff from Stripe who (at about 2:20:00 in the recording) walked through an entire cycle of using his template repository nextjs-subscription-payments to clone the template (built with Next.js), and set it up using Vercel, Supabase, Github to have a live, working test site offering subscription plans to customers and directly taking payment through Stripe.
I immediately followed Thor’s walk through and had my initial site working in about an hour, with one small problem, where I didn’t catch the webhooks when deploying Vercel — make sure to pay attention and get those webhooks configured…they’re necessary for having Stripe and Supabase, a PostgreSQL database - open source Firebase alternative, communicating correctly. It’s important that everytime you add a product on Stripe, for example, Stripe sends the information directly to Supabase and the change is immediately available to our app, whether working on it locally or viewing changes directly on the live site.
The goal of FLOSS and Code was to either use Thor’s original template for building a site for a business effected by Covid-19, use the template to design a new template for an ecomm based business, or make improvements to the original template. My Hackathon partner and I, Regina Furness (follow her on LinkedIn & GitHub), decided to work on designing and developing a new template using the original and we started with a small MVP of wanting our customer to be able to make one-off purchases, quantities amendable, make the users Name editable on the account page, add placeholder pages (using Next.js’s INCREDIBLE easy to use routing) and change some of the styling on all of the customer facing pages. Please find our wire-frame HERE for our plans. We also incorporated a Google 3rd Party OAuth login and updated the ReadMe.md file for some more in-depth instructions on set-up.
We had 10 days to work on this Hackathon, unlike many events that I’ve heard are more often than not only a day or two. Regina and I were both extremely grateful for the length of days: You have to imagine, we learned an entirely new library: Next.js, we learned a new styling framework: TailwindCSS, and we had to learn (or attempt to learn, in all honesty we weren’t always successful in this area) how Stripe, Supabase and Vercel were all communicating with each other.
Next.js is incredible, as I mentioned before the routing alone could make a person want to make the switch from ReactJS to Next.js. Unlike ReactJS, routing doesn’t require installing React Router or declaring the import at the top of every file, heck you don’t even have to import react at the top of every file. When your application is built with npx create-next-app <your-app-name-here>, every component that is located in the Pages directy of the application can become a route and directly called upon throughout other components. Among so many other features, Next.js applications also come with automatic Typescript support and configuration.
This being my first time working with TailwindCSS for all of the styling, there was a lot to learn. Not only are all of your style effects coded directly in your classNames on every element that you need styled, a big change from the basic knowledge of CSS that I have was in getting more comfortable with the name changes of properties and how they are used in TailwindCSS. After the first couple of days, it becomes almost second nature to do all of your styling directly in your HTML, or in our case in our JSX. There are a few limitations and specifications, but the core of TailwindCSS is quite easy to get a grasp on and quickly usable.
It will require much more time and effort for us to become comfortable with Supabase and Stripe. Supabase as our database dashboard first and foremost is sleek and painless to navigate through. It does require a level of querying, though, that I’ll have to personally work on, and has inspired me to go back to my SQL studies and get sharper at! Stripe was very easy and seamless to get up and running for subscriptions, but we’ll need many more hours learning how to use the platform after customers purchase one-time items. Subscription plans automatically generate an invoice which you can use in the future to recall a customers purchases and although another option (shout out of Thanks to CJ @ Stripe for helping us) through Stripe is to directly create an invoice on your Stripe dashboard, one of our hopes was to get recently purchased items to our account dashboard, and at this time one-time purchases don’t create invoices, and we weren’t yet able to find a way to obtain information about past purchases to use how we would have preferred.
Regina and I are both happy to have participated in the FLOSS and Code Hackathon event, and both have learned a massive amount of information. We’ve both had the opportunity to become much more familiar with GitHub, and for me that alone was the most important part of this opportunity. She and I would also like to thank EVERYONE involved with this event. Each person from every team, whether it be GitHub, Next.js, or Stripe were so helpful and knowledgable. It was yet another example of how the engineering community really goes out of their way to uplift those around them. Thank you!
Our repo: https://github.com/osha7/og-github-floss-subs
Lee Robinson’s great beginner videos on Next.js: https://www.youtube.com/playlist?list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR
Vercel Docs: https://vercel.com/docs
Stripe Docs: https://stripe.com/docs
TailwindCSS Docs: https://tailwindcss.com/docs
BDougie’s Open Source Dashboard: https://opensauced.pizza/
