From Design toDevelopmentCrash Course

Watch on YouTube Subscribe on YouTube

What You'll Learn

  • 🎨 Designing layouts with Figma
  • 💻 Creating React apps with Next.js
  • 💅 Styling the web with Sass
  • 📓 Creating component systems with Storybook
  • 🧐 Automating Visual Testing with Applitools Eyes
  • 🤖 Automating code tasks with GitHub Actions
  • ⚙️ Deploying a Next.js app with Netlify
  • 🔒 Authenticating users with Netlify Identity
  • 📝 Managing dynamic content with Airtable

Take your web app from design to development with this free course!

Full Chapter Breakdown

0:00:00 - Intro

Welcome! Ready to dive in? 🚀

Jump to this chapter!

0:00:28 - What tools will we use?
  • Figma design tool
  • Next.js React framework
  • Sass CSS language
  • Storybook design system and component framework
  • Applitools automated visual testing
  • GitHub Actions code task automation
  • Netlify app hosting and deployment
  • Netlify Identity authentication
  • Airtable (API) as a database

Jump to this chapter!

0:01:05 - Picking a new project with 50 Projects for React & the static Web
  • Downloading the free project idea PDF from 50reactprojects.com
  • Reviewing available project ideas

Jump to this chapter!

0:01:40 - Creating a new design with Figma
  • Creating a new frame inside of a Figma project
  • Adding text to a design
  • Grouping content to easily update a layout

Jump to this chapter!

0:10:30 - Creating a new React app with Next.js and Create Next App
  • Starting a new app from scratch
  • Reorganizing content structure
  • Overview of a new Next.js app

Jump to this chapter!

0:15:43 - Installing and configuring Sass in Next.js
  • Adding Sass to a Next.js app
  • Updating a Next.js app to use Sass
  • Using Sass features like nesting and variables

Jump to this chapter!

0:18:37 - Create a project layout from a Figma design in Next.js
  • Using a Figma design to create a project layout
  • Copying CSS styles from Figma into a Next.js app
  • Making style changes in a Next.js app with style imports
  • Adding and updating CSS inside of the browser developer tools
  • Adding custom fonts with Google Fonts
  • Creating and styling a custom form

Jump to this chapter!

0:38:17 - Adding Storybook to a Next.js app
  • Installing Storybook in a Next.js React project
  • Configuring Sass with Storybook
  • Creating new stories in Storybook
  • Adding React components in Storybook
  • Importing React components into Next.js
  • Using custom Sass CSS modules to style components
  • Importing global application styles into Storybook stories

Jump to this chapter!

0:56:00 - Developing and designing React components in Storybook
  • Creating Figma components to help develop new React components
  • Using Iconset to import and use SVG icons with Figma
  • Creating new React components from scratch from a Figma design
  • Using CSS Flexbox for designing component layouts
  • Using SVG Font Awesome icons with React Icons

Jump to this chapter!

1:36:52 - Deploying a Next.js project with Netlify
  • Creating a new GitHub repository
  • Adding an existing project to GitHub
  • Connecting a GitHub repo to Netlify
  • Configuring build settings for a Netlify project
  • Installing the Next.js build plugin to Netlify

Jump to this chapter!

1:42:52 - Automating Visual Testing with Applitools Eyes & GitHub Actions in Storybook
  • Getting started with Applitools
  • Finding your Applitools API key
  • Installing Applitools Eyes Storybook SDK
  • Adding Visual Testing to Storybook with Applitools Eyes
  • Testing breaking changes and visual regressions
  • Visual differences and regressions in the Applitools dashboard
  • Creating a new GitHub Action to automatically run tests
  • Automating Applitools Eyes visual testing with GitHub Actions
  • Setting Secrets in a GitHub repository
  • Using a Secret as an environment variable in GitHub Actions

Jump to this chapter!

1:58:48 - Authentication with Netlify Identity and React Context
  • Installing Netlify Identity Widget
  • Creating a useAuth custom hook with React Context
  • Wrapping a Next.js application with React Context
  • Using React Context to access state throughout an app
  • Using the useEffect hook to initialize Netlify Identity on load
  • Adding login functionality with Netlify Identity
  • Setting up Netlify Identity with GitHub
  • Only allowing logged in users to interact with app
  • Letting users log out of the app
  • Refreshing app authentication state on login
  • Cleaning up event handlers on unmount with useEffect

Jump to this chapter!

2:27:16 - Adding dynamic content with the Airtable API
  • Getting started with Airtable
  • Creating a new Base in Airtable to store content
  • Reviewing the Airtable REST API
  • Generating an API key in Airtable
  • Using cURL to test fetching content from Airtable
  • Using getStaticProps to fetch data in Next.js
  • Authenticating requests to the Airtable API
  • Dynamically showing content from Airtable
  • Using JavaScript Intl.DateTimeFormat to format date strings
  • Using environment variables to protect sensitive data
  • Creating API endpoints for interacting with the Airtable API
  • Creating new content with the Airtable API
  • Using a form React component to submit new requests
  • Sorting an array of objects by a date key
  • Protecting serverless functions with Netlify Identity

Jump to this chapter!

3:23:23 - Deploying the final app and serverless functions to Netlify
  • Adding environment variables to Netlify
  • Debugging serverless function not being available in getStaticProps
  • Deploying serverless function before using in app
  • Testing our project on production

Jump to this chapter!

3:29:03 - Project recap
  • 50reactprojects.com to get project ideas
  • Creating a project design in Figma
  • Using Create Next App to create a new Next.js React app
  • Building a posts 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 to store sensitive data
  • More things you can do

Jump to this chapter!

3:33:43 - Congrats, you made it! Outro

🥳🥳🥳🥳🥳

Jump to this chapter!

Susbcribe to My Newsletter

Get free weekly tutorials straight to your inbox!

Love From Design to Dev?