Part 1: Rebuilding Linear's Homepage with Next.js and Tailwind

This video is part of a multi part series in which we are going to rebuild Linear's homepage with Next.js 13 and Tailwind. Part one is all about setting up Next.js and Tailwind, and creating the main page structure, the main navigation (including a nice animation on mobile), and the footer.
In the next parts we will also be adding more animations with Framer Motion.
👀 Timestamps
00:00 - Intro
01:53 - Setup Next.js
02:18 - How we're going to build this
02:53 - Start building
05:01 - Empty page shell
05:32 - Container component
06:15 - Using REM values for sizing
07:06 - Hero component
19:57 - Header and main navigation component
29:02 - Button component with CVA
39:46 - Mobile version of header and navigation
49:36 - Making sure the desktop navigation works again as well
51:28 - Adding animation to the navigation
56:10 - Footer component
01:04:17 - Making the footer component responsive
01:05:45 - Outro
💬 Join us on Discord: www.frontend.fyi/discord
🐦 Follow me on Twitter: / frontend_fyi & / jeroenreumkens
👨‍🏫 Check my mentorships: www.jeroenreumkens.nl/mentoring
Other videos mentioned:
📺 Using REM instead of pixels: • Why You Should Use REM...
📺 Page animations with Next.js: • Adding Route Transitio...
📺 Writing component variants with CVA: • Large Tailwind Compone...
🔗 Source on Github: github.com/frontendfyi/rebuil...
👀 Preview of what we've build so far: rebuilding-linear.vercel.app/
Tools mentioned:
🔗 Class Variance Authority: github.com/joe-bell/cva
🔗 Tailwind: tailwindcss.com
🔗 Linears website: linear.app
#linear #react #css #tailwind #cva #classvarianceauthority

[@frontendfyi]

We’ll be approaching this like a real project. So at the beginning of the next video, I will also work on a few small improvement left overs from this first video. I noticed for example that when adjusting your window size from desktop to mobile you briefly see the animation occur - we should fix that! And we should still add a scroll lock to the page when the navigation is opened, so you can only scroll the navigation and not the full page at the same time. I hope you’re just as excited for the next video as I am 🙏🔥

[@kokhant7068]

This channel is so underrated, I can’t even find this kind of tutorial in paid classes

[@frontendfyi]

Such a huge compliment. Thank you so much ❤️ I am thinking about making more of these series, some probably need to be paid to make this sustainable at all, since they take a lot of time to make. But to also make it accessible to all I’m thinking about making one lifetime payment for frontend.fyi, which gives you access to all videos I will produce in the future. Makes it also easier to expense it on your learning budget I think.

[@zaabimahdi]

Video published in 2022, but still the best frontend tutorial ever seen on youtube !

[@frontendfyi]

Soooo kind 🙏 Wanna make more of these! If you have any idea for a rebuild, let me know!

[@synthesis44]

This video is for the people who wants the best practices and proper way of coding in Next JS. Well done!

[@lorisyanis]

I've been searching for this kind of high-quality content for a while! Thank you so much for giving us this!

[@frontendfyi]

Thank you so much!! You’ll be in for a treat with my upcoming video then! Just recorded 4,5 hours worth of content for a single rebuild 🔥

[@lorisyanis]

​@@frontendfyi Amazing! Looking forward to watching it!

[@adrianlineweaver4725]

Just found your channel and wow! Seeing the thought process and how you do it is a way better way of learning than a tutorial structure that leaves you wondering why. Love your style so far keep it up!

[@frontendfyi]

Thank you so much for your kind words! Really appreciate it!

[@mashrukul]

Thanks to the algorithm, I stumbled across this channel. Wait till few months, this channel's gonna blow up. Glad to be among the 500 subs.

[@nyashachiroro2531]

I know right 😂😂😂 This is golden. The tutorial is so good.

[@frontendfyi]

Thank you so much both 🙏

[@TheKosmicCraftsman]

high quality video! looking forward to your upcoming projects. thanks a lot!

[@frontendfyi]

Thank you so much! 🙏

[@Ivan-wm6gm]

Thanks for making this quality content, I've seen a lot of rebuilding website videos but only a few of them produce real world best practices like yours. Kudos for sharing your knowledge

[@frontendfyi]

Thanks a lot! Really appreciate your kind words 🙏 They motivate me to keep going with this!! Part 2 coming very soon!

[@ricardomoreira1556]

Sir, your content is pure gold. Please keep it going! You're not only technically awesome, you're great @ teaching!

