DEV Community: Caffeine Code

How to Host Your React App for Free and Reach Millions of Users: Top 4 Platforms Revealed!

Caffeine Code — Wed, 22 Jun 2022 17:18:26 +0000

Choosing A Web hosting A very tough decision. because Your Whole website's performance depends on it.

A website’s usability lies on three pillars – a good web design, search engine optimisation and a solid web hosting.

You need to have a good web hosting account or hire a web hosting company that will ensure that your website is visible to people on the internet.

The web host provides the space for you to store your website on the internet.
When users type your domain name on their web browser, their computer connects to the server your website is hosted on. Then that server sends the files that are up for display, to the user on their browser.

There are primarily two kinds of web hosting solutions. One is free service
and the other is premium paid service.

Q. Can I host my website for free? and It is Good to choose a free hosting ?
So my answer is simple.
Yes, you can. There several website which offers free hosting plans. After you can purchase their premium plan also.
For hobby projects or any other small websites, Free hosting is very good option. But if you want to Start a business through website than you will need a website definitely.

There are several free hosting platforms that support React applications. Here are some of the best ones:
GitHub Pages: GitHub Pages is a popular platform that allows you to host static websites and web apps. It offers a simple way to host your React app, and it's free. You can easily deploy your app to GitHub Pages by creating a repository, configuring your settings, and pushing your code to the repository.
https://www.youtube.com/watch?v=kLBYwmNLGVM&list=PLoyowRR99K8-Otyu_o_FoFpQ09RA_Fx8i&index=1

Netlify: Netlify is another popular hosting platform for static websites and web apps. It offers a free tier that allows you to host your app with a custom domain, continuous deployment, and other features. Netlify is easy to use and provides a great developer experience.
https://www.youtube.com/watch?v=CxQ8qAK3xGg&list=PLoyowRR99K8-Otyu_o_FoFpQ09RA_Fx8i&index=2

Vercel: Vercel is a cloud platform that offers hosting, deployment, and other features for building web applications. It's free to use, and it includes custom domains, SSL encryption, and other features.
https://www.youtube.com/watch?v=Sjf3u52eeIM&list=PLoyowRR99K8-Otyu_o_FoFpQ09RA_Fx8i&index=6&t=44s&ab_channel=CaffeineCode

Firebase Hosting: Firebase Hosting is a hosting platform that's part of the Firebase suite of products. It's a great choice for hosting your React app, as it offers a free tier that includes hosting, SSL encryption, and a global CDN. Firebase Hosting is easy to use and integrates well with other Firebase services.
https://www.youtube.com/watch?v=bTQoOwkuLlM&list=PLoyowRR99K8-Otyu_o_FoFpQ09RA_Fx8i&index=4&t=22s&ab_channel=CaffeineCode

All of these platforms offer great features for hosting React apps for free. You can choose the one that suits your needs best.
If you excited to know How to Host Your React App on these platforms, you can check out my youtube playlist.
https://www.youtube.com/playlist?list=PLoyowRR99K8-Otyu_o_FoFpQ09RA_Fx8i

Google Chrome Extensions Can be Used to Track You Online

Caffeine Code — Mon, 20 Jun 2022 08:23:26 +0000

Hello guys, namaste ! Good morning !
I am Vipin Bansal and welcome to the caffeine code.

whenever you install a browser extension on google chrome.it can be used to construct fingerprints. these fingerprints stores information of your device. which is called tracking hashes.
these hashes are used to track user's web activity.
to proof that concept a web developer compay Z0CCC develops a website, where you can see all installed extensions in your device.

this is link of that website.
https://z0ccc.github.io/extension-fingerprints/

How to use YouTube API in React

Caffeine Code — Thu, 02 Jun 2022 16:26:51 +0000

Hello guys, namaste ! Good morning ! I am Vipin Bansal and welcome to the caffeine code.

so in this post i am gonna show you , how can you use Youtube api in your react js application and show all videos and playlist.

