This year feels like it's on moving too fast! March is done and it was an eventful month for us here at Scotch.
Table of Contents
- 1. Building a React Calendar
- 2. Building a Pokemon Battle Simulator using Vue and PokeAPI
- 3. Building a Meme Generator in Vue
- 4. Build a Markdown Parser in React
- 5. Using Tailwind to Build a Dashboard in React
- 6. Building a TailwindCSS Cheatsheet
- 7. Build a Modal Component in React
- 8. Build a Trivia App in Vue
- 9. Build a Stripe-like Menu Carousel in Vue
- 10. React Infinite Scroll Challenge
- Let's Keep Going!
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
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
Essential Reading: Learn React from Scratch! (2020 Edition)
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
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
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
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
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
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
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.
Twitch stream: https://www.twitch.tv/videos/399514775
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.
Twitch stream: https://www.twitch.tv/videos/401142796
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.
Twitch stream: https://www.twitch.tv/videos/383957976
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?
Like this article? Follow @chrisoncode on Twitter