hiteshchoudhary · Raijin-cyber · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025
diff --git a/examples/public/quotes/.gitkeep b/examples/public/quotes/.gitkeep
diff --git a/examples/public/quotes/web/react-vite-tailwind/.env.sample b/examples/public/quotes/web/react-vite-tailwind/.env.sample
@@ -0,0 +1,4 @@
+########### BASE URL ############
+####### Paste the API Endpoint URL from freeAPI docs #######
+VITE_BASE_URL = ""
+########### BASE URL END ############
diff --git a/examples/public/quotes/web/react-vite-tailwind/.gitignore b/examples/public/quotes/web/react-vite-tailwind/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/public/quotes/web/react-vite-tailwind/README.md b/examples/public/quotes/web/react-vite-tailwind/README.md
@@ -0,0 +1,55 @@
+## Live Website Link
+
+[Random Quote Generator](https://quotegenerator-three-henna.vercel.app)        
+
+## 🧠 Dependencies Used
+
+1. React + Vite
+2. Tailwind Css
+3. tsParticles 
+
+## 🚀 Installation and Setup
+
+1. **Fork** the repo to your GitHub account, then **clone** it to your local machine:
+   ```bash
+   git clone https://github.com/your-username/repo-name.git
+   ```
+
+2. In the root folder, install dependencies:
+   ```bash
+   npm i
+   ```
+
+3. Follow the Tailwind CSS setup guide for Vite:
+   👉 [Tailwind Vite Setup](https://tailwindcss.com/docs/installation/using-vite)
+
+4. Install **tsParticles** library for animated background:
+   ```bash
+   npm i @tsparticles/all
+   ```
+
+5. Go to **FreeAPI's documentation**, and find the "Get Quote by ID" section:  
+   👉 [FreeAPI Docs](https://freeapi.hashnode.space/api-guide/apireference/getQuoteById)
+
+6. Create a `.env` file in the root folder and paste the content from `.env.sample` into it.
+
+7. Copy the API endpoint URL from the FreeAPI docs and modify it:  
+   From:
+   ```
+   https://api.freeapi.app/api/v1/public/quotes/{quoteId}
+   ```
+   To:
+   ```
+   https://api.freeapi.app/api/v1/public/quotes
+   ```  
+   Then paste this into the `BASE_url` key in your `.env` file (within quotes).
+
+8. Save everything, then run the app:
+   ```bash
+   clear
+   npm run dev
+   ```
+
+---
+
+🎉 **Enjoy the app!** 🥳🥳
diff --git a/examples/public/quotes/web/react-vite-tailwind/eslint.config.js b/examples/public/quotes/web/react-vite-tailwind/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
diff --git a/examples/public/quotes/web/react-vite-tailwind/index.html b/examples/public/quotes/web/react-vite-tailwind/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quote Generator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>