so first step is to create a new react app. i think you already familiar with create react app



npx create-react-app ytclone

and now, create a new file in src folder. and name it ytvideos.js because we use this file to show youtube videos. and create YTvideos function inside this file



import react from "react";

export const YTvideos=()=>{
    return(
        <div>
            welcome
        </div>
    );
};

so after creating this file, we will import YTvideos function in our app.js file.



import { YTvideos } from "./ytvideos";

function App() {
  return (
    <div className="App">
      <YTvideos/>
    </div>
  );
}

export default App;

Now, we will goto youtube and select any video. and click on share button. and a window will popup , where you have to select Embed link option. and then copy Iframe code.
You can follow these images.

So we had copied iframe code of this videos.



<iframe width="560" height="315"
 src="https://www.youtube.com/embed/XWePdlCGTno" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

Now , we will copy it to our ytvideos.js file.

so if you run npm start at that moment , you will see this as result.

Now we forwards for the next step. that is Youtube APi.
For that go on google and search youtube api. and click on first link you see.
https://developers.google.com/youtube/v3

after going to that url. you will see Youtube Data API window , here you have two options Add YouTube functionality to your site and second Search for content. You should choose first. after choosing first , Youtube data api overview page will opens.

and here you can see Introduction and instructions of youtube api before starting.

now , click on the 2nd instuction blue text url. which will forward you to Google Developers Console.
So here you will see a dashboard , and button which is named Enable APi and services. After clicking on that , a search box will appear. now search youtube api in that search box.

How to add RichText Editor to React Blog Website

Caffeine Code — Sun, 13 Feb 2022 11:25:24 +0000

Hello guys, namaste !
Today we are going to see how to implement TinyMCE Editor in our react app. Tinymce is a RichText Editor based on JavaScript library.
Tinymce is fast and reliable way to integrate it with your existing codebase.

In this article , we start with a simple integration.

Creating a simple React project

Use the Create React App package to create a new React project named tinymce-react-demo.



npx create-react-app@5.0.0 tinymce-react-demo

Change to the newly created directory.



cd tinymce-react-demo

Test the application using the Node.js development server.



npm run start

Installing the TinyMCE React component

Install the tinymce-react package and save it to your package.json with --save.



npm install --save @tinymce/tinymce-react

Adding the Editor component to our project

Open Our Blog Creation Form. (following create.js file created in previous part.) You can simply copy it from here. create.js



import React , {useState} from "react";
import fb from "./firebase";
const DB =fb.firestore()
const Blogslist = DB.collection('blogs');

const CreateBlog = () => {

    const[title, SetTitle] = useState("");
    const[body, SetBody] = useState("");

    const submit =(e)=> {
        e.preventDefault();
        Blogslist.add ({
            Title: title,
            Body: body
        }).then((docRef)=> {
            alert("data successfully submit")
        }).catch((error) => {
            console.error("error:", error);
        });
    }
    return(
        <div>
            <form onSubmit={(event) => {submit(event)}}>    
            <input type="text" placeholder="Title" 
            onChange={(e)=>{SetTitle(e.target.value)}} required />

            <textarea  name="content" type="text" placeholder="write your content here" 
            rows="10" cols="150" onChange={(e)=>{SetBody(e.target.value)}} required >
            </textarea>

            <button type="submit">Submit</button>
        </form>
        </div>
    );
};

export default CreateBlog;

Now import Editor component in create.jsfrom TinyMCE React library which we install.



import { Editor } from '@tinymce/tinymce-react';

Now Replace the textarea field through Editor component.

Before Replace



<form onSubmit={(event) => {submit(event)}}>    
    <input type="text" placeholder="Title" 
    onChange={(e)=>{SetTitle(e.target.value)}} required />

    <textarea  name="content" type="text" placeholder="write your content here" 
    rows="10" cols="150" onChange={(e)=>{SetBody(e.target.value)}} required >
    </textarea>

    <button type="submit">Submit</button>
