- 26
- 107 554
Mind-Boggling
Приєднався 26 сер 2022
Coding for fun.
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
**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
Thank you for this precious guide, it's like part of the documentation for me, you gave ma a big help💯
const handleDelete = () => { setTask((currenttask) => currenttask.filter((_, idx) => idx !== index) ); };
Best beginner level projects, very Beneficial playlists, in search of gold we found gem.
Can you please share the source code for this project.
thankyou very much for this video, new thing in my portfolio! I needed to do it, THANKS!!
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
Now I have to follow you, you're a lifesaver
Great stuff! Helped a lot!
I like your way teach. Please make a full react tutorial that cover everything.
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!
Thank you so much. This tutorial is so helpful to setting up a blogging portfolio
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
tks, nice video
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..
so useful tutorial. thaks
liked YOU sooooo much DOLL
How many of you miss zoom-in on this video?
you have such a beautiful voice! ❤
You are amazing! Thank you so much! It is very helpful! 😍😍 can i please get the source code?
Thanks for this project Im extra using editing functionality in Boards.jsx
Unlike most who massively overcomplicate the basics, this was perfectly explained. Thank you
Good ❤❤
i learnt a lot from this project
This was useful for me
More more more! Your context flow is amazing and easy to understand. 😊
i didn't understand its complex you better start with useReducer Hook directly why you done with starting un used code
love youuuu
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
taskList is not iterable i am getting this error
Great video! looking forward to the next one 👍
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..!
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 ...
And yes, I am very interested to know how to build newsletters with Sanity content!
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.
worth watching ! feel lucky to found instructor like u
Thanks! It really help and its so simple to understand
very underrated channel
You are awesome 😎. Everything is crystal clear !
Holy cow, for the first time in years I'm finally starting to understand react hooks😢thank you
holy buffalo
thank you so much. I've been struggling to do this setup with next 14 and app routes
Really good tutorials
Hi, I loved your tutorial, I just had one problem... I can't style my website, could you help me?
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.
Good explaination
Excellent and informative tutorial, I learned a lot!
Can you share your user json settings?
Great tutorial👍👍👍👍👍👍👍
tutorial plss
such beauty voice 🥰
so how can we add prompts in our fields object?