Forem: Prince Patel

Explore the fascinating world of NFTs

Prince Patel — Wed, 24 May 2023 04:44:11 +0000

Introduction

In recent years, a groundbreaking concept has emerged in the world of blockchain technology and digital art: Non-Fungible Tokens, or NFTs. NFTs have made a significant impact on the digital landscape, completely transforming our perception and exchange of value within the digital realm.

1. Understanding NFTs:

Unlike cryptocurrencies such as Bitcoin or Ethereum, which are fungible and interchangeable, NFTs are unique, indivisible digital assets that can represent ownership of any digital or physical item. Each NFT contains distinct characteristics and metadata, making it distinguishable and provably scarce.

2. Digital Creativity:

NFTs have unleashed a new wave of digital creativity. Artists, musicians, and creators from various domains have found an innovative way to monetize their digital creations. We delve into the remarkable concept of tokenized art, where digital artworks are minted as NFTs, enabling artists to directly sell their creations to collectors and receive royalties for future sales.

3. The Rise of Digital Collectibles:

Remember trading cards, stamps, or rare coins? NFTs have transformed the concept of collectibles in the digital age. We explore how NFT marketplaces have become hotbeds for trading and collecting unique digital items, ranging from virtual real estate, in-game assets, and even virtual pets. The concept of digital scarcity and ownership has breathed new life into the collectibles market.

4. NFTs Beyond Art and Collectibles:

NFTs have transcended the boundaries of art and collectibles, finding applications in various industries. We highlight the integration of NFTs in the music industry, where musicians can tokenize their albums or unique experiences for fans. Additionally, we explore NFTs in the realm of virtual reality, where users can own and trade virtual land, virtual items, and avatars.

5. NFTs and Authenticity:

One of the most powerful aspects of NFTs is their ability to verify authenticity and provenance. We discuss how NFTs solve the problem of digital forgery by providing an immutable record of ownership and a transparent transaction history. The technology behind NFTs ensures that creators and collectors can confidently prove the authenticity of their digital assets.

Conclusion:

Non-Fungible Tokens have emerged as a game-changer in the digital world, revolutionizing the way we perceive ownership, creativity, and value in the digital realm. From transforming the art industry to redefining digital collectibles, NFTs have unlocked a new era of possibilities. As we witness this renaissance, it is clear that NFTs are not just a passing trend but a paradigm shift with profound implications for various industries.

Also read more at my Blog Page- NFT's- Revolutionizing Digital Ownership and Creativity

How to display loading during api call in React JS

Prince Patel — Fri, 05 May 2023 05:49:17 +0000

npx create-react-app your-app-name

Create Loader component in components folder

Loader.js

import React from "react";
import "./Loader.css";

export default function Loader() {
  return (
    <div className="loader-container">
      <div className="loader">
      </div>
    </div>
  );
}

Loader.css

@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader-container{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  width: 50px;
  height: 50px;
  border: 10px solid #f3f3f3;
  border-top: 10px solid #0c2455; 
  border-radius: 50%;
  animation: load 1.5s linear infinite;
}

Make state of loading and data in your page

App.js

const [isLoading,setIsLoading] = useState(false);
const [error,setError] = useState();
const [data,setData] = useState({});

Make condition according to loading value in returning data

<section className='data-container'>
  <div className='data'>
    { isLoading? <Loader/> : error? error : data.fact }
  </div>
  <button onClick={fetchData}>Get Data</button>
</section>

Api call and change state of loading

const fetchData = () =>{
  setIsLoading(true);

  fetch('https://catfact.ninja/fact')
  .then(function(res){
    return res.json();
  })
  .then(function(res){
    console.log(res);
    setData(res);
    setIsLoading(false);
  })
  .catch(()=>{
    setError("Unable to fetch data...")
    setIsLoading(false);
  })    
}

Output

Loader

After fetching data

For source code - github/princepatel157/loader

Also visit my blog - visit->

MERN Blog Page

Prince Patel — Mon, 24 Apr 2023 15:48:05 +0000

Hey there...
I was working on a dynamic blog page using mern full stack technologies.
here is the page, visit- fertileminds.in

