Mr. Shadrack
Mr. Shadrack
  • 78
  • 203 971
Blog App with React.js and json-server
In this video we test a simple react.js blog app with json-server
#reactjs #javascript #api #restapi #nodejs #json #frontend #server
First Video: ua-cam.com/video/53VLH0iAZ_k/v-deo.html
Read my article about json-server
medium.com/@mistershadrack/effortlessly-mock-apis-with-json-server-a-comprehensive-guide-for-developers-7aee507bbce6
Переглядів: 187

Відео

Json-Server Complete tutorials | Mock REST API
Переглядів 1663 місяці тому
In this video, we take a how to effortlessly Mock APIs with json-server. json-server is a Node.js package, it is a powerful and lightweight tool that allows developers to set up a full fake REST API with zero coding in less than 30 seconds. #javascript #api #restapi #nodejs #json #frontend #server Second Video: ua-cam.com/video/53VLH0iAZ_k/v-deo.html Read my article about json-server medium.com...
Advanced JavaScript console methods you should know
Переглядів 4483 місяці тому
JavaScript's console object offers several useful methods for debugging and logging information in web development, apart from the commonly used console.log. Here are some other important methods we will explore in those video. #javascript #console 00:00 Intro 02:29 console.error 04:00 console.warn 05:01 console.info 05:34 console.table 09:03 console.group 15:11 console.time 18:13 console.asser...
Notes App with Rich Text Editor using React.js and Supabase
Переглядів 4693 місяці тому
#notesapp #richtexteditor #supabase #reactjs In this video, we create a simple but cool note-taking app with RichTextEditor using React.js and Supabase plus mantine dev. Demo: ms-quick-notes.netlify.app/ Source Code: github.com/Ankomahene/quick-notes Twitter (X) x.com/mrshad_official Linkedin www.linkedin.com/in/shadrack-ankomahene-5a393311a/ Github github.com/Ankomahene
Build a Video Call App in minutes using ZEGOCLOUD & REACT.JS
Переглядів 5815 місяців тому
Get ZEGOCLOUD UIKits with 10000 free mins: bit.ly/3Uvu35l Take Advantage of ZEGOCLOUD: bit.ly/3Jt4knA 100% customized video call SDK: bit.ly/3Uq5B57 How to build a video call App: bit.ly/49UCqeR ZEGOCLOUD video call SDK & API allows you to easily build your live video chat apps within minutes. #zegocloud #videocall #web #sdk #api 00:00 Introduction 01:18 Demo 05:12 Signup to ZEGOCLOUD 07:05 Cre...
Transactions App for small business using Next.js & Supabase | Track Sales & Expenses
Переглядів 2,3 тис.6 місяців тому
In this video, we will create a Business Transactions App with Next.js and Supabase. This app is used to track sales and expenses over time. Source Code: github.com/Ankomahene/profit-pulse-tut Twitter mister_shadrack Linkedin www.linkedin.com/in/shadrack-ankomahene-5a393311a/ Github github.com/Ankomahene #nextjs13 #nextjs14 #supabase #mantine #reactjs
Supabase Authentication with Next.js Server actions: Sign up | Login | Logout | Reset Password
Переглядів 9 тис.8 місяців тому
Authentication is generally crucial in any web application to manage users. So what's the agenda today? We are going to Create an authentication flow for users to be able to Sign up, Login, Logout, and also Reset their Password using Supabase Auth and Next.js App router with server actions and @supabase/ssr package Source Code: github.com/Ankomahene/supabase-auth-tut/tree/feature-tut 00:00 Intr...
Car Rental Platform - Next.js 14 / 13.5 with Supabase - Part 4
Переглядів 68810 місяців тому
Demo ua-cam.com/video/UM8bZP-dkZ8/v-deo.html Part 1 ua-cam.com/video/hmBf6yAnyg8/v-deo.html Part 2 ua-cam.com/video/iOSr0RZ1ij4/v-deo.html Part 3 ua-cam.com/video/AkrXlonGzuc/v-deo.html Source Code: github.com/Ankomahene/car-go-rentals 00:00 Intro to Part 4 02:33 Creating Car list page and UI 45:53 Supabase tables 01:09:46 Import CSV data 01:11:37 Using React Query 01:21:19 Fetching Countries' ...
Car Rental Platform - Next.js 14 / 13.5 with Supabase - Part 3
Переглядів 71011 місяців тому
Demo ua-cam.com/video/UM8bZP-dkZ8/v-deo.html Part 1 ua-cam.com/video/hmBf6yAnyg8/v-deo.html Part 2 ua-cam.com/video/iOSr0RZ1ij4/v-deo.html Source Code: github.com/Ankomahene/car-go-rentals 00:00 Intro to Part 3 02:52 Wiring Auth UIs 13:02 Hide Auth Buttons on Auth Pages 16:45 Custom Scrollbar 18:55 Create Supabase Account 23:01 Supabase setup with Next.js app router 32:13 Signup 01:05:40: Login...
Car Rental Platform - Next.js 14 / 13.5 with Supabase - Part 2
Переглядів 1 тис.11 місяців тому
Demo ua-cam.com/video/UM8bZP-dkZ8/v-deo.html Part 1 ua-cam.com/video/hmBf6yAnyg8/v-deo.html Source Code: github.com/Ankomahene/car-go-rentals 00:00 Introduction to Part 2 00:34 Navbar/Header 25:35 Theme Switcher 32:32 Light & Dark Theme 42:02 Mobile Navigation 01:01:20 Landing (Hero & Slider ) 01:18:03 Cars Search Engine 01:41:29 Map 01:56:01 End of Part 2 Twitter mrshad_official #c...
Car Rental Platform - Next.js 14 / 13.5 with Supabase - Part 1
Переглядів 1,5 тис.11 місяців тому
Demo ua-cam.com/video/UM8bZP-dkZ8/v-deo.html Part 1 ua-cam.com/video/hmBf6yAnyg8/v-deo.html Part 2 ua-cam.com/video/iOSr0RZ1ij4/v-deo.html Source code: github.com/Ankomahene/car-go-rentals Packages to install mantine npm i @mantine/core @mantine/hooks @mantine/form @mantine/dates @mantine/carousel @mantine/next supabase npm i @supabase/auth-helpers-nextjs @supabase/supabase-js react query npm i...
Car Rental Platform - Next.js 14 / 13.5 with Supabase - Demo
Переглядів 2,4 тис.Рік тому
In this Project, we will build a complete Car Rental Platform with Next.js 14 or 13.5 and Supabase. Started Building the Project in Next.js 13 but after I finished Next.js 14 was released so I upgraded to Next.js 14 and Everything works exactly the same way. Source Code: github.com/Ankomahene/car-go-rentals #nextjs13 #nextjs14 #supabase #mantine #cloudinary #reactjs #reactquery #reactleaflet #c...
Custom Light and Dark Theme in React.js
Переглядів 88Рік тому
Custom Light and Dark Theme in React.js #reactjs #theme #darktheme lighttheme
Easily add pagination in react.js using this simple hook
Переглядів 517Рік тому
In this video, we will look at how to quickly implement pagination in your React apps using a straightforward and easy-to-use hook. #pagination #reactjs #hook #usePagination #mantine
CSS Box Shadow Generator App with React.js, Vite & Tailwindcss
Переглядів 385Рік тому
#css3 #boxshadows #box_shadows_generator #reactjs #tailwindcss #vite In this video, We are going to build our own CSS Box Shadow Generator app from scratch! Our CSS Box Shadow Generator app will feature an intuitive interface with adjustable sliders and color pickers, giving you full control over the blur, spread, color, and position of your box shadows. You'll see the changes happening in real...
E-commerce Store with Next.js 13, Sanity.io, Chakra, TypeScript, Swiper | Pagination | Auth - Part 3
Переглядів 3,4 тис.Рік тому
E-commerce Store with Next.js 13, Sanity.io, Chakra, TypeScript, Swiper | Pagination | Auth - Part 3
Turn your Figma Designs into Frontend (React.js) Code
Переглядів 16 тис.Рік тому
Turn your Figma Designs into Frontend (React.js) Code
How I use chatGPT as a Frontend Developer | #1
Переглядів 1,1 тис.Рік тому
How I use chatGPT as a Frontend Developer | #1
E-commerce Store with Next.js 13, Sanity.io, Chakra, TypeScript, Swiper | Pagination | Auth - Part 2
Переглядів 4,5 тис.Рік тому
E-commerce Store with Next.js 13, Sanity.io, Chakra, TypeScript, Swiper | Pagination | Auth - Part 2
E-commerce Store with Next.js 13, Sanity.io, Chakra, TypeScript, Swiper | Pagination | Auth - Part 1
Переглядів 14 тис.Рік тому
E-commerce Store with Next.js 13, Sanity.io, Chakra, TypeScript, Swiper | Pagination | Auth - Part 1
Sanity.io v3 and Grok queries | Headless CMS | All you need to know
Переглядів 1,2 тис.Рік тому
Sanity.io v3 and Grok queries | Headless CMS | All you need to know
5 Beautiful CSS Animated Buttons | Learn How to Create
Переглядів 228Рік тому
5 Beautiful CSS Animated Buttons | Learn How to Create
Create a Custom Text Editor like CodePen or VS-Code in React.js | The Best online code editor
Переглядів 1,5 тис.Рік тому
Create a Custom Text Editor like CodePen or VS-Code in React.js | The Best online code editor
Loan Payment App with React and Context API
Переглядів 566Рік тому
Loan Payment App with React and Context API
Swiper.js | Custom Navigation Buttons | React
Переглядів 34 тис.Рік тому
Swiper.js | Custom Navigation Buttons | React
Simple Chat App | React + Redux | No Socket.io | Multi tabs syncing
Переглядів 4,2 тис.2 роки тому
Simple Chat App | React Redux | No Socket.io | Multi tabs syncing
CSS wave loader animation effect
Переглядів 1022 роки тому
CSS wave loader animation effect
CSS Flexbox tutorials
Переглядів 372 роки тому
CSS Flexbox tutorials
10 conclusion & resources | CSS Flexbox Module
Переглядів 182 роки тому
10 conclusion & resources | CSS Flexbox Module
#9 flex shrink | CSS Flexbox Module
Переглядів 162 роки тому
#9 flex shrink | CSS Flexbox Module

