In this video, we will build the Homepage UI of our blogging site.
‘Build your own blog’ is video series where I will teach you how to build a Jamstack blogging website with react, nextjs, and markdown.
Check the full video series from here: https://www.youtube.com/watch?v=dMGdsjmw0q8&list=PLEr-WXao6eSPBeUOaaHnQ1qG22_J5hM1o
The application has:
– Static Blog pages which will make the website load faster.
– Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Twitter and so many other things.
– Autocomplete search feature for the blog posts.
– Real-time view counter and so on.
Technologies we will use are:
– React
– Nextjs
– Chakra-UI
– SWR
– MDX
– Nextjs API Routes
– MongoDB
Resources:
Source Code: https://github.com/thatanjan/cules-blog-yt-chakra-ui
Chakra-UI crash course: https://youtu.be/hJ873mLhmFQ
Responsive image with Aspect Ratio: https://youtu.be/YYxfwDWuPmc
Timestamps:
0:00 Introduction
0:38 Build App Header
8:40 Create Blog Preview Card
19:18 Implement Custom Chakra Link component
32:00 Build App Drawer
41:17 Create Page Layout
44:25 Implement Toggle color mode feature
48:18 Make Logo as a Link
49:42 Outro
About me
Why do I do what I do?
— The Internet has revolutionized our life. I want to make the internet more beautiful and useful.
What do I do?
— I ended up being a full-stack software engineer.
What can I do?
— I can develop complex full-stack web applications like social media applications or e-commerce sites.
What have I done?
— I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories. I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don’t miss the cool stuff.
Want to work with me?
— I am looking for a team where I can show my ambition and passion and produce great value for them.
Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.
Contacts
Email: thatanjan@gmail.com
Linkedin: https://linkedin.com/in/thatanjan/
portfolio: https://thatanjan.me/
Github: https://github.com/thatAnjan/
Instagram personal: https://instagram.com/thatAnjan/
Twitter: https://twitter.com/thatAnjan
Blogs you might want to read:
Eslint, prettier setup with TypeScript and react: https://www.culescoding.space/blog/setup-eslint-prettier-with-typescript-and-react
What is Client-Side Rendering?: https://www.culescoding.space/blog/what-is-client-side-rendering
What is Server Side Rendering?: https://www.culescoding.space/blog/what-is-server-side-rendering
Everything you need to know about tree data structure: https://www.culescoding.space/blog/everything-you-need-to-know-about-tree-data-structure
13 reasons why you should use Nextjs: https://www.culescoding.space/blog/13-reasons-why-you-should-use-Nextjs
Videos you might want to watch:
Setup Eslint Prettier with Typescript and React -Nextjs, Create React App: http://youtu.be/T-n0mrssDiw
Everything you need to know about CSS in JS: https://youtu.be/Be_C_Op8Tx8
Toggle Dark mode with Material-UI: https://youtu.be/ag3je1g0BN8
Build a real-time view counter: https://youtu.be/B3HX2rWyKlU
Build a small search engine with MongoDB: https://youtu.be/C6VytdSDNSk
Playlists you might like:
Build a blog using JAMstack: https://www.youtube.com/watch?v=KYLBb1W1ZBA&list=PLEr-WXao6eSPQzQAlkYpNLfcSm6pTiTpd
Material-UI basics course: https://www.youtube.com/watch?v=grjle8AcQRs&list=PLEr-WXao6eSMddsL31fYlOGdbIk5nT-Pi
Quick tricks: https://www.youtube.com/watch?v=RECwLOZdiR4&list=PLEr-WXao6eSPspqYqDd0ISbLdDbBAIPNR
Crash course: https://www.youtube.com/watch?v=rSa8sUC8m_4&list=PLEr-WXao6eSNuG2mQyV_48RQoj5p8WM_q
How-to videos: https://www.youtube.com/watch?v=T-n0mrssDiw&list=PLEr-WXao6eSOVI5LSBn23tsqCp-pCAwiu
Stay safe and goodbye.
