Mind-Boggling
Mind-Boggling
  • 26
  • 107 554
02. Build A Blog With Next.js and Sanity.io || How To
This is part 2 of how to build a blog with Next.js and Sanity.io. I’m going to show you how to add extra fields to the Sanity studio, how to make more customised queries, and an easier way of displaying the images.
**GitHub Repo**:
github.com/kcxgu/sanity-blog
**Sanity Case Study - Morning Brew Newsletter**:
www.sanity.io/case-studies/morning-brew
Переглядів: 620

Відео

01. Build A Blog With Next.js and Sanity.io || How To
Переглядів 2,2 тис.9 місяців тому
This is part 1 of how to build a blog with Next.js and Sanity.io. I forgot to make the text bigger when I started recording so had to zoom in when I was editing - hope it's not too jumpy! GitHub Repo : github.com/kcxgu/sanity-blog Sanity fetch : github.com/kcxgu/sanity-blog/blob/main/sanity/lib/fetch.ts Sanity queries : github.com/kcxgu/sanity-blog/blob/main/sanity/lib/queries.ts What is Sanity...
04. Accordion FAQ Dropdown Items | Learn Next.js + TailwindCSS In Components
Переглядів 44211 місяців тому
Description: Learn Next.js (TypeScript, App Router) TailwindCSS In Components. All frontend and broken down into useful components so that you can take what you need and build out the website or web platform you have in mind. The idea is that you can learn the basics of Next.js and TailwindCSS and use these individual components as starters for your future projects. 👩‍💻 *Links:* *Repo:* github....
03. Pricing Plan | Learn Next.js + TailwindCSS In Components
Переглядів 17011 місяців тому
Learn Next.js (TypeScript, App Router) TailwindCSS In Components. All frontend and broken down into useful components so that you can take what you need and build out the website or web platform you have in mind. The idea is that you can learn the basics of Next.js and TailwindCSS and use these individual components as starters for your future projects. 👩‍💻 *Links:* *Repo:* github.com/kcxgu/nex...
02. Home / Landing Page | Learn Next.js + TailwindCSS In Components
Переглядів 23611 місяців тому
Learn Next.js (TypeScript, App Router) TailwindCSS In Components. All frontend and broken down into useful components so that you can take what you need and build out the website or web platform you have in mind. The idea is that you can learn the basics of Next.js and TailwindCSS and use these individual components as starters for your future projects. 👩‍💻 *Links:* *Repo:* github.com/kcxgu/nex...
01. Header, Footer, Light Dark Toggle | Learn Next.js + TailwindCSS In Components
Переглядів 90511 місяців тому
Learn Next.js (TypeScript, App Router) TailwindCSS In Components. All frontend and broken down into useful components so that you can take what you need and build out the website or web platform you have in mind. The idea is that you can learn the basics of Next.js and TailwindCSS and use these individual components as starters for your future projects. 👩‍💻 *Links:* *Repo:* github.com/kcxgu/nex...
Hashing and Salting Passwords using bcrypt in Next.js || 4K
Переглядів 3,4 тис.Рік тому
An explainer video for hashing and salting passwords using bcrypt. This is implemented in Next.js but should be the same / very similar in React. *For full conversion of React project into Next.js:* ua-cam.com/video/-lly3vx8CRE/v-deo.html *Original MERN stack project:* ua-cam.com/video/wfdOiezVEeM/v-deo.html *Next.js (TypeScript App Router) and Tailwind CSS Playlist:* ua-cam.com/play/PL9ScwCmt7...
Deploying Next.js Project to Vercel || 4K
Переглядів 282Рік тому
A quick video to show how quick and easy it is to deploy a Next.js project to Vercel. For full conversion of React project into Next.js: ua-cam.com/video/-lly3vx8CRE/v-deo.html Original MERN stack project: ua-cam.com/video/wfdOiezVEeM/v-deo.html
Converting React into Next.js - Events App || Bcrypt + Deploying to Vercel || 4K
Переглядів 333Рік тому
By converting our existing MERN stack events app (ua-cam.com/video/wfdOiezVEeM/v-deo.html) into Next.js and deploying on Vercel, I hope it highlights how NextJS is the next logical step after having a good understanding of React. *Next.js (TypeScript App Router) and Tailwind CSS Playlist:* ua-cam.com/play/PL9ScwCmt70i_rtpLi490UXJcXaj4sEoRV.html *Source code for Next.js project* github.com/kcxgu...
MongoDB Explainer Video || MERN MongoDB Set Up, Post and Get Request
Переглядів 241Рік тому
This is the MongoDB explainer video complementary to the full, 4-hour long MERN events app v0.1: ua-cam.com/video/wfdOiezVEeM/v-deo.html. In this video, we run through how to set it up and how to carry out post and get requests to and from the backend. Some of the reasons why I prefer MongoDB to Firebase : dev.to/coursepilottech/mongodb-vs-google-firebase-which-database-did-we-choose-4f59 Mongo...
Nodemailer Explainer Video + React Dynamic Routes || User Forgot Password
Переглядів 165Рік тому
This is the Nodemailer explainer video (with a bonus of how React Router's useParams works) complementary to the full, 4-hour long MERN events app v0.1: ua-cam.com/video/wfdOiezVEeM/v-deo.html. In this video, we run through the authentication system of forgot password, send email to user with reset password link and reset password. Nodemailer is a Simple Mail Transfer Protocol (SMTP) - the most...
Recoil State Management in MERN Project
Переглядів 115Рік тому
This is the explainer video going through Recoil state management used in the full, no talking 4-hour long MERN event app v0.1: ua-cam.com/video/wfdOiezVEeM/v-deo.html *Recoil Getting Started:* recoiljs.org/docs/introduction/getting-started *Recoil To Do App:* recoiljs.org/docs/basic-tutorial/intro *Github Repos for the full MERN project:* Backend: github.com/kcxgu/queer-events... Frontend: git...
4-HOUR CODE WITH ME || MERN Real Life Events App - ASMR keyboard, mouse click, cafe jazz music
Переглядів 962Рік тому
MERN Queer East and Southeast Asian (ESEA) Events App. “Study With Me” but “Code With Me” - This is a no talking, ASMR video (over 3.5 hours). Feel free to use it as a study or coding buddy or follow along and build your own events schedule app! Explainer videos to come. This is version 0.1 so it’s not perfect in many places, e.g. password security. We will continue to improve on this as we con...
12. Beginner React Redux E-Commerce Checkout with Redux Toolkit || Learn React Through Mini Projects
Переглядів 7 тис.Рік тому
Learn how to manage React states with Redux and the Redux Toolkit library in this simple e-commerce checkout page application. This is styled in the same way as the previous video (ua-cam.com/video/K mHGRi3NM/v-deo.html) where we explored the same checkout logic with React's native useReducer and useContext to maximise the effect of comparing React hooks with Redux in terms of state management....
11. React useContext With useReducer In E-Commerce || Learn React Through Mini Projects
Переглядів 10 тис.Рік тому
Combining the React hooks useContext and useReducer in a simple e-commerce project - an online glasses store. *Repo:* stackblitz.com/edit/react-qlqupl?file=11-usecontext-usereducer-store/src/App.js *useContext:* ua-cam.com/video/WCaNJnoybSA/v-deo.html *useReducer:* ua-cam.com/video/vA_556hkqz4/v-deo.html *Learn React Playlist:* ua-cam.com/play/PL9ScwCmt70i_mNQW-rPkIxjxMcvogSbPc.html *Next.js (T...
10. React useReducer Hook - Simple Log In Form || Learn React Through Mini Projects
Переглядів 2 тис.Рік тому
10. React useReducer Hook - Simple Log In Form || Learn React Through Mini Projects
09. React Drag and Drop Using React DnD Library || Learn React Through Mini Projects
Переглядів 8 тис.Рік тому
09. React Drag and Drop Using React DnD Library || Learn React Through Mini Projects
08. React Podcast Player App ft. OAuth Google Log In || Learn React Through Mini Projects
Переглядів 2,2 тис.Рік тому
08. React Podcast Player App ft. OAuth Google Log In || Learn React Through Mini Projects
07. React useContext Hook (User Context Example) || Learn React Through Mini Projects
Переглядів 2,8 тис.Рік тому
07. React useContext Hook (User Context Example) || Learn React Through Mini Projects
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
Переглядів 2,6 тис.Рік тому
06. React Forms: Dynamically Add New Input Fields On Click || Learn React Through Mini Projects
05. Build a RSS Feed with React and Node.js || Learn React Through Mini Projects
Переглядів 8 тис.Рік тому
05. Build a RSS Feed with React and Node.js || Learn React Through Mini Projects
04. A Study of STATE and PROPS in React Using Coded Examples
Переглядів 2,5 тис.Рік тому
04. A Study of STATE and PROPS in React Using Coded Examples
03. Build a Kanban-Style Task Tracker || Learn React Through Mini Projects
Переглядів 15 тис.Рік тому
03. Build a Kanban-Style Task Tracker || Learn React Through Mini Projects
02. To Do Board || Learn React Through Mini Projects
Переглядів 9 тис.Рік тому
02. To Do Board || Learn React Through Mini Projects
01. Stopwatch/Count-Up Timer || Learn React Through Mini Projects
Переглядів 23 тис.Рік тому
01. Stopwatch/Count-Up Timer || Learn React Through Mini Projects
Build a Time Tracker in HTML, CSS and JavaScript || A Mind-Boggling Project
Переглядів 5 тис.2 роки тому
Build a Time Tracker in HTML, CSS and JavaScript || A Mind-Boggling Project

КОМЕНТАРІ

  • @giulia6930
    @giulia6930 День тому

    Thank you for this precious guide, it's like part of the documentation for me, you gave ma a big help💯

  • @tanishkagupta2200
    @tanishkagupta2200 16 днів тому

    const handleDelete = () => { setTask((currenttask) => currenttask.filter((_, idx) => idx !== index) ); };

  • @MdTabish-q1s
    @MdTabish-q1s 27 днів тому

    Best beginner level projects, very Beneficial playlists, in search of gold we found gem.

  • @Zaid-j9p
    @Zaid-j9p 29 днів тому

    Can you please share the source code for this project.

  • @candulapopworld
    @candulapopworld Місяць тому

    thankyou very much for this video, new thing in my portfolio! I needed to do it, THANKS!!

  • @studying3289
    @studying3289 Місяць тому

    if you delete the task eather on "todo" or "completed" part, task will be deleted from both of them despite of how many same tasks exhist How to delete those tasks one by one

  • @sylvesterstephen4749
    @sylvesterstephen4749 2 місяці тому

    Now I have to follow you, you're a lifesaver

  • @elie2222
    @elie2222 2 місяці тому

    Great stuff! Helped a lot!

  • @yasirhusain38
    @yasirhusain38 2 місяці тому

    I like your way teach. Please make a full react tutorial that cover everything.

  • @kirubelmesfin6071
    @kirubelmesfin6071 2 місяці тому

    I am telling you are better than the documentation I read I setup everything really fast because of you. Thank you very much you have earned a sub!

  • @JDUDEadventure
    @JDUDEadventure 2 місяці тому

    Thank you so much. This tutorial is so helpful to setting up a blogging portfolio

  • @jaydenwalker-vc8nx
    @jaydenwalker-vc8nx 2 місяці тому

    Hello; here is the easy step in deleting an item import { useState, useCallback } from "react"; import Input from "./Input"; import ListItems from "./ListItems"; const Items = () => { const [items, setItems] = useState([]); const handleDelete = useCallback( (id) => { const deleteItems = items.filter((item) => item !== id); setItems(deleteItems); }, [items] ); return ( <> <div> <div className="center"> <div> <Input setItems={setItems} /> </div> </div> <ListItems items={items} handleDelete={handleDelete} /> </div> </> ); }; export default Items; And for the child component import React from "react"; const ListItems = ({ items, handleDelete }) => { return ( <div> <ul> {items && items.map((item) => ( <li key={item}> {item} <button onClick={() => handleDelete(item)}>Delete</button> </li> ))} </ul> </div> ); }; export default ListItems; This should be easy version of deleting an item

  • @KiraTechTKpremium
    @KiraTechTKpremium 2 місяці тому

    tks, nice video

  • @kasivishva3183
    @kasivishva3183 2 місяці тому

    Well problems in this Component was When we add multiple products it will added Again, not showing the count of the product in Home page and Basket Page.These types of things you have to do To improve your skills,.And About the vedio.Can you Please Explain Slowely and code Slow..

  • @requiemx6038
    @requiemx6038 3 місяці тому

    so useful tutorial. thaks

  • @nouarchami9007
    @nouarchami9007 4 місяці тому

    liked YOU sooooo much DOLL

  • @YourStatus24
    @YourStatus24 4 місяці тому

    How many of you miss zoom-in on this video?

  • @baazigar5
    @baazigar5 5 місяців тому

    you have such a beautiful voice! ❤

  • @baazigar5
    @baazigar5 5 місяців тому

    You are amazing! Thank you so much! It is very helpful! 😍😍 can i please get the source code?

  • @sathiyapriyan382
    @sathiyapriyan382 5 місяців тому

    Thanks for this project Im extra using editing functionality in Boards.jsx

  • @stuarttaylor5538
    @stuarttaylor5538 5 місяців тому

    Unlike most who massively overcomplicate the basics, this was perfectly explained. Thank you

  • @MuhammadAwais-vl3uk
    @MuhammadAwais-vl3uk 6 місяців тому

    Good ❤❤

  • @muhammadfachrurrozi8128
    @muhammadfachrurrozi8128 6 місяців тому

    i learnt a lot from this project

  • @abhishekraghav7123
    @abhishekraghav7123 6 місяців тому

    This was useful for me

  • @AbelsColdSweat
    @AbelsColdSweat 6 місяців тому

    More more more! Your context flow is amazing and easy to understand. 😊

  • @jaideep9376
    @jaideep9376 6 місяців тому

    i didn't understand its complex you better start with useReducer Hook directly why you done with starting un used code

  • @mahamaneirochapiou4388
    @mahamaneirochapiou4388 6 місяців тому

    love youuuu

  • @illuminaughty666
    @illuminaughty666 7 місяців тому

    Thanks! How about creating a 3 part making it SEO friendly by adding sitemap, robots.txt and OG images DYNAMICALLY. Nobody have upload this on yt yet

  • @chiragkumar6788
    @chiragkumar6788 7 місяців тому

    taskList is not iterable i am getting this error

  • @mickeyeng
    @mickeyeng 7 місяців тому

    Great video! looking forward to the next one 👍

  • @JorgeRivera-rp1zw
    @JorgeRivera-rp1zw 7 місяців тому

    Liked me your video . I saw a lot of videos and always they let the decrease button with -1, -2 never stop with minus. You at first let the decrease button in stop once reach 1 . Pretty nice..! Gave my like and suscribed..!

  • @SGNetz
    @SGNetz 7 місяців тому

    Unfortunately, I cannot render the project with the [slug] folder via npm run build. Type error: Page "app/[slug]/page.tsx" does not match the required types of a Next.js Page. "generateStaticParms" is not a valid Page export field. Error: Command "npm run build" exited with 1 I would have liked a little more clarification here ...

  • @Terresa_P
    @Terresa_P 8 місяців тому

    And yes, I am very interested to know how to build newsletters with Sanity content!

  • @johnhubler5905
    @johnhubler5905 8 місяців тому

    Does this continue to work if you switch to another browser tab? Whenever setInterval() is invoked, if you go to another browser tab, the browser will throttle setInterval tasks. Currently trying to build something similar, but work around this issue.

  • @capK29
    @capK29 8 місяців тому

    worth watching ! feel lucky to found instructor like u

  • @techzone-official5806
    @techzone-official5806 8 місяців тому

    Thanks! It really help and its so simple to understand

  • @nahidShimanto
    @nahidShimanto 8 місяців тому

    very underrated channel

  • @prinzadamz
    @prinzadamz 8 місяців тому

    You are awesome 😎. Everything is crystal clear !

  • @HOPEDACODER
    @HOPEDACODER 8 місяців тому

    Holy cow, for the first time in years I'm finally starting to understand react hooks😢thank you

  • @jampietri583
    @jampietri583 8 місяців тому

    thank you so much. I've been struggling to do this setup with next 14 and app routes

  • @arnd12940
    @arnd12940 8 місяців тому

    Really good tutorials

  • @gabrielgg5128
    @gabrielgg5128 8 місяців тому

    Hi, I loved your tutorial, I just had one problem... I can't style my website, could you help me?

  • @Shadel.
    @Shadel. 8 місяців тому

    What's your problem? You write too fast and you can't even explain what you are doing. This is not for teaching purposes at all. I'm sorry but this video is not successful.

  • @arnd12940
    @arnd12940 8 місяців тому

    Good explaination

  • @simenkristoffersen411
    @simenkristoffersen411 9 місяців тому

    Excellent and informative tutorial, I learned a lot!

  • @Lyric-w1r
    @Lyric-w1r 9 місяців тому

    Can you share your user json settings?

  • @dannyeyeman
    @dannyeyeman 9 місяців тому

    Great tutorial👍👍👍👍👍👍👍

  • @aranetaivancarl5459
    @aranetaivancarl5459 9 місяців тому

    tutorial plss

  • @AndriiStreange
    @AndriiStreange 9 місяців тому

    such beauty voice 🥰

  • @kewlkeat
    @kewlkeat 9 місяців тому

    so how can we add prompts in our fields object?