КОМЕНТАРІ

  • @IsaacMensah-k6m
    @IsaacMensah-k6m 27 днів тому

    may God bless u for ur good job

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

    In the third part of this tutorial, you will be distracted as a viewer It is better not to waste your time to see this course, which leaves the educational track in the middle of it This tutorial is not worth watching, you will find out in the third part

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

    In the third part of this tutorial, you will be distracted as a viewer It is better not to waste your time to see this course, which leaves the educational track in the middle of it This tutorial is not worth watching, you will find out in the third part

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

    In the third part of this tutorial, you will be distracted as a viewer It is better not to waste your time to see this course, which leaves the educational track in the middle of it

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

    You were awful in this episode You forgot the training line that you had in the previous two episodes and you don't remember what you were doing at all That's why I dislike all parts of your training so that you learn not to waste my time and others.

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

    Please upload part 5 rental car

  • @mr.shadrack
    @mr.shadrack Місяць тому

    Source Code: github.com/Ankomahene/car-go-rentals

  • @mr.shadrack
    @mr.shadrack Місяць тому

    Source Code: github.com/Ankomahene/car-go-rentals

  • @mr.shadrack
    @mr.shadrack Місяць тому

    Source Code: github.com/Ankomahene/car-go-rentals

  • @ahmad-elshowair
    @ahmad-elshowair Місяць тому

    i was stuck with the forgoting password issue and the auth session missing error, millions of thanks

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

    I'm having trouble resending a verification email after the first verification link has expired. When a user tries to use the expired link and code, the email verification fails, which is expected. However, I’m not sure how to properly trigger sending a new verification email. Does anyone knows how to do it? :((

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

    waiting part 5

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

    I appreciate your taking the time.I appreciate your taking the time ♥

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

    please upload part 5

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

    Why not upload after part 4?

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

    Great video, pal

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

    Please add timestamps.

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

    You are the best, let me subscribe

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

    Thanks God bless you

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

    Please what is the vs code extension

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

    i got this error exchangeCodeForSession AuthApiError: invalid request: both auth code and code verifier should be non-empty meanwhile i am sure that i had the code in the url and also in the console.log

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

      I have the same did you find a fix?

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

    Very useful. Thanks for this video. ❤

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

    Very informative and useful tips .

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

    the code's there, it's just in the dev branch and not in the main one

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

    Thank you!!

  • @MiteshPadariya-h1w
    @MiteshPadariya-h1w 4 місяці тому

    Can we have the same solution with normal javascript and css? I am having trouble when slides per view is 3 or more.

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

    Nice! One question, why didn't you useState hook to store the starDate and endDate instead of params?

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

    its very helpful . thanks

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

    Thanks!!

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

    thank you so much bro, big help for me<3

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

    Very helpful, thank you!

  • @data-IndieHacker
    @data-IndieHacker 5 місяців тому

    thanks man, great video 🚀

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

    Any github source code 🎉🎉🎉 thanks

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

    First

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

    Thank you Sir

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

    Really helpful! thank you

  • @mr.shadrack
    @mr.shadrack 5 місяців тому

    Get ZEGOCLOUD UIKits with 10000 free mins: bit.ly/3Uvu35l Take Advantage of ZEGOCLOUD: bit.ly/3Jt4knA 100% customized video call SDK: bit.ly/3Uq5B57 How to build a video call App: bit.ly/49UCqeR

  • @md.abdullahelkafi460
    @md.abdullahelkafi460 6 місяців тому

    Waiting for the series to be completed, bro..please bring it on

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

    great project.love you Teacher. Sir Can you give us a MERN project with MVC pattern with some advance features like TYpescript, Mongoose,react redux toolkit, Tailwind css, animations etc.not ecommerce project pls. project will be Inventory Management system for a company, college managment , employee management system etc like this. We can learn many things if you kindly show us this kind of project using these features

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

    Just wanna say thanks for you sir

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

    Thanks pal! I have similar app but your one goes further. Happy ti test your approach. Well done!

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

    👍👍👍👍

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

    in production the email link 'forgot my password' redirects me to localhost, is there any additional configuration in supabase to do?

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

      I found ! in supabase just go to the authentication tab and remove the localhost for your production link.

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

    Thank you so much for sharing your experience and knowledge, Sir.

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

    and could you move your code even further away, it's just not very visible.

  • @yantech.4249
    @yantech.4249 6 місяців тому

    Big thanks Sir for this tutorial

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

    You are exceptional... much Regards bro 🤝

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

    Mr and the rest of the series we are still waiting for you because we were following the series. Don't abandon your subscribers.

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

    part 5 please and Great work man

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

    Are you still going to release the next parts?