Thought Span
Thought Span
  • 18
  • 149 446
Make a complete website using React and Contentful - Part 2 - Creating the About Section Component
Buy me a Coffee: paypal.me/thoughtspan
This video is the part 2 of a multi-part series of the React and Contentful. If you have not watched the part 1 of this video series, I highly recommend to go and watch the part 1 of this series at this link here: ua-cam.com/video/yqe5UB_BF7Q/v-deo.html
In this video we will learn how to make a dynamic About section for a website using React JS and Contentful. We will also learn How to use the Context API in your current React project.
For this project I am using React for my frontend and Contentful as my backend for saving all the data. Contentful also provides the Content delivery APIs that we can utilize in our projects to make dynamic applications and web projects just like this one. Through this video, I want to share my knowledge on how to use Contentful and React together to make an awesome web project.
In this video, we will work on making an About Section for a website. We will learn how to enter our data in Contentful. We will also learn how to fetch this data from a frontend application like React. We will use modern workflows, and patterns to get this data on frontend. We will learn how to use React hooks like useState, useEffect, useCallback etc. We will use async and await and a lot more. Once we have the data available on the frontend, we will style it using SCSS.
In the later half of this video I will also show you how to utilize the Context API provided by React in your current applications. We will also learn How to organize and clean our React code, and split them into multiple files to make it more modular.
Please share your views, thoughts, questions and comments using the comments section below this video.
I will be releasing more videos on this series and on similar topics, so stay tuned. Please like this video and subscribe to my channel.
This is the link to a website where you can experience live in action both the components (1) Image Carousel Component (Covered in Part 1) and (2) About Component (Covered in this part) - dalmaa.vercel.app
Переглядів: 2 596

Відео