</form>

After Replace



<form onSubmit={(event) => {submit(event)}}>    
    <input type="text" placeholder="Title" 
    onChange={(e)=>{SetTitle(e.target.value)}} required />

    <Editor
        textareaName='Body'
        initialValue="<p>This is the initial content of the editor.</p>"
        init={{
            height: 500,
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        }}
        onEditorChange={(newText) => SetBody(newText)}
    />

    <button type="submit">Submit</button>
</form>

In Editor component we use somenew attr inside of textarea attr.

name -> textareaName
placeholder -> initialValue
onChange -> onEditorChange

Now Our Create.js file look like following.



import { Editor } from '@tinymce/tinymce-react';
import react, {useState} from 'react';
import fb from './firebase';
const db = fb.firestore()
const Blogs = db.collection('blogs');

const CreateBlog= () => {
    const [title , SetTitle] = useState("");
    const [body , SetBody] = useState("");

    const sub = (e) => {
        e.preventDefault();
        // Add data to the store
        Blogs.add({
            Title: title,
            Body: body,
            publish: false,
            published_on: fb.firestore.Timestamp.fromDate(new Date())
        })
        .then((docRef) => {
            alert("Data Successfully Submitted");
        })
        .catch((error) => {
            console.error("Error adding document: ", error);
        });
    }
    return (
    <div>
        <form onSubmit={(event) => {sub(event)}}>  
        <input type="text" placeholder="Title" 
            onChange={(e)=>{SetTitle(e.target.value)}} required />
        <Editor
            textareaName='description'
            initialValue="<p>This is the initial content of the editor.</p>"
            init={{
                height: 500,
                menubar: false,
                plugins: [
                  'advlist autolink lists link image charmap print preview anchor',
                  'searchreplace visualblocks code fullscreen',
                  'insertdatetime media table paste code help wordcount'
                ],
                toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
              }}
            onEditorChange={(newText) => SetBody(newText)}
        />
        <button type="submit">Submit</button>
        </form>

    </div>

    );
}

export default CreateBlog;

Result

Show RichText in Templates

open our Show.js file. (following show.js file created in previous part.) You can simply copy it from here.

Show.js



import React , {useState} from "react";
import { useParams} from 'react-router-dom';
import fb from "./firebase";
const DB =fb.firestore()
const Blogslist = DB.collection('blogs');

const BlogView = ()=> {
    const {id} = useParams();
    const[blogs, Setblogs] = useState([]);
    Blogslist.doc(id).get().then((snapshot) => {
        const data = snapshot.data()
        Setblogs(data);
    });
    return(
        <div>
            <p>Title : { blogs.Title}</p>
            <p>Body : { blogs.Body}</p>

        </div>
    );
};
export default BlogView;

result

Now you can see our text is show in HTML format and we want to simply rendor our text in Non-HTML format. so will use dangerouslySetInnerHTML attr.



const body = blogs.Body;
<div  dangerouslySetInnerHTML={{__html: body}} />

Now Our file look like following.



import React , {useState} from "react";
import { useParams} from 'react-router-dom';
import fb from "./firebase";
const DB =fb.firestore()
const Blogslist = DB.collection('blogs');

const BlogView = ()=> {
    const {id} = useParams();
    const[blogs, Setblogs] = useState([]);
    Blogslist.doc(id).get().then((snapshot) => {
        const data = snapshot.data()
        Setblogs(data);
    });
    const body = blogs.Body;
    return(
        <div>
            <p>Title : { blogs.Title}</p>
            <div  dangerouslySetInnerHTML={{__html: body}} />

        </div>
    );
};
export default BlogView;

result

That is it,
I hope you find this article useful.
Thanks for reading!

Build A Blog Website Using ReactJS and Firebase

Caffeine Code — Mon, 31 Jan 2022 07:27:33 +0000

Welcome buddy ! This blog post will teach you how to build a blog site using React and Firebase.
First we will learn , Initial setup of Firebase.
and then we connect our project to firebase.
and third we will code our project.

