Why I rewrote awesomereact.com with Next.js, styled components and GraphQL
Initial version
In 2015 I fell in love with developing applications with React and React Native. I watched a ton of videos on YouTube about React and was really impressed by the quality. I bookmarked many of them.
As I was looking for a project to experiment with server rendering in React I was inspired by the awesome lists on github and TED and wanted to build a similar website to highlight the best React videos.
In May 2016 I started the initial version of awesomereact.com. It was a fun experiment and I learned a ton about server rendering and prior to create-react-app also about webpack.
I launched the site in August 2016 on now.sh and after tweeting some videos it got a little traction. I updated the site from time to time and added new videos, but one of the biggest disadvantages of the initial design was the discoverability of new videos. The homepage was just a bunch of playlists with no easy way to discover newly added videos.
Furthermore I neglected the project for a long time, but nonetheless the traffic grew consistently to about 1K per month and it also got added to Tim Arney’s awesome React FAQ site.
New version
In August this year I finally decided to do something about it and redesign the site for better discoverability. Since I started the project a lot has changed in the React ecosystem. New tools like create-react-app and Next.js were released and CSS-in-JS and GraphQL got more traction. I rebuilt the site with Next.js and styled components and later also replaced the small REST API I had with a GraphQL API using Apollo both on the client and on the server.
I absolutly love the development experience using these tools and am happy to finally release the second version of awesomereact.com.
What’s next
With the new design and better tools to manage videos and playlists I’m looking forward to continue to add new awesome React videos and curate playlists. Also speaker pages are coming.
What you can do
First check out the new awesomereact.com site and tell me what you like and what I can improve. Subscribe to the newsletter and follow me or @aweomsereact on Twitter.
Do you know some awesome React video or want to add a playlist? Contact me on Twitter or write an email to andreas@awesomereact.com.