Make a complete website using React and Contentful - Part 1 - Image Carousel Component
Переглядів 16 тис.2 роки тому
Buy me a Coffee: paypal.me/thoughtspan In this video we will learn how to make a complete web project using React and Contentful. This video is the part 1 of a multi-part series that I plan to upload very soon. For this project I am using React for my frontend and Contentful as my backend. Through this video, I want to share my knowledge on how to use Contentful and React together to make an aw...
Make an image classification app using React and Tensorflow JS
Переглядів 20 тис.3 роки тому
In this video, we will learn how to make a simple Image Classification / Identification app using React and Tensorflow JS. Tensorflow JS is a machine learning library for Javascript. For this tutorial, there is no machine learning knowledge required. We are going to use the pre-trained machine learning model from Tensorflow JS called mobilenet. This model is specifically used for image classifi...
Make a simple food blog using React and Contentful
Переглядів 31 тис.4 роки тому
Buy me a Coffee: paypal.me/thoughtspan In this video I want to share my knowledge on how to use Contentful and React to make a simple single page blog application. Contentful gives you the platform to create your content for your website or an app. It also gives you the APIs that you can use to fetch the content and consume in React or any application. Link to the GIT Repository: bitbucket.org/...
How to add a pagination in Hugo
Переглядів 3,1 тис.6 років тому
Buy me a Coffee: paypal.me/thoughtspan This video shows how to add a pagination on your Hugo website in 3 steps. I will show you 2 different styles of pagination. One is a simple Pagination, and Other is a more modern and dynamic styled Pagination. Markup and styling for Simple Pagination: bit.ly/2JquLJ7 Markup and Styling for Advanced Pagination: bit.ly/2Nj05vF
How to create a webpage looking at a design mockup | Recipe Template | Part 3
Переглядів 1736 років тому
Understanding different ways to organize the html elements on a webpage. Understanding the difference between floats, inline-blocks and flex properties.
How to create a webpage looking at a design mockup | Recipe Template | Part2
Переглядів 1486 років тому
In this video we will learn how to add separators between the list items.
How to create a webpage looking at a design mockup | Recipe Template | Part1
Переглядів 1616 років тому
How to create a webpage looking at a design mockup | Recipe Template | Part1
Flexbox Use Case 1| Sticky Footer| How to keep the site footer always at the bottom of the page
Переглядів 1,7 тис.6 років тому
Buy me a Coffee: paypal.me/thoughtspan In this video, we will learn how to keep the site footer always at the bottom of the page regardless of the page content. We will solve the problem of footer floating in the middle of the page by using Flexbox property. Just 4 lines of code and your footer will always stick to the bottom of the page.
How to create navigation menus in Hugo
Переглядів 19 тис.6 років тому
Buy me a Coffee: paypal.me/thoughtspan
Introduction to CSS 3
Переглядів 556 років тому
This video is an introduction to styling the web pages using CSS3. We start with an unstyled HTML page, and apply the styles to individual elements from start to finish. We talk about using custom fonts using google fonts. We see how to use the web inspector console on browsers. We understand the difference between inline and block elements. Understand how to style the HTML elements from start ...
Introduction to HTML5 - Part2
Переглядів 306 років тому
This is a short introductory tutorial to HTML5 in Hindi / Urdu. This video is in continuation to my previous video that focuses mainly on the most commonly used HTML elements on a web page. This is the link to my previous video: ua-cam.com/video/VeowRTC6Xuk/v-deo.html This tutorial introduces the new user to the HTML elements like Links (External Links, Internal links, and Links to content with...
Introduction to HTML
Переглядів 1096 років тому
This is a short introductory tutorial to HTML in Hindi / Urdu. This tutorial focuses mainly on the most commonly used HTML elements on a web page. This tutorial introduces the new user to the HTML elements like Headings (h1, h2, h3 etc), paragraphs (p), line breaks (br), horizontal rule (hr), strong, em, Ordered lists (ol), Unordered lists (ul), Images (img), comments, and Links (a). This tutor...
Remove wrinkles without losing texture in Photoshop | Frequency Separation and Portrait Retouching
Переглядів 3197 років тому
This video explains the basic portrait retouching in Photoshop with Frequency Separation. This video is in Hindi / Urdu. It covers the concept of frequency separation, and why is it important. It also covers the spot removal from portraits using the spot healing brush tool. It covers the basics of selective sharpening, color correction, white balance adjustment, and post crop vignetting using C...
Reset your Wordpress Admin Credentials on localhost or live website
Переглядів 4457 років тому
In this video I am going to show you two different ways to get you back into WordPress admin section (WordPress dashboard), either by resetting your WordPress admin password (by editing the database), or by creating a new admin username and password (by editing the functions.php file). (1) The first method involves getting inside the database of the WordPress installation and resetting the pass...
Find your lost / misplaced Android Phone with this simple trick
Переглядів 1207 років тому
Find your lost / misplaced Android Phone with this simple trick
Migrate a Live Wordpress Website To Localhost
Переглядів 50 тис.9 років тому
Migrate a Live Wordpress Website To Localhost
Server Not Found Issue after installing wamp server
Переглядів 4,9 тис.9 років тому
Server Not Found Issue after installing wamp server

КОМЕНТАРІ

  • @bharaths2646
    @bharaths2646 19 днів тому

    the dependencies does not support

  • @panda-y5v
    @panda-y5v 19 днів тому

    source code?

  • @TravelWithMeddy-xt8wg
    @TravelWithMeddy-xt8wg Місяць тому

    can i get css code ?

  • @TravelWithMeddy-xt8wg
    @TravelWithMeddy-xt8wg Місяць тому

    where can i get the source code ?

  • @TravelWithMeddy-xt8wg
    @TravelWithMeddy-xt8wg Місяць тому

    i was not able to install node-sass got so manny errors but i installed dart-sass will that work ?

  • @Abhishek-ln4hq
    @Abhishek-ln4hq 2 місяці тому

    God bless u sir

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

    what about backend

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

    Hi, Hope you are doing well. Can You make a video on how to use custom trained model in react native app??? Furthermore if i want to use multiple models in one react native app how to do it? thanks

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

    why mines error says "No backend found in registry."?

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

    Where is Part-3? Can you share the link please.

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

    Amazing tutorial. Thank you for this great tutorial.

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

    models is null even using old version

  • @m2kdevelopments
    @m2kdevelopments 11 місяців тому

    Great stuff

  • @youtubetv3474
    @youtubetv3474 11 місяців тому

    why did you choose to use a class component when you could have used a function component

  • @codecrafts5263
    @codecrafts5263 11 місяців тому

    Not working for me. model not loading

  • @allissuf
    @allissuf Рік тому

    AWESOME CONTENT! contentful indeed...

  • @mosininamdar7939
    @mosininamdar7939 Рік тому

    pls provide the source code for the same its difficult to write all the css

  • @randomizer1845
    @randomizer1845 Рік тому

    So well explained and one of the first, who explains more advanced stuff you can do with Hugo. You should do more :)

  • @avinashb9752
    @avinashb9752 Рік тому

    Nice Video

  • @abusaid9347
    @abusaid9347 Рік тому

    Really helpful!

  • @muhammedshaker9708
    @muhammedshaker9708 Рік тому

    Thank you man

  • @gentlechrisoa
    @gentlechrisoa Рік тому

    just the exact thing I was looking to know. Great video man, thanks !

  • @PHYSICSINNEPALI
    @PHYSICSINNEPALI Рік тому

    can i get the source code please ?

  • @bhoyroovivek2566
    @bhoyroovivek2566 Рік тому

    problem with marked

    • @vikrammehta4945
      @vikrammehta4945 Рік тому

      I think in the new version of Marked you need to import it as a named import and not as default. Try using this instead - import { marked } from 'marked';

    • @bhoyroovivek2566
      @bhoyroovivek2566 Рік тому

      Thank you sir it's working perfectly

  • @AdityaMayukhSom
    @AdityaMayukhSom Рік тому

    Thank you for the code! Working greatly!

  • @hmmokletstrythis
    @hmmokletstrythis Рік тому

    Thank you so much! This is brilliant, is part 3 coming?

  • @dummyhehe-px1zm
    @dummyhehe-px1zm Рік тому

    What is the model used in this project and does it use progressive web app (pwa)?

  • @MarcoLopez-wy6zx
    @MarcoLopez-wy6zx Рік тому

    Splendid! Now I can start making my company's blog site. Thank you so much mah dude.

  • @nishuchowdhury6044
    @nishuchowdhury6044 Рік тому

    It's show me this error. pls help Module not found: Error: Can't resolve '@tensorflow-models/mobilenet' in 'E:\potatodisease\my-app\src'

    • @viralgupta7636
      @viralgupta7636 Рік тому

      downgrade tensorflow/tfjs-converter and tensorflow/tfjs-cors module to 1.2.1 version to use the model

    • @vedikatyagi3269
      @vedikatyagi3269 Рік тому

      @@viralgupta7636 its still showing errors

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

      @@vedikatyagi3269 did you solve it?

  • @charlescoult
    @charlescoult Рік тому

    That was really well done 👍

  • @woooooooovely
    @woooooooovely Рік тому

    Can you upload how to coding for react + tensorflow.js object detection?

  • @gayathridevip4632
    @gayathridevip4632 Рік тому

    Can u tell the windows command as I was using windows os

  • @gayathridevip4632
    @gayathridevip4632 Рік тому

    Is the css automatically aligned??

  • @gayathridevip4632
    @gayathridevip4632 Рік тому

    Is this code works??

  • @ravinio9076
    @ravinio9076 Рік тому

    Hey! Love you tutorial, very helpful, was wondering when you will be doing part 3? Maybe go over how you built your Nav?

  • @IDontWantAHandleKThanks
    @IDontWantAHandleKThanks Рік тому

    Thanks so much, very helpful!

  • @kikevanegazz325
    @kikevanegazz325 Рік тому

    Awesome! Subscribed fella, here!

  • @ItsMe-oi9dy
    @ItsMe-oi9dy Рік тому

    I wish you had made these tutorials as minimalism instead of adding so much code that isn't required such as logging errors etc. I want to see the bare minimum and what makes the code work, and while the error stuff is helpful in terms of creating a real website, it's confusing for people who are learning to interact with a 3rd party resource

  • @JohnnyYoungIV
    @JohnnyYoungIV Рік тому

    Hello! I was wondering if you could share your Github repo

  • @adityagujrati1550
    @adityagujrati1550 Рік тому

    can you please share the code link

  • @sulamanhassan2676
    @sulamanhassan2676 Рік тому

    please uplade the source code very Thanks full you

  • @gptinsights
    @gptinsights Рік тому

    A Shame you stopped making videos! Awesome tutorial and explanation ! thanks for sharing

  • @engkolvasna9483
    @engkolvasna9483 Рік тому

    Wasup guys, I am so grateful for Part-2 which is as good and consistent as Part-1. Keep up the good work buddy. I can't wait for Part-3. Cheers! =)

  • @engkolvasna9483
    @engkolvasna9483 Рік тому

    Hi everyone, I would encourage you all to give some likes and subscribe to Thought Span channel. I am a friend of Vikram and just like all of you I really enjoyed and learned a lot from this tutorial as I am a beginner in React. This tutorial was well thought and the content and explanations as well as the project was just amazing and outstanding. Thank you very much Vikram for all of your great efforts, your time and for your inspiration. Keep it up you are doing super great. Cheers brother. Looking forward for more.

  • @codewithdevhindi9937
    @codewithdevhindi9937 Рік тому

    Awsome video bro you deserve way much more likes then you have crisp clear explaination fluent english and a very big brain keep it up you will reach at the top bro 🚀🚀🚀🚀🚀🔥🔥🔥🔥🔥🔥

  • @clickadelic7681
    @clickadelic7681 Рік тому

    Very helpful, very good presentation - thanks a lot!

  • @annreyes6431
    @annreyes6431 2 роки тому

    ᵖʳᵒᵐᵒˢᵐ

  • @paonsgraphics9750
    @paonsgraphics9750 2 роки тому

    Very interesting. At this time your code is failing to run, any update ??

    • @thoughtspan
      @thoughtspan 2 роки тому

      I think with the latest updates a lot might have changed. But If you try installing the packages with the same version that I am using in the video, then it should work. Let me know how it goes. :)

    • @paonsgraphics9750
      @paonsgraphics9750 2 роки тому

      @@thoughtspan No I didn't try with your version, I just wanted to adapt your code to new versions but I failed.

    • @tovatic6844
      @tovatic6844 2 роки тому

      @@thoughtspan i tried with same packages, and i still seeing an error in "const results = await model.classify(imageRef.current)" console says " Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classify')", idk what to do :(

    • @viralgupta7636
      @viralgupta7636 Рік тому

      downgrade tensorflow/tfjs-converter and tensorflow/tfjs-cors module to 1.2.1 version to use the model

  • @Sw_665
    @Sw_665 2 роки тому

    const results = await model.classify(imageRef.current) this line is showing error

    • @tovatic6844
      @tovatic6844 2 роки тому

      i have the same issue, did you solve it?

    • @viralgupta7636
      @viralgupta7636 Рік тому

      downgrade tensorflow/tfjs-converter and tensorflow/tfjs-cors module to 1.2.1 version to use the model

  • @Sw_665
    @Sw_665 2 роки тому

    classify is showing error instead of array