[@frontendfyi]

Thank you so much 🙏

[@sreekar_s]

Awesome video. It's rare to see videos of this quality. Especially maintainable code. Kudos to you sir

[@frontendfyi]

Thank YOU for your kind works 🙏

[@WellDMLT]

My favorite channel dev ever! 🥳

[@lazminutes]

I really enjoyed it. Please keep making more content like Rebuilding with tailwind. 🥺

[@frontendfyi]

Thanks a lot! Definitely will make more videos 😁

[@ReadyDesignerOne]

Great tutorial, keep up the great work

[@anandhukraju9382]

This is gonna be crazy!

[@frontendfyi]

Thanks - it will 🔥

[@AM-nm6ts]

thank you for this great content :) thank you so much, I am really happy so see such quality of tutorial on youtube.

[@frontendfyi]

Thanks a lot for your kind words 🙏

[@manuarora]

Can't thank you enough! 👑

[@j0rin]

this channel is amazing

[@OleksandrPanteli]

great content. keep it up!

[@bromgens9938]

Great video! Awesome channel! 💪

[@frontendfyi]

Thanks 🥰

[@melchiorfu]

Amazing!

[@iUmerFarooq]

Amazing channel I found. Want to see this series complete and fully functional website 😃 Thank you :) Love from Pakistan ❤️

[@frontendfyi]

Thanks for your kind words! Love from the Netherlands ❤️

[@mahmoudali-id5dx]

That was awesome .

[@frontendfyi]

Thank you so much! There’s also a part 2 already waiting for you 🔥

[@ExileEditing]

Your channel is going to take off eventually. I really appreciate you trying to tackle this as a real project. I'm pretty new to Next and React in general so it's great that you're showing a more professional approach. I'm sick of videos that just spam countless amounts of divs and the project is just very lazy with little to no components. If they do use components they're usually useless. Thanks for the time and effort you're putting into these videos. As my first big project with Next I'm attempting to make a bug tracker. Nothing too crazy with it but it's still a pretty big project for how little experience I have with it. But yeah watching you approach this like a real project is going to help me structure my projects bettter. One thing though and I typically I don't complain about this but I think you go a little too fast at some points. When you have prettier auto-sorting tailwind and you dont wrap lines it gets very confusing especially when you cut the video. Also sometimes you cut part of the video when you made changes but you don't explain them or say that you made changes.

[@kapott_]

Agree, love seeing the professional approach - being the person "looking over your shoulder" whilst he creates this feels much more "this is how it's done by a professional" then any tutorial out there. This channel will be huge!

[@frontendfyi]

🥹 - you guys are way too kind! 🙏 Thank you so much! @Exile Thanks for your feedback! Please keep it coming! I do agree with your points, noticed some of them myself as well. Will try to improve them in the next video again. Please let me know if you think they’ve improved next time! 😁 About the line wrapping; do you think that would improve the readability? Or should I perhaps disable to auto sorter? With line wrapping I sometimes have the feeling that people get confused as to why text is on the next line, which actually isn’t. Would love to hear your opinion about it.

[@ExileEditing]

@@frontendfyi honestly I'm not sure what the best approach is. Typically you want code and editor side-by-side but I've seen a decent amount of content creators have their editor full screen and then they tab out to the browser. Which means when I have my editor and the video open side-by-side the text doesn't get too small to read. Or maybe some of them are recording whatever browser is in focus? I'm not too sure. I personally wouldn't mind line wrapping as I use it myself even though I can see how it might be annoying for others. I think if you're going to keep the auto sort you may need to just slow down before saving/sorting or enable line wrapping so we can see where it goes.

[@frontendfyi]

Thanks a lot for your sharing your opinion! I will give this another thought as well. Very much appreciated.

[@kapott_]

Nice! Love this step-by-step!

[@nyashachiroro2531]

This is a great channel.

[@frontendfyi]

Thanks a lot! 🙏

[@fahmi2978]

This is top tier channel

[@frontendfyi]

Thank you so much for saying that 🥰

[@divmode2059]

Do you happen to go over creating the filtering system inside linear? Love how they did it.

[@0xmigue]

YOU ARE THE GOAT

[@frontendfyi]

YOU GOAT’A BE KIDDING ME ❤️🙏

[@dinhkhanh]

deserve more view!

[@bibblebabl]

Thanks for the video! It's interesting to see. If you are wondering what can be improved: in my opinion, it would be great if the urll bar could be seen, because it is not always clear which one is open now: localhost or the original website ☺. I would make it not a separate screen at all and do alt+tab or just show the address bar.

