Tuesday, 2 April, 2019 UTC

The 10 Things We Built on Twitch in March

The 10 Things We Built on Twitch in March

Summary

This year feels like it's on moving too fast! March is done and it was an eventful month for us here at Scotch.
We've gotten the following done:
  • Scotch home page redesign launched
  • Job board launched
  • React Starter (2019 Edition) launched
  • Twitch streams in full swing
Twitch streams have been quite the learning experience for me. Between video and audio gear and learning how to read chat/code/stream at the same time while keep it interesting. Big learning month!
On these Twitch streams, we build out demos, mini-projects and hangout while having fun.
Let's take a look a the 10 things we built on these Twitch streams in March. You really should check them out. We'll be streaming today if you want to join! https://www.twitch.tv/chrisoncode
1. Building a React Calendar
In this stream, a calendar was built from scratch using ReactJs and Styled Components. Each React component was written using Hooks, a date range can also be choosen and displayed when you hover on the calendar.
You have to click through to the demo to see how this one works.
  • CodeSandbox: https://codesandbox.io/s/yqoq6y6j3z
  • Twitch stream: https://www.twitch.tv/videos/390389848
https://codesandbox.io/s/yqoq6y6j3z?runonclick=1&view=preview
2. Building a Pokemon Battle Simulator using Vue and PokeAPI
Here, we built a fun battle simulator with Pokemons attacking each other and you can visualize their health bar reducing. This was built with Vue and utilizes the Vue lifecycle methods to make the app tick. This got trickier than I expected but ended up being a fun one.
  • CodeSandbox: https://codesandbox.io/s/jnorz9wjzy
  • Twitch stream: https://www.twitch.tv/videos/391392102
https://codesandbox.io/s/jnorz9wjzy?runonclick=1&view=preview
3. Building a Meme Generator in Vue
Chris built a Gif generator using the Vue-CLI and the Giphy API. This mini-project also uses CSS grid. In this application, you can search for a certain Gif using a provided search bar, also you can see trending Gifs on display.
  • CodeSandbox: https://codesandbox.io/s/k57o0j3wov
  • Twitch stream: https://www.twitch.tv/videos/392407873
https://codesandbox.io/s/k57o0j3wov?runonclick=1&view=preview
4. Build a Markdown Parser in React
In this stream, a markdown parser which converts markdown text while typing, into normal text. This application was built with React, Styled Components, react-markdown and PrismJS. The markdown parser handles header text, normal text, links, code blocks, block quotes and more.
  • CodeSandbox: https://codesandbox.io/s/nwm83w9y1l
  • Twitch stream: https://www.twitch.tv/chrisoncode/video/394021781
https://codesandbox.io/s/nwm83w9y1l?runonclick=1&view=preview
5. Using Tailwind to Build a Dashboard in React
Tailwind is a fun utility-first framework in that is give you low-level classes to cutomize your site. I've heard of everyone talking and using Tailwind so I thought we could try it out. This was about my 2nd time using Tailwind.
  • CodeSandbox: https://codesandbox.io/s/x55vj11rq
  • Twitch stream: https://www.twitch.tv/videos/395008276
https://codesandbox.io/s/x55vj11rq?runonclick=1&view=preview
6. Building a TailwindCSS Cheatsheet
While I am really liking Tailwind, I find the docs are a little hard to navigate. We made a cheatsheet that will quickly search for the right class that you want!
We even deployed it to a live Netlify site! https://tailwind-cheatsheet.netlify.com/
  • CodeSandbox: https://codesandbox.io/s/yjlvn462wx
  • Twitch stream: https://www.twitch.tv/videos/395982801
https://codesandbox.io/s/yjlvn462wx?runonclick=1&view=preview
7. Build a Modal Component in React
In this stream, a modal component was built in React. This app utilized React Hooks to handle state and lifecycle actions. Also styled-components was utilized to to handle styling.
  • CodeSandbox: https://codesandbox.io/s/yvz4royxp9
  • Twitch stream: https://www.twitch.tv/videos/398526405
https://codesandbox.io/s/yvz4royxp9?runonclick=1&view=preview
8. Build a Trivia App in Vue
This was probably my favorite stream. Building a trivia app automatically gets the chatroom involved and we had a lot of fun answering the random questions that showed up.
  • CodeSandbox: https://codesandbox.io/s/n9lz67mlrm
  • Twitch stream: https://www.twitch.tv/videos/399514775
https://codesandbox.io/s/n9lz67mlrm?runonclick=1&view=preview
9. Build a Stripe-like Menu Carousel in Vue
This is one that you have to click through and see. The hover and CSS animations are what we focused on. Pulled from Stripe.com's website since they always have the best UI tricks.
  • CodeSandbox: https://codesandbox.io/s/1yoz2432m7
  • Twitch stream: https://www.twitch.tv/videos/401142796
https://codesandbox.io/s/1yoz2432m7?runonclick=1&view=preview
10. React Infinite Scroll Challenge
This stream is a solution to Scotch code challenge #16. In this stream, an image gallery masonry with infinte scroll was built with React, the unsplash API, react-infinite-scroll-component and Bulma. CSS grid was also used to create the masonry effect on the gallery.
  • CodeSandbox: https://codesandbox.io/s/yvnr3qo109
  • Twitch stream: https://www.twitch.tv/videos/383957976
https://codesandbox.io/s/yvnr3qo109?runonclick=1&view=preview
Let's Keep Going!
While we are stoked about these streams, we'll keep doing them and you can join us weekly here. Got a fun application or mini-project to build out in these streams? Know any way we can make these streams better?
Let us know by mentioning Scotch on Twitter or letting Chris know. Happy keyboard slapping!

... more @ scotch.io

scotch.io