I am looking for collaborate who would like to work on react and content creation.
I would like to make it huge, and still wanted to work a lot in it.
Starting initially is the first step, nothing will work without initiation.

If anyone interested in blogging and content creation as their hobby can contact me.

React- Helmet Store

Prince Patel — Mon, 05 Jul 2021 12:40:20 +0000

Here is my first ecommerce frontend webpage
checkout and reply with some more suggestions
like if you like it

Also visit my git repo: princepatel157/helmet-store

Glimpses of my store-

Home Page:- >Code Snippet for HomePage.js:

{/* new home */}
      <div className="container-fluid home">
        <div className="row">
          {/* sub_home */}
          <div className="col-xs-12 sub_home">
            <div className="col-lg-5 col-lg-offset-1 sub_home_text">
              <h2>
                Never say never <br /> because limits,like fears,
                <br /> are often just an illusion.
              </h2>
              <div className="home_btn">
                <Link to="/allproduct">
                  <button type="button" className="btn btn-primary btn1">
                    Buy Now
                  </button>
                </Link>
                <button className="btn btn-success btn2 ">Offers</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* level-2 home left */}
      <div className="container-fluid">
        <div className="row">
          <div className="col-xs-12 col-lg-5 home_left col-lg-offset-1">
            <div className="cards">
              <div className="well">
                <div className="card_icon">
                  <EqualizerIcon></EqualizerIcon>
                </div>
                <div className="card_heading">PERFORMANCE</div>
                <div className="card_txt">
                  designed for a secure and comfortable fit for long days in the
                  field.
                </div>
              </div>
              <div className="well">
                <div className="card_icon">
                  <EqualizerIcon></EqualizerIcon>
                </div>
                <div className="card_heading">PERFORMANCE</div>
                <div className="card_txt">
                  designed for a secure and comfortable fit for long days in the
                  field.
                </div>
              </div>
            </div>
          </div>

          {/* home right */}
          <div className="home_right visible-lg">
            <div className="col-lg-4 ">
              <img
                className="home_img"
                src="./images/kohli.png"
                alt="no image"
              />
            </div>
          </div>
        </div>
      </div>

HomePage.css file

.sub_home {
  /* width: 100%; */
  height: 400px;
  background-color: #174280;
  border-radius: 15px;
  margin-bottom: -600px;
  /* padding-top: 50px; */
}
.sub_home_text {
  font-family: "Fraunces", serif;
  color: rgb(255, 255, 255);
  margin-top: 70px;
  /* margin-left: 150px; */
  font-weight: 1000;
}
.home_img {
  height: 600px;
  width: 600px;
  object-fit: contain;
}

.cards {
  display: flex;
  margin-top: 350px;
  /* height: 170px;  */
}
.well {
  background-color: #fe6c16;
  align-items: center;
  padding-left: 10px;
  border-radius: 10px;
  /* margin-right: 10px; */
}

Visit my Git-Hub repository for full code-> princepatel157

Store:-
Cart:-

Packages used:-

react-router-dom
material-ui/icons
react-currency-format

Please rate my work and give some suggestions to improve my UI.

Checkout my Git-repo and do fork for any kind of improvement

My first React Page- Movie site clone

Prince Patel — Sun, 04 Jul 2021 02:24:35 +0000

Enough with the tutorials and practice, now it's a time to build up something good and my own.
Starting with this movie clone app.
Just completed with my landing page made as simple as I can as a beginner
find out my repo: princepatel157/moviekiss-web-app

Please rate my work how is it going from the start and reply with the suggestion if any please...

Checkout the simplest code snippets:

CategoryBar.js:

import React from "react";
import "./Catog.css";
import { Link } from "react-router-dom";
import HomeIcon from "@material-ui/icons/Home";
import MovieIcon from "@material-ui/icons/Movie";
import TvIcon from "@material-ui/icons/Tv";
import LanguageIcon from "@material-ui/icons/Language";
import TranslateIcon from "@material-ui/icons/Translate";
import CalendarTodayIcon from "@material-ui/icons/CalendarToday";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import MoreVertIcon from "@material-ui/icons/MoreVert";

