Learn how to take a new project from design to development in this crash course. We'll walk through the full stack of building a new web app including designing a new app, starting the app from scratch, building components, adding dynamic content with authenticated APIs, automating tests, and deploying the project to the web. Code: https://github.com/colbyfayock/my-posts-app Support my work by liking this video and subscribing for more free tutorials! null https://twitter.com/colbyfayock https://colbyfayock.com/newsletter Get your own Cosmo shirt! https://www.colbyfayock.com/cosmoshirt Ready to get started? Here's a breakdown of all the chapters and what to expect. More info: https://fromdesignto.dev/ 0:00:00 - Intro Welcome! Ready to dive in? 🚀 0:00:28 - What tools will we use? Reviewing what tools we'll use including: - Figma: https://figma.com/ - Next.js: https://nextjs.org/ - Sass: https://sass-lang.com/ - Storybook: https://storybook.js.org/ - Applitools: https://info.applitools.com/udbC3 - GitHub Actions: https://github.com/features/actions - Netlify: https://www.netlify.com/ - Airtable: https://airtable.com/invite/r/NHUtoBw2 0:01:05 - Picking a new project with 50 Projects for React & the static Web Free project idea PDF from https://50reactprojects.com/ 0:01:40 - Creating a new design with Figma Creating a new project in Figma and learning how to use it. 0:10:30 - Creating a new React app with Next.js and Create Next App Starting a new Next.js app from scratch and organizing content structure. 0:15:43 - Installing and configuring Sass in Next.js Adding and configuring Sass in a Next.js app and learning how to use Sass features like nesting and variables. 0:18:37 - Create a project layout from a Figma design in Next.js Using a Figma design to create a new project in Next.js including the design to development handoff with CSS styles, making changes using browser devtools, and adding new fonts from Google Fonts. 0:38:17 - Adding Storybook to a Next.js app Installing Storybook in a Next.js project and configuring the project to use Sass, then creating new stories to use in the project. 0:56:00 - Developing and designing React components in Storybook Creating new Figma design components to help develop new React components, using Iconset and React Icons to add SVG icons, and creating new React components from scratch. 1:36:52 - Deploying a Next.js project with Netlify Creating and setting up a new repository for the project including connecting it to Netlify and installing the Next.js build plugin for Netlify. 1:42:52 - Automating Visual Testing with Applitools Eyes & GitHub Actions in Storybook Getting started with Applitools including finding the API key, installing the Applitools Eyes Storybook SDK, adding visual testing to the Storybook project, and setting up a GitHub Action to automate running tests using GitHub Secrets for API keys. 1:58:48 - Authentication with Netlify Identity and React Context Installing and setting up Netlify Identity with the Netlify Identity Widget to add authentication and using a custom React hook with the Context API to wrap the Next.js app with global authentication state. 2:27:16 - Adding dynamic content with the Airtable API Setting up a new Airtable Base and using the REST API to fetch content, create content, and using Next.js serverless functions to authenticate API requests through Netlify Identity. 3:23:23 - Deploying the final app and serverless functions to Netlify Adding sensitive data as environment variables to Netlify, debugging serverless functions inside of the Next.js project to deploy the final project to Netlify. 3:29:03 - Project recap Breakdown of everything accomplished including: - 50reactprojects.com for project ideas - Creating a design in Figma - Using Create Next App to create a new React app - Setting up Storybook to develop components - Adding Applitools Eyes for automated Visual Testing - Authenticating our app with Netlify Identity - Using Airtable to fetch and create dynamic data - Creating serverless functions for securing API requests - Setting up environment variables for sensitive data 3:33:43 - Congrats, you made it! 🥳🥳🥳 Full breakdown of everything included: https://fromdesignto.dev/ 🔔 Subscribe for more tech and developer videos null 🐦 Get updates straight to your Twitter https://twitter.com/colbyfayock 📸 Catch the next stream live on Twitch https://twitch.tv/colbyfayock ✉️ Or a newsletter right to your inbox! https://colbyfayock.com/newsletter 💝 Sponsor me for more free content like this! https://github.com/sponsors/colbyfayock 👨‍🚀 Brought to by colbyfayock.com https://colbyfayock.com/ 🎥 Want to know what A/V equipment I use? https://colbyfayock.com/what-i-use 🛍 Create an eCommerce Store with Next.js and Stripe Checkout https://colbyfayock.com/ecomm 🎼 Music StreamBeats https://www.streambeats.com/ #colbyfayock