The 10 Things We Built on Twitch in March

Publikováno: 1.4.2019

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 launch...

Celý článek

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:

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.

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.

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.

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.

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.

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/

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.

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.

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.

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.

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!

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace