From Design to Development Full Stack Next.js Crash Course
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-pos...
Support my work by liking this video and subscribing for more free tutorials!
https://youtube.com/colbyfayock?sub_c...
/ 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
https://youtube.com/colbyfayock?sub_c...
🐦 Get updates straight to your Twitter
/ colbyfayock
📸 Catch the next stream live on Twitch
/ 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
Смотрите видео From Design to Development Full Stack Next.js Crash Course онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Colby Fayock 12 Март 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 50,52 раз и оно понравилось 1.6 тысяч людям.