so lets start First section

1. Setup of Firebase

Go to firebase website and signup. and than go on to the firebase console and create new project.

Now Enter the project name , and click on continue. it will lead you to next screen.

click on continue and you will land on second screen where you can select analytics account if opted for google analytics on the previous screen and click continue.

Your Firebase Project is ready. Now go to project setting to connect React Project to Firebase.

2. Build React app

Go to your terminal and Create New React App using



npx create-react-app@5.0.0 Blog-React-app
cd Blog-React-app
npm start

Our react app is ready now we have to connect it to our firebase project. So first thing is to install firebase node modules in our project. you can run the following command to install the latest SDK:



npm install firebase

now lets create a file structure for blog website.
so first we create a firebase.js file in src folder. And copy Firebase configurations.



import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

firebase.initializeApp({
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxx"
});

const fb = firebase;

export default fb;

Here, you can see i removed my project configurations. that is unique for every firbase project. So you have to go on your project setting and copy it and paste here.

Now open App.js file and remove all extra lines of code



import React from "react";


function App() {
  return (

  );
}

export default App;

Our Blogging website meanily works on four operations.1.Create Blog2. Show Blogs List 3. Read A Blog 4. Edit A Blog and last 5. Delete a Blog so lets create a Create.js file in blogs directory in Src directory. src/components/blogs/create.js first, we have to import database to our file. we will do that by this code.



import fb from '../firebase';
 db = fb.firestore()
const Blogs = db.collection('blogs');

hire, Fb is the module which we initialize in firebase.js file. and fb.firestore() points to our database on firebase.
and the collection is a table of data. in which table you want to add new data.
and in firebase you don't have to create table, you can directly insert data and firebase automatically creates a new collection.
now, we will create a function to render our creation form. and take input from user to send it to database.



import {useState} from 'react';

const CreateBlog= () => {
    const [title , SetTitle] = useState("");
    const [body , SetBody] = useState("");

    const sub = (e) => {
        e.preventDefault();
        // Add data to the store
        Blogs.add({
            Title: title,
            Body: body,
            publish: false,
            published_on: fb.firestore.Timestamp.fromDate(new Date())
        })
        .then((docRef) => {
            alert("Data Successfully Submitted");
        })
        .catch((error) => {
            console.error("Error adding document: ", error);
        });
    }
    return (
    <div>

    </div>

    );
}

export default CreateBlog;

here We have created two variables which are title and body. and intialize there value with black string. and when user click on submit button we will run a new function , which is named sub = (e) => {}.



<div>
        <form onSubmit={(event) => {sub(event)}}>    
            <input type="text" placeholder="Title" 
            onChange={(e)=>{SetTitle(e.target.value)}} required />

            <textarea  name="content" type="text" placeholder="write yoyr content here" 
            rows="10" cols="150" onChange={(e)=>{SetBody(e.target.value)}} required >
            </textarea>

            <button type="submit">Submit</button>
        </form>
    </div>

so our complete file will look like this.



import {useState} from 'react';
import fb from '../firebase';
 db = fb.firestore()
const Blogs = db.collection('blogs');

const CreateBlog= () => {
    const [title , SetTitle] = useState("");
    const [body , SetBody] = useState("");

    const sub = (e) => {
        e.preventDefault();
        // Add data to the store
        Blogs.add({
            Title: title,
            Body: body,
            publish: false,
            published_on: fb.firestore.Timestamp.fromDate(new Date())
        })
        .then((docRef) => {
            alert("Data Successfully Submitted");
        })
        .catch((error) => {
            console.error("Error adding document: ", error);
        });
    }
    return (
    <div>
        <form onSubmit={(event) => {sub(event)}}>    
            <input type="text" placeholder="Title" 
            onChange={(e)=>{SetTitle(e.target.value)}} required />

            <textarea  name="content" type="text" placeholder="write yoyr content here" 
            rows="10" cols="150" onChange={(e)=>{SetBody(e.target.value)}} required >
            </textarea>

            <button type="submit">Submit</button>
        </form>
    </div>

    );
}

