When deploy the code/next.js app to firebase the images and icons may not be load to avoid this issue we have to add the URL of the website where we are deploying the code to images: { unoptimized: true, domains: [‘localhost’,’https://workorder-app.web.app/’], }, on “next.config.mjs” we have to… Continue reading How to resolve icon issue on the Next js when deployed to firebase
Author: Sangamesh
How to enable web frameworks in the firebase(i.e. next.js )
To enable the framework on the firebase, we have to write the command on the terminal that is To enable it use the command: firebase experiments:enable webframeworks
How to create a react web app/project using next.js by vercel
To create a React web app/project using Next.js 1. Install Node.js and npm: Ensure you have Node.js installed on your system, as Next.js requires Node.js to run. 2. Create a new Next.js project: Open your terminal and run the following command to create a new Next.js project: npx create-next-app my-next-app Replace my-next-app with the name… Continue reading How to create a react web app/project using next.js by vercel
How can we create a Pagination in react
Creating pagination in a React application involves managing the current page state and rendering the appropriate page content based on user interactions. import React, { useState } from ‘react’; const Pagination = ({ totalItems, itemsPerPage, onPageChange }) => { const [currentPage, setCurrentPage] = useState(1); // Calculate the total number of pages const… Continue reading How can we create a Pagination in react
How to Create price slider bar for filter section in react
In this article, we cover the topic of creating a slider in the filter section using react.js 1. Install ‘rc-slider”: we need to install therc-slider library, which provides customizable slider components for React. npm install rc-slider 2. Implement the Price Slider Component: Create a new component for the price slider. import React, { useState }… Continue reading How to Create price slider bar for filter section in react
How to send get and post request in API using Node JS & using Postman
This article covers the topic of How to send get and post request in API using Node JS & using Postman 1. Install Axios: First, we need to install the Axios library. we can do this by running the given command in our Node.js project directory: npm install axios 2. Sending GET and POST Requests… Continue reading How to send get and post request in API using Node JS & using Postman
How to create a user in the firebase using authentication function using react.js
Set Up Firebase Project: Go to the Firebase Console and create a new project. Set up Firebase Authentication in your project. Install Firebase SDK: In your React.js project, install the Firebase SDK using npm Command for installing firebase is “npm install firebase“ 3. Configure Firebase in Your React App: Create a Firebase configuration file, e.g.,… Continue reading How to create a user in the firebase using authentication function using react.js
How to save data to a firebase database (firestore) using firebase function using ReactJS
In Cloud Firestore, data is stored in collections. To add data to Firestore, import the Collection and addDoc functions. We also import the db initialized in the firebase.js file. When the button is clicked, the Cloud Firestore creates a collection (we have named it todos) and adds data as a document to the todos collection. For importing addDoc and Collection we first have to initialize the app… Continue reading How to save data to a firebase database (firestore) using firebase function using ReactJS
What is hooks and type of hooks used in the react.Js
React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side-effects. React provides a bunch of standard in-built hooks: useState: To manage states. Returns a stateful value and an updater function to update it. useEffect: To manage side-effects like… Continue reading What is hooks and type of hooks used in the react.Js
How to create a slider that compares two images using Css and JavaScript
Image Comparison Slider Create an Image Comparison Slider Step 1) Add HTML: Example Step 2) Add CSS: The container must have a “relative” positioning. Example Step 3) Add JavaScript: Example Step 4) Execute Script: Example