From Design to Development Full Stack Next.js Crash Course
Vložit
- čas přidán 27. 07. 2024
- 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: github.com/colbyfayock/my-pos...
Support my work by liking this video and subscribing for more free tutorials!
czcams.com/users/colbyfayock?sub_c...
/ colbyfayock
colbyfayock.com/newsletter
Get your own Cosmo shirt!
www.colbyfayock.com/cosmoshirt
Ready to get started? Here's a breakdown of all the chapters and what to expect. More info: 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: figma.com/
- Next.js: nextjs.org/
- Sass: sass-lang.com/
- Storybook: storybook.js.org/
- Applitools: info.applitools.com/udbC3
- GitHub Actions: github.com/features/actions
- Netlify: www.netlify.com/
- Airtable: 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 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:
fromdesignto.dev
🔔 Subscribe for more tech and developer videos
czcams.com/users/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!
colbyfayock.com/newsletter
💝 Sponsor me for more free content like this!
github.com/sponsors/colbyfayock
👨🚀 Brought to by colbyfayock.com
colbyfayock.com
🎥 Want to know what A/V equipment I use?
colbyfayock.com/what-i-use
🛍 Create an eCommerce Store with Next.js and Stripe Checkout
colbyfayock.com/ecomm
🎼 Music
StreamBeats
www.streambeats.com
#colbyfayock - Věda a technologie
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
My man Colby with the full-length free Next.js course. This is very well explained. We appreciate everything you're doing for the community.
thanks Quincy
@@colbyfayock how lucky both of you
Wow Colby. Wasn't expecting to see this. Super awesome that you put out a crash course like this. Rooting for you my friend. Much love and respect. See you soon!
thank you so much John!
Amazing, Colby! You are a great developer and the content is even better!
Well done!
thanks so much Catalin 🙏💜
Just completed this course and I have to say it's amazing!!
I really loved it because of all the tools and services you used together to build up this app.
thanks Naman! nice job getting through 💪 glad you enjoyed it!
I saw this channel today and after watching this, I can. gladly say this has just become one of my favourite channels. I just subscribed and turned on the notifications for more amazing videos.
thanks so much 🙏
I'm halfway the the workshop and had to come here to say it's great.
Thanks!
thanks Leandro!!
And then here I am, working my way through an interview process... making a GitHub issue tracker with next js, graphql, jest, vercel, damn! you saved me on the authentication part!!
haha glad to help and good luck with the interview!
Digging this Colby. Thank you very much for this! Much appreciated the efforts you put into this!
No problem! 😁
😱😱😱incredible! gonna dive into it on the weekend. Thanks and keep it up! 🚀
thank you Rodrigo 🙏 let me know what you think!
Just starting to watch this tutorial, it looks amazing. I'm really excited to follow it, thanks Colby!
thanks so much Francisco!
You are legit the coolest guy!! Vicariously through you I am developing a more adhesive understanding of authentication flow specific to these Netlify methods and React Context. Spectacular my dude, thank you SO much for who you are. The magnitude of complexity is easier to grasp through the way you articulate the logic verbally.
Thanks!
that makes me super happy to hear, thanks for the kid words :)
omg Colby, this is amazing! :)
thanks Douglas!! 🙌
The BEST tutorial related to the storybook and github action I have ever seen. Thank you.
So glad to hear! Did you have any trouble working through it from an "up to date" perspective?
Awesome Colby, thanks!
no problem!
Excellent content, Colby! 💯
thank you Ahmad! 🙏
Best CZcams program instructor out there!!! You should make these course or more paid for would def support ! Of course still give out some free ones haha
I’m a developer as well I just got into nextjs from Django!!! You make it easy to understand let me know if you need volunteers!!!
haha thank you so much! i have 2 premium courses actually you can find over on spacejelly.dev/courses/ and a new on on the way 👀 www.colbyfayock.com/course-updates
just discovered your channel and already loving it 😁
thank you!! 🙌
I'm loving this detailed introduction to Figma.
thanks Josh!!
Brilliant explanation. Very useful. Thank you!
no problem!
Want more? Check out more of my free tutorials including Next.js and other web tools: czcams.com/play/PLFsfg2xP7cbL-kmqydheUCbhkHeNq-zZ_.html
Make sure to subscribe for more! czcams.com/users/colbyfayock
Is this for beginners??
I mean not web dev beginner but react beginner
@@nomansyt i would have a hard time saying that it's "for" beginners, but i think you may be able to follow along and learn as you go, worth a shot!
Very nice course! Well done Colby.
thank you!!
Thanks a lot for this man! I was literally thinking about this today and how there aren’t many resources that show the full process from design to a full application. Super helpful!
yess!! no problem. hope it helps!🙌
Thank you so much for this amazing content ♥️
no problem :)
What an underrated channel!!
thank you!!
Wowow you are the best! Keep it up!
thank you!!! 🙌
Nice course Colby!!!
thank you :)
Thank you very much, I found the course that combines a bit of designing, testing, using GitHub actions and DB. Of course, it is not a fully functional website (i.e. likes, shares, etc.), and I think it shouldn't be that deep. Using Airtable as DB is awesome (and you use only 'fetch'), of course, it has limitations - like 5 requests per second per base, but if you use Next.js or Gatsby for a static site, i.e. querying on the build time, it is a really great choice. One more time, thank you for showing how this stack of technologies works together))
thanks Nail, I definitely agree Airtable has it's limitations compared to a full typical database, but it's a great foot in the door for developers given i believe it has a lower barrier to entry
im curious, what are the limitations you see with GitHub Actions? I've found that I can do quite a lot with it!
Thank you for your work ☺️
no problem! 🙌
Your great brother ❤️❤️,
Awesome tutorial.
thanks :)
Helpful video and clean explanation i appreciate your Hard Work Man :)
no problem! 🙌
Man, this is awesome!
thank you!!
Great video
thank you! 🕺
This is gold.
thank you!
Awesome vido, thanks a lot!
No problem 🙌
Thank you ! this is great
thanks Himanshu!
Love you man... You saved me.
i got you! 🙌
Thanks man
you got it 🙌
Absolutely amazing! there is far too little focus on design when it Comes to hot tech like nextjs. Go Colbyyyyyyy🙂
thanks Linda! :)
Epic! Everything that you want
thanks tino!
Very very nice job
thank you! 🙌
Just wow....thanks a lot for this💯💯💯💯💯💯💯💯
np! glad you liked it :)
wow so great tutorial
thank you!
FYI I think the Next on Netlify plugin has already been renamed Essential Next.js. I was able to deploy using that plugin. Nice crash course!
funny enough it was renamed between the time i started building this course and the time i released it 😅 i was confused while referencing it later on. would have been challenging to rework it so just left it. thanks for the heads up though and glad you liked it!
am so happy i got this mail lol
haha hope you enjoy! 🙌
Thank you 👍🏼🎉🙏
you got it! 💪
This is absolutely awesome, thank you! You're my hero. Cheers from Brazil 🇧🇷
obrigado Mariana!
Such a well conducted tutorial! You deliver so much value, thank you very much for this content Colby. I have completed the tutorial and I have learned a lot about Next JS!
I was just wondering how you would do to make the submitted posts persist after a page reload in production?
thanks Edgar, glad it was helpful! you could store the posts in useState and when a new post is added, add it to that sttate, with a subsequent GET request that makes sure you have hte latest posts
@@colbyfayock Hey Colby, thank you very much for your quick reply and the suggestion! Very much appreciated :)
I tried to change the posts query from getStaticProps to getServerSideProps and I got the expected result. But I don't if it's the right way to go in this case... I will try your suggestion as well. Thanks again!
Thanks for the great video. For the bio-component you don't need the css for .bioContent. Simply a align-items: center on the .bio container and it's done :-). The authentication part with netlify is very complicated :-) I don't understand all the stuff
no problem! and yeah great point!
I'm a fan.
Thank you!!
Awesome.
Please use npm in your next project!
:)
thank you!
Hey Team! There is a LOT here! Will keep you out of trouble this weekend.
haha there sure is! sounds good, good luck with the adventure 💪
I love next.js but I am tempted to use getServerSideProps and that makes the deployment more complex (for an s3) and the site in general works slower. what do you think? I use it to verify if it is authenticated and for the roles.
there's definitely a lot of great use cases for server side rendering, especially large highly dynamic sites with content behind auth
i know this exists, but haven't used it before: www.serverless.com/plugins/serverless-nextjs-plugin - it also looks like it's only Next.js 9
I would imagine that something can be done to build a system similar to what Netlify is doing with it's build plugin but for AWS
taking advantage of Lambdas for the dynamic bits
WOW Dude U keep nailing it. i had a dream OnceUpon a time . that we would have such deep level realtime webDevOps .. inaction in theNow. I feel im living In that dream more an more. Great work Bro.. muchAppeciated.!(beyondWhat i can "Say")
i sense a taste Of D Lang and DartCode. perhaps we reaching a point where allaCoders r Chirping the same Tweets. DartCode. Seth Ladd delivers a very similar code i love this...
thank you 🙌 i haven't tried Dart yet actually, maybe at some point ill give it a try
Hii ,
I have a question about nextjs if I can deploy it in versel by using nextjs as a proxy server in order to reroute the incoming request to external backend?
yup i think you should be able to do that, but you don't need Next.js if all you want to do is create a serverless function, you can just use Vercel alone vercel.com/docs/concepts/functions - example github.com/vercel/examples/tree/main/solutions/raw-body-functions
Would love to see how you would create a e-commerce site.
i'll add that to my list! for now, if you're an egghead member, you can check out my course that builds a Next.js + Stripe Checkout ecommerce store egghead.io/courses/create-an-ecommerce-store-with-next-js-and-stripe-checkout-562c?af=atzgap
I created storybook for my project by looking at your tutorial thank you so much.. it will be great if you can find solution for loading images from local path.
yay glad to hear that!
Purple is the apex colour.
💟
I’m gravitating towards your tutorials slowly
@@swayampravodasgupta2956 🏃♂💨
Hi, I have been following this tutorial, however i find an issue in the storybook part, after install the version required i got this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `unboundStoryFn`.
Can you help me with some tip. . ?
Greetings
hey David, hard to tell without seeing the code. can you add the code to GitHub or something I can look at?
x2
for this simple setup, potentially you could copy-paste css styles directly from figma. Fom my opinion, would be more efficient. However showing that developer tools for beginners is also nice.
good point! i try to show both approaches. for me personally, i selectively use the styles from Figma, because i typically code in em units, and also the positioning is absolute based in there
@Colby Fayock enjoy figmaelements.com/plugins/px-em/ might help. why em and not rem? I see disadvantages of ems in children, since it is "avalanche" based kind of.
@@1etcetera1 ooo interesting, thanks for sharing
i like to be able to have that children relationship tbh, it helps me build components where i can consider the smaller pieces relative to the bigger piece, allowing me to easily scale that specific component up from the outside, without having to adjust the size of each piece
@@colbyfayock cool! never thought about that in this way. I was thinking that it's rather a bug neither a feature :) One more thing, you could also create yet another page in figma and put your figma components there and then under the assets tab always have a component list where you would drag and drop a needed component into a working space.
Colby gonna be the next Brad Traveresy !
haha thanks :) we'll see! 💪
@Colby Fayock, great tutorial ! But I am stuck at 52.02 where I encounter the "TypeError: this.getOptions is not a function", after doing yarn -D add sass-loader@10.1.1, and run yarn storybook, the error still comes back., in your video, this issue got away. But I am still having the same error... please advise..
here's the Stack Overflow link, maybe poke around some of the other comments 🤔 stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function
@@colbyfayock I got the same issue and I have try to solve with same StackOverFlow Solutions but it doesn't got fixed. I like to tell you that I am checking this Next JS v11 on Node v12. So is there any restriction with this Environment..?
Here is the Code - github.com/speeday/d2d-nextjs
@@YadavDeepak yeah i'm able to reproduce that issue, there shouldn't be an issue with your environment
it looks like updating Storybook to use Webpack 5 works. i confirmed locally using it and Yarn as the package manager as there are some odd things going on with peer dependencies
github.com/storybookjs/storybook/issues/14138
gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrading-from-webpack-4
@@colbyfayock I struggled a bit with this but ended up doing:
npx sb init --builder webpack5 -f
and then following your steps for installing the presets.
@@crash75uk thanks for the heads up, nice find. Didn't know you could pass with the argument
It was fine, but the getInitialProps error appeared ... when downloading StoryBook and I could no longer continue.
I really did not find how to solve this there. I really liked the video. If someone knows how to fix it, I will be grateful and I will resume the project. Thanks
hey Laura can you clarify the steps you took to get an error? do you have hte code available on github?
Im curious why use margin instead gap?
which part?
first
😂 👏 first time i got a "first" on a video
I was supposed to be the "first" this time. u cheater! :D
@@1etcetera1 😂 😂 😂 i need to learn how to reserve "first" slots for first dibs on OTHER videos