export default CreateBlog;

now we will create a blogslist view , where can see all blogs' list.



import React, { useState, useEffect }from 'react'
import { Link } from "react-router-dom";
import fb from './firebase'


const db = fb.firestore()
const Blogs = db.collection('blogs');


const Bloglist = () => {
    const [blogslist, setblogs] = useState([]);

    useEffect(() => {
        // Subscribe to query with onSnapshot
        const unsubscribe = Blogs.limit(100).onSnapshot(querySnapshot => {
          // Get all documents from collection - with IDs
          const data = querySnapshot.docs.map(doc => ({
            ...doc.data(),
            id: doc.id,
          }));
          // Update state
          setblogs(data);
        });

        // Detach listener
        return unsubscribe;
      }, []);

    return (
        <div >

        <h2 className="w-full text-center font-bold text-xl">All blogs List</h2>

            {blogslist.map(blog=> (
                <div key={blog.id}>
    <p>Title : {blog.Title}</p>
    <p>body: {blog.Body} </p>
    <Link to={"/blog/"+blog.id}
        class="mr-2 bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-1 px-2 border border-indigo-500 rounded"
        >View
    </Link>
    <Link to={"/blog/edit/"+blog.id}
        class="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 border border-blue-500 rounded"
        >Edit
    </Link>
</div>          
            ))}
            ]]

    </div>
    );
  };

export default Bloglist;

now we will add Delete button to list. so we create a delete function.



const Blogs = db.collection('blogs');

const DeleteBlog = (id)=> {
        Blogs.doc(id).delete().then(() => {
            alert("Document successfully deleted!");
        }).catch((error) => {
            console.error("Error removing document: ", error);
        });
    };

after creating a function , we have to create a button which will call this function. and gives the id parameter to identify blog



<button 
                            onClick={()=> {DeleteBlog(blog.id)}} 
                        >delete</button>

now complete bloglist.js file look like this.



import React, { useState, useEffect }from 'react'
import { Link } from "react-router-dom";
import fb from './firebase'


const db = fb.firestore()
const Blogs = db.collection('blogs');


const Bloglist = () => {
    const [blogslist, setblogs] = useState([]);

    const DeleteBlog = (id)=> {
        Blogs.doc(id).delete().then(() => {
            alert("Document successfully deleted!");
        }).catch((error) => {
            console.error("Error removing document: ", error);
        });
    };

    useEffect(() => {
        // Subscribe to query with onSnapshot
        const unsubscribe = Blogs.limit(100).onSnapshot(querySnapshot => {
          // Get all documents from collection - with IDs
          const data = querySnapshot.docs.map(doc => ({
            ...doc.data(),
            id: doc.id,
          }));
          // Update state
          setblogs(data);
        });

        // Detach listener
        return unsubscribe;
      }, []);

    return (
        <div >
        <h2 className="w-full text-center font-bold text-xl">All blogs List</h2>
            {blogslist.map(blog=> (
                <div key={blog.id}>
                    <p>Title : {blog.Title}</p>
                    <p>body: {blog.Body} </p>
                    <Link to={"/blog/"+blog.id}
                        class="mr-2 bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-1 px-2 border border-indigo-500 rounded"
                        >View
                    </Link>
                    <Link to={"/blog/edit/"+blog.id}
                        class="mr-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 border border-blue-500 rounded"
                        >Edit
                    </Link>
                    <button 
                        onClick={()=> {DeleteBlog(blog.id)}} 
                    >delete</button>
                </div>
            ))}
    </div>
    );
  };

export default Bloglist;

actually you can see we have already add two links in our list , which are View link and Edit link.

before creating View and edit page we have to take a look on our routers. so we will add routers tag in our app.js file



