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
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/
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 to get 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!
🥳🥳🥳
#figma #api #web-development #storybook #next