[@frontendfyi]

Thanks for the suggestion! Luckily Arc updated the browser last week, so in part 2 you see a very clear blue bar at the top of the page indicating localhost. Hopefully that helps 😁

[@juancruzsilva913]

Excelent video! I was wondering why the wrapper div added at 1:03:00 was needed? why div with the logo and links wasnt expanding 100% height?

[@frontendfyi]

Thanks for the compliment! And great question! The reason I do this is because the wrapper (the Container component) is flexbox. By default the children of that flexbox parent aren't stretched full height if these children are ALSO flexbox (which is the case for that left column). By wrapping the column inside a display block div, it will actually stretch full length, and the flexbox div inside will also expand the full height. Hopefully that's helpful!

[@mrbanana6969]

Great tutorial and very well explained - just have a quick question: when we remove the extends block in the taliwind config (meaning we only use the theme as set in said config), how come some of tailwind's classes remain and some don't? For example mx-auto remains but text-white is removed? Hope this makes sense

[@frontendfyi]

Thanks a lot 🥰 As for the question; when removing extend you're actually only removing classes that are based on things like sizes, colors, font-sizes, etc. These sizes trickle down in for example margin. But since 'auto' isn't a size that you specify manually, these stay and can still be used.

[@LinearApp]

👏

[@frontendfyi]

Thank you so much for commenting 🥹

[@Phonosheet]

Excellent tutorial on so many levels! I was wondering about the extensions you use in VSCode. I have been following the video with PHPStorm but the level of autocompeltion / auto-import is astounding. Any insights would be greatly appreciated ^_^

[@frontendfyi]

Haha amazing to hear. I would definitely give VSCode a try! The main things autocompleting on my end are the following plugins I think; - Using TypeScript in general gives you a lot of autocompletion - Tailwind CSS plugin - Using Prettier for formatting, sorting, etc - And last but not least Github Copilot for aaaalll the smart auto completions. Definitely check this one out.

[@tough_year]

What extension you use that colors the rgba value background in VSCode? The default I have puts a square in front of the color code - [ ]rgba(1,1,1,1) .

[@joelundso]

Hey Jeroen, first of all: awesome content! 🚀 I'm using this code-along project to get acquainted with a bunch of things that are almost completely new to me (React, NextJS, Tailwind). This is so much more effective than reading docs or watching theoretical tutorials 🙏 Quick question: I noticed you have a couple of plugins installed or applied special formatting, like auto-suggesting code or having the color box in front of hex codes. Could you tell me what these are or which plugins you recommend we install for making our lives easier while coding along? Thanks! Greetings from Germany Joel

[@frontendfyi]

Hey Joel! Thanks a lot for your complements 🙏 I think it might be a great idea to create a page where I can list all the tools I use actually! For now I've listed the most important tools here; * Prettier (auto formatting) * Prettier Tailwind plugin (install via npm, not a browser extension) * Github Copilot (auto suggestion with AI) * Color Highlight vscode extension * Finally using TypeScript also makes your editor a lot smarter, so it can suggest a lot more. These are the most important tools. I'll also start adding a page to the frontend.fyi website soon where I list them and also explain a bit more about them :) Thanks for that suggestion!

[@joelundso]

@@frontendfyi Hey Jeroen, thank you so much for the list! Will make sure to check out your website :) Btw, I'm using this course to rebuild the website of my startup from the ground up. Would love to see more courses like these that maybe even dive into advanced stuff (how to set up a blog library + blog post pages, making sure the whole website follows technical SEO best practices, or even setting up the website to be multilingual). Would also be more than happy to pay for something like this :) Thought I just leave this feedback here - have a great day!

[@frontendfyi]

Hey Joel! Thank you so much for these great suggestions! Super valuable! I will absolutely use this as inspiration! I’ll soon be updating the frontend.fyi website even more, adding a pro section with paid videos. Your idea could definitely be one of the series! I’ve decided to go for a one time purchase lifetime access, instead of a subscription model. Hope it’s something that fits your needs! Soon more on my website 😁

[@dennisaarts7924]

Great content and great explanation of the choices you made. I have one question though. In start of the video you stopped extending tailwind and create your own properties. Why use tailwind at all and not , for example, use Sass to create your variables etc?

[@frontendfyi]

Good question! Actually Tailwind also provides all of the utility classes, which in SCSS I'd all have to create from scratch. So even though I'm not extending tailwinds default theme, that doesn't mean that it's not generating all of the spacing, width, height, border, shadows, etc etc classes anymore.