<Router>
      <Navbar/>
    <Routes>
        <Route exact path='/' element={<Home/>} />
        <Route exact path='/blog/' element={<Bloglist/>} />

        <Route path='/blog/create' element={<CreateBlog/>}  />
        <Route path='/blog/:id' element={<BlogView/>}  />
        <Route path='/blog/edit/:id' element={<BlogEdit/>}  />

    </Routes>
    </Router>

we use Home, Bloglist , Createblog, BlogView and BlogEdit tags. so will import them from their files.



import CreateBlog from "./components/blogs/create";
import Bloglist from "./components/bloglist";
import BlogView from "./components/blogs/show";
import BlogEdit from "./components/blogs/edit";

import Home from "./components/pages/home";
import Navbar from "./components/temps/navbar";

Now our complete app.js file will look like this



import CreateBlog from "./components/blogs/create";
import Bloglist from "./components/bloglist";
import BlogView from "./components/blogs/show";
import BlogEdit from "./components/blogs/edit";

import Home from "./components/pages/home";
import Navbar from "./components/temps/navbar";

import React from "react";
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Router>
      <Navbar/>
    <Routes>
        <Route exact path='/' element={<Home/>} />
        <Route exact path='/blog/' element={<Bloglist/>} />

        <Route path='/blog/create' element={<CreateBlog/>}  />
        <Route path='/blog/:id' element={<BlogView/>}  />
        <Route path='/blog/edit/:id' element={<BlogEdit/>}  />

    </Routes>
    </Router>
  );
}

export default App;

Now we will create Edit.js for blogEdit and show.js to BlogView.

Show.js



import React, { useState }from 'react'
import { useParams } from "react-router-dom";


import fb from '../firebase';
const db = fb.firestore()
const Blogs = db.collection('blogs');


const BlogView = () => {
    const { id } = useParams();

    const [blog, setblog] = useState([]); 
    Blogs.doc(id).get().then((snapshot) => {
        const data = snapshot.data();
        setblog(data);
    });

    return (
        <div>
            <div className="w-full max-w-2xl mx-auto">       
                <h1 className="text-2xl">
                    <span><b>Title :</b></span>
                    <span>{blog.Title}</span>
                </h1>
                <p><b>Body :</b></p>
                <p>{blog.Body}</p>

            </div>            
        </div>
    );
};

export default BlogView;

Edit.js



import React, { useEffect, useState }from 'react'
import { useParams } from "react-router-dom";


import fb from '../firebase';
const db = fb.firestore()
const Blogs = db.collection('blogs');


const BlogEdit = () => {
    const { id } = useParams();

    const [title , SetTitle] = useState("");
    const [body , SetBody] = useState("");

    useEffect( (id)=> {
        Blogs.doc(id).get().then((snapshot) => {
            const data = snapshot.data();
            SetTitle(data.Title);
            SetBody(data.Body);
        });
    },[]);

    const sub = (e) => {
        e.preventDefault();

        // Add data to the store
        Blogs.doc(id).update({
            Title: title,
            Body: body,
            last_Updated: fb.firestore.Timestamp.fromDate(new Date())
        })
        .then((docRef) => {
            alert("Data Successfully Updated");
        })
        .catch((error) => {
            console.error("Error adding document: ", error);
        });
    }
    return (
        <div>

        <form onSubmit={(event) => {sub(event)}}>    
            <input type="text" placeholder="Title"  value={title}
            onChange={(e)=>{SetTitle(e.target.value)}} required />

            <textarea  name="content" type="text" value={body}
            placeholder="write yoyr content here" 
            rows="10" cols="150" onChange={(e)=>{SetBody(e.target.value)}} required >
            </textarea>

            <button type="submit">Submit</button>
        </form>
        </div>
    );
};

export default BlogEdit;

now save your files and run npm start.
And Your project is ready.
in this blog we will not discuss about styling.

You can read source code from git repo Click here

You can watch youtube video of this blog.
Watch

Feel free to ask any doubt in comment section.
Thank you for reading