function Catog() {
  return (
    <>
      <div className="container cat_bar">
        <div className="row ">
          {/* home */}
          <div className="col-xs-2 block_item">
            <div className="dropdown">
              <span className="option">
                <HomeIcon className="icons" />
                <Link to="/" className="home_cat_links">
                  Home
                </Link>
              </span>
            </div>
          </div>

          {/* movie */}
          <div className="col-xs-2">
            <div className="dropdown">
              <span className="option">
                <MovieIcon className="icons" />
                Movies
                <ArrowDropDownIcon className="icons" />
              </span>
              <div className="dropdown_content">
                <p>
                  <Link to="#" className="cat_links">
                    Bollywood
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    Hollywood
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    Dual Audio
                  </Link>
                </p>
              </div>
            </div>
          </div>

          {/* web series */}
          <div className="col-xs-2">
            <div className="dropdown">
              <span className="option">
                <LanguageIcon className="icons" />
                Web Series
                <ArrowDropDownIcon className="icons" />
              </span>
              <div className="dropdown_content">
                <p>
                  <Link to="#" className="cat_links">
                    Hindi Dubbed
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    Adult
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    Netflix
                  </Link>
                </p>
              </div>
            </div>
          </div>

          {/* tv shows */}
          <div className="col-xs-2">
            <div className="dropdown">
              <span className="option">
                <TvIcon className="icons" />
                Tv Shows
                <ArrowDropDownIcon className="icons" />
              </span>
              <div className="dropdown_content">
                <p>
                  <Link to="#" className="cat_links">
                    Action
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    Adventure
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    Animation
                  </Link>
                </p>
              </div>
            </div>
          </div>

          {/* dual audio */}
          <div className="col-xs-2">
            <div className="dropdown">
              <span className="option">
                <TranslateIcon className="icons" />
                Dual Audio
                <ArrowDropDownIcon className="icons" />
              </span>
              <div className="dropdown_content">
                <p>
                  <Link to="#" className="cat_links">
                    Movie
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    Series
                  </Link>
                </p>
              </div>
            </div>
          </div>

          {/* year */}
          <div className="col-xs-2">
            <div className="dropdown">
              <span className="option">
                <CalendarTodayIcon className="icons" />
                Year
                <ArrowDropDownIcon className="icons" />
              </span>
              <div className="dropdown_content">
                <p>
                  <Link to="#" className="cat_links">
                    2020
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    2019
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    2018
                  </Link>
                </p>
                <p>
                  <Link to="#" className="cat_links">
                    before 2018
                  </Link>
                </p>
              </div>
            </div>
          </div>
          {/* more */}
          <div className="col-xs-2 block_item">
            <div className="dropdown">
              <span className="option">
                <Link to="/" className="more_cat_links">
                  More
                  <MoreVertIcon className="icons" />
                </Link>
              </span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default Catog;

CategoryBar.css

.cat_bar {
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}
.dropdown {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  background-color: rgb(173, 235, 216);
  margin-right: 2px;
  margin-left: 2px;
}
.dropdown_content {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #94ff9a;
  min-width: 120px;
  padding: 12px 16px;
}
.dropdown:hover .dropdown_content {
  display: block;
  background-color: rgb(148, 236, 210);
}
.dropdown:hover {
  background-color: rgb(75, 241, 192);
}
.cat_links {
  text-decoration: none;
}
.icons {
  padding: 1px;
  margin-right: 10px;
  margin-left: 10px;
}
.home_cat_links {
  padding-right: 10px;
}
.more_cat_links {
  padding-left: 10px;
}

ProductFrame.js:

import React from "react";
import "./Product.css";

const Poduct = (props) => {
  return (
    <>
      <div className="product">
        <div className="product_img">
          <img src={props.image} alt="" />
        </div>
        <div className="product_info">{props.name}</div>
      </div>
    </>
  );
};

export default Poduct;

ProductFrame.css:

.product {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  width: 200px;
  height: 450px;
  margin-left: 60px;
  margin-top: 40px;
  margin-bottom: 20px;
  background-color: white;
}
.product_img {
  width: 100%;
  height: 100%;
}
.product_info {
  font-weight: 700;
  /* padding-left: 3px; */
  text-align: center;
  margin-bottom: 15px;
}

***For the whole Code refer my git-hub repo -> https://github.com/princepatel157/moviekiss-web-app