[@dennisaarts7924]

@@frontendfyi Ah, makes sense! I misunderstood the overwriting Tailwind part then. I assumed when overwriting tailwind, you overwrite everything. But you overwrite only the things in the config file. Thank you for your answer!

[@qinkanglu8280]

Great video! May I ask what vscode plugin do you use for all those autocomplete?

[@frontendfyi]

It is the default recommended tailwind extension for vscode. More here: tailwindcss.com/docs/editor-setup

[@sreekar_s]

I think person is asking about copilot?

[@frontendfyi]

Ooooh! That could very well be indeed! github.com/features/copilot

[@ryomensukuna9513]

😘🔥

[@JoshLearningFrontend]

Would you be able to share the Vs Code theme and font you used in this video, I really like it

[@frontendfyi]

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

[@FrontendSquad]

Thanks for great content, What's your theme?

[@frontendfyi]

Thanks! I use Cobalt2 by Wes Bos: marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2

[@MDEM-nw4qy]

Hello! I've been following your tutorial since this morning. I learned a lot of things. thank you a lot. please for the next tutorial. can you explain the important things or the decisions you take more in details. sometimes it's hard to understand why you're doing this or that. and please can you zoom a little or increese the font of vscode. but sincerely I am happy to have discovered your channel.

[@frontendfyi]

Thank you so much! And absolutely, will do my best to take this into account. For the font size I found that the next zoom level would actually be just too big, having the lines cut off a lot earlier. I’ll experiment a bit more with it though 🙏 Thanks for sharing your feedback! Also please let me know if you have any specific examples you think I could have explained better. Helps me as well!

[@djameleddine1247]

Hello! first thank you a lot for the great content and I am really happy to find someone who teach only frontend. I learned a lot, THANK YOU❤❤ I have 2 questions please :why you didn't create a component for desktop navbar and another for mobile sidebar? For me it's more readable that way. 2- when I click on the icon my sidebar is displayed. but at the same time I can scroll. the content of the page behind the sidbar. in my opinion I have to create a context to distribute the state of the sidebar (if open or closed) to the header.tsx and then to main which is in layout.tsx. and then i create a condition in layout if it is open i i add a class like height: 100vh; overflow-y:hidden; is the right thing to do please thanks again

[@frontendfyi]

Thank you so much @djamel! As for your questions: 1. I agree that having 2 menu's for both desktop and mobile can be better for readability. However, most of the times that also means that these elements are both at the same in the DOM as well. And that is actually something that's really bad for SEO. Google doesn't like duplicate content, and especially not if it's full of links (which your main navigation is). So this could negatively impact your SEO ranking. That's the main reason I always do my very best to only have one navigation. 2. Very good point! In part 2 I actually fixed exactly this issue 😁 I do this by setting a className on the HTML node indeed, which does not require to have context. Definitely check out that video! kzbin.info/www/bejne/iGazm4GZfsl0sLc

[@djameleddine1247]

@@frontendfyi what I can say! THANK YOU SO MUCH, THANK YOU for your time and answer . بارك الله فيك شكرا

[@frontendfyi]

Glad it was of help 🙏

[@tolluset]

What is the name of sidebar extensions on browser that you use to change tabs.

[@frontendfyi]

The browser is called Arc by thebrowser.company/

[@AM-nm6ts]

Please if you want and when you have time, could you make a short video about classnames package. it bugged my brain. thanks a lot

[@frontendfyi]

Is the first part in the Usage chapter of their readme of any help? Any specific things you find confusing? github.com/JedWatson/classnames

[@AM-nm6ts]

@@frontendfyi thanks a lot

[@pb8655]

Noon question sorry 42:39 how did you grab the hamburger icon so quickly

[@frontendfyi]

Not a noob question at all! There was definitely a small cut that I did in that part of the video. So it actually took a bit longer. But what you can do is inspect the SVG element, make sure the right element is selected in the element inspector, and than press cmd + c / ctrl + c, and it copies the full source of the icon. Hope that helps!

[@pb8655]

@@frontendfyi aah ok that makes sense! I thought there was some fancy keyboard shortcut that I was unaware of. Appreciate you responding btw, earned a sub! 🙌🏽

[@venomweed]

Why does he dress like Steve jobs?

[@frontendfyi]

😂😂😂

[@jeflopodev]

​@@frontendfyi​You could also feature the mind blown gif and do a HQ version haha media.tenor.com/n37K-33vd0QAAAAC/mind-blown.gif