{"id":19398621,"url":"https://github.com/avi2492/fetching_data","last_synced_at":"2025-11-18T08:03:52.084Z","repository":{"id":210357931,"uuid":"726372535","full_name":"Avi2492/Fetching_data","owner":"Avi2492","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-02T07:36:24.000Z","size":76,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-03T23:36:55.773Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://fetching-data-brown.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Avi2492.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-12-02T07:34:31.000Z","updated_at":"2023-12-02T07:37:12.000Z","dependencies_parsed_at":"2023-12-02T08:38:45.616Z","dependency_job_id":null,"html_url":"https://github.com/Avi2492/Fetching_data","commit_stats":null,"previous_names":["avi2492/fetching_data"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Avi2492/Fetching_data","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Avi2492%2FFetching_data","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Avi2492%2FFetching_data/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Avi2492%2FFetching_data/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Avi2492%2FFetching_data/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Avi2492","download_url":"https://codeload.github.com/Avi2492/Fetching_data/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Avi2492%2FFetching_data/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285028340,"owners_count":27102545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-18T02:00:05.759Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T11:06:34.239Z","updated_at":"2025-11-18T08:03:52.049Z","avatar_url":"https://github.com/Avi2492.png","language":"JavaScript","readme":"# React + Vite - Admin dashboard\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n# Technologies Used \n## tailwind CSS, React.js, D3.js, react-router-dom, .fetch, API Integration, Cloud Storage - Firebase.\n\n# Installation Guidance\n\n## vite + react - \n- npm create vite@latest\n- \u003e Give Project Name\n  \u003e Select React\n  \u003e Select JavaScript\n- Project Setup Done\n- \u003e cd projectname\n  \u003e then install node_modules\n  \u003e npm I\n\n# Vite + React with Tailwind CSS Integration\n\nThis guide explains how to integrate Tailwind CSS with a Vite + React project.\n\n## 1. Create a Vite + React Project\n\nUse the following commands to create a new Vite + React project:\n\n```bash\nnpm create vite@latest my-react-app --template react\ncd my-react-app\nnpm install\nnpm install tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n```css\n/* index.css */\n@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n```\n```js\n// src/App.jsx\nimport React from 'react';\nimport './styles/tailwind.css';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"bg-gray-100 p-4\"\u003e\n      \u003ch1 className=\"text-2xl font-bold text-blue-500\"\u003eHello, Vite + React + Tailwind CSS!\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n```bash\nnpm run dev\n```\n\n## Install D3.js file to show data in graphs like I used pie chart\n\nThis guide outlines the steps to add D3.js, a powerful JavaScript library for data visualization, to a Vite + React project.\n\n## 1. Install D3.js\n\nUse npm to install D3.js in your project:\n\n```bash\nnpm install d3\n```\n```javascript\n// src/components/MyChart.jsx\nimport React, { useEffect, useRef } from 'react';\nimport * as d3 from 'd3';\n\nfunction MyChart() {\n  const chartRef = useRef();\n\n  useEffect(() =\u003e {\n    // D3.js code for creating the chart goes here\n\n    const svg = d3.select(chartRef.current);\n\n    // Example: Creating a simple bar chart\n    const data = [4, 8, 15, 16, 23, 42];\n\n    svg\n      .selectAll('rect')\n      .data(data)\n      .enter()\n      .append('rect')\n      .attr('x', (d, i) =\u003e i * 25)\n      .attr('y', (d) =\u003e 100 - d * 3)\n      .attr('width', 20)\n      .attr('height', (d) =\u003e d * 3)\n      .attr('fill', 'steelblue');\n  }, []);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eMy D3.js Chart\u003c/h2\u003e\n      \u003csvg ref={chartRef}\u003e\u003c/svg\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default MyChart;\n```\n## Done setup\n\n```bash\nnpm run dev\n```\n\n# Setting up React Router in Vite + React Project\n\nThis guide explains how to install `react-router-dom` and set up routing in a Vite + React project.\n\n## 1. Install `react-router-dom`\n\nUse npm to install `react-router-dom`:\n\n```bash\nnpm install react-router-dom\n```\n```javascript\n// src/components/Home.jsx\nimport React from 'react';\n\nfunction Home() {\n  return \u003ch2\u003eHome Page\u003c/h2\u003e;\n}\n\nexport default Home;\n```\n# Create a Router Component\n```javascript\n// src/components/Router.jsx\nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from './Home';\nimport About from './About';\n\nfunction AppRouter() {\n  return (\n    \u003cRouter\u003e\n      \u003cSwitch\u003e\n        \u003cRoute path=\"/\" exact component={Home} /\u003e\n        \u003cRoute path=\"/about\" component={About} /\u003e\n        {/* Add more routes as needed */}\n      \u003c/Switch\u003e\n    \u003c/Router\u003e\n  );\n}\n\nexport default AppRouter;\n```\n\n# To add firebase store in your project\n# Using Firebase Firestore in Vite + React Project\n\nThis guide explains how to integrate Firebase Firestore into your Vite + React project to save and retrieve data.\n\n## 1. Set Up Firebase Project\n\n- Create a Firebase project on the [Firebase Console](https://console.firebase.google.com/).\n- Go to the \"Firestore Database\" section and create a new Firestore database.\n\n## 2. Obtain Firebase Configuration\n\n- In your Firebase project settings, navigate to the \"Project settings\" \u003e \"General\" tab.\n- Scroll down to the \"Your apps\" section and select your web app.\n- Copy the Firebase SDK configuration snippet.\n\n## 3. Install Firebase in Your Project\n\nInstall Firebase in your Vite + React project:\n\n```bash\nnpm install firebase\n```\n## Configure Firebase in Your Project\n### Create a Firebase configuration file, for example, firebase.js, and paste the Firebase SDK configuration snippet:\n\n```javascript\n// firebase.js\nimport { initializeApp } from 'firebase/app';\nimport { getFirestore } from 'firebase/firestore';\n\nconst firebaseConfig = {\n  apiKey: 'YOUR_API_KEY',\n  authDomain: 'YOUR_AUTH_DOMAIN',\n  projectId: 'YOUR_PROJECT_ID',\n  storageBucket: 'YOUR_STORAGE_BUCKET',\n  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',\n  appId: 'YOUR_APP_ID',\n};\n\nconst app = initializeApp(firebaseConfig);\nconst firestore = getFirestore(app);\n\nexport default firestore;\n```\n# 5. Use Firestore in Your React Components\n### Now, you can use Firestore in your React components. For example, to save data:\n```javascript\n// src/components/SaveData.jsx\nimport React, { useState } from 'react';\nimport firestore from '../firebase';\n\nfunction SaveData() {\n  const [data, setData] = useState('');\n\n  const handleSaveData = async () =\u003e {\n    try {\n      // Save data to Firestore\n      const docRef = await addDoc(collection(firestore, 'your_collection_name'), {\n        data: data,\n      });\n\n      console.log('Document written with ID: ', docRef.id);\n    } catch (error) {\n      console.error('Error adding document: ', error);\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eSave Data to Firestore\u003c/h2\u003e\n      \u003cinput type=\"text\" value={data} onChange={(e) =\u003e setData(e.target.value)} /\u003e\n      \u003cbutton onClick={handleSaveData}\u003eSave Data\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default SaveData;\n```\n\n### ensure to add this also: \n```javacript\nimport { addDoc, collection } from 'firebase/firestore';\n```\n### run your project\n```bash\nnpm run dev\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favi2492%2Ffetching_data","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favi2492%2Ffetching_data","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favi2492%2Ffetching_data/lists"}