{"id":24718283,"url":"https://github.com/devymanish/tut-1","last_synced_at":"2026-04-09T17:55:59.682Z","repository":{"id":269829558,"uuid":"908577967","full_name":"DevyManish/tut-1","owner":"DevyManish","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-26T13:04:38.000Z","size":71,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T10:35:58.967Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/DevyManish.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-26T12:16:00.000Z","updated_at":"2024-12-26T13:04:42.000Z","dependencies_parsed_at":"2024-12-26T17:49:19.048Z","dependency_job_id":null,"html_url":"https://github.com/DevyManish/tut-1","commit_stats":null,"previous_names":["devymanish/tut-1"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DevyManish/tut-1","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevyManish%2Ftut-1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevyManish%2Ftut-1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevyManish%2Ftut-1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevyManish%2Ftut-1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevyManish","download_url":"https://codeload.github.com/DevyManish/tut-1/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevyManish%2Ftut-1/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262068218,"owners_count":23253768,"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","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":"2025-01-27T10:14:02.281Z","updated_at":"2025-12-30T22:23:54.483Z","avatar_url":"https://github.com/DevyManish.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Firebase Admission App\n\nA simple React app built using Vite, Tailwind CSS, and Firebase. This project includes a sign-up functionality with Google authentication and an admission form to store user data in Firebase Realtime Database.\n\n## Table of Contents\n\n1. [Getting Started](#getting-started)\n2. [Installing Tailwind CSS](#installing-tailwind-css)\n3. [Setting Up Firebase](#setting-up-firebase)\n4. [Building Components](#building-components)\n   - [AdmissionForm Component](#admissionform-component)\n   - [SignUp Component](#signup-component)\n5. [Adding Components to App.js](#adding-components-to-appjs)\n6. [Finalizing the Project](#finalizing-the-project)\n\n---\n\n## Getting Started\n\n### Step 1: Install React using Vite\n\n1. Create a new Vite project:\n   ```bash\n   npm create vite@latest react-firebase-app --template react\n   ```\n2. Navigate to the project directory:\n\n```bash\ncd react-firebase-app\n```\n\n3. Install dependencies:\n\n```bash\nnpm install\n```\n\n4.Start the development server:\n\n```bash\nnpm run dev\n```\n\nInstalling Tailwind CSS\nInstall Tailwind CSS dependencies:\n\n```bash\n\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\n\nConfigure tailwind.config.js:\n\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\"./index.html\", \"./src/**/*.{js,jsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n```\n\nAdd Tailwind directives to your CSS file (index.css):\n\n```css\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\nRun the development server to ensure Tailwind CSS is working.\n```\n\nSetting Up Firebase\nInstall Firebase:\n\n```bash\n\nnpm install firebase\n```\n\nCreate a Firebase project in the Firebase Console.\n\nAdd your app's Firebase configuration to a new file src/configuration.js:\n\n```javascript\n// src/configuration.js\nimport { initializeApp } from \"firebase/app\";\n\nconst firebaseConfig = {\n  apiKey: \"YOUR_API_KEY\",\n  authDomain: \"YOUR_AUTH_DOMAIN\",\n  databaseURL: \"YOUR_DATABASE_URL\",\n  projectId: \"YOUR_PROJECT_ID\",\n  storageBucket: \"YOUR_STORAGE_BUCKET\",\n  messagingSenderId: \"YOUR_MESSAGING_SENDER_ID\",\n  appId: \"YOUR_APP_ID\",\n};\n\nexport const app = initializeApp(firebaseConfig);\n```\n\nEnable Google Authentication and Realtime Database in Firebase Console.\n\nBuilding Components\nAdmissionForm Component\nCreate a form to collect user details and save them to Firebase Realtime Database.\n\n```javascript\n// src/components/AdmissionForm.js\nimport React, { useState } from \"react\";\nimport { getDatabase, ref, set} from \"firebase/database\";\nimport {app} from \"../firebaseConfig\";\n\n//creating db instance\nconst myDB= getDatabase(app);\n\nfunction AdmissionForm() {\n  const [formData, setFormData] = useState({\n    name: \"\",\n    age: \"\",\n    grade: \"\",\n    email: \"\",\n    phone: \"\",\n    address: \"\",\n    picture: null,\n  });\n\n  const handleChange = (e) =\u003e {\n    const { name, value } = e.target;\n    setFormData({\n      ...formData,\n      [name]: value,\n    });\n  };\n\n  const handleFileChange = (e) =\u003e {\n    setFormData({\n      ...formData,\n      picture: e.target.files[0],\n    });\n  };\n\n  const handleSubmit = (e) =\u003e {\n    e.preventDefault();\n    console.log(\"Form Data Submitted:\", formData);\n    const fName = formData.name.split(\" \")[0].toLowerCase();\n    set(ref(myDB, `forms/${fName}`), {\n      ...formData\n    })\n    \n  };\n\n\n\n  return (\n    \u003cdiv className=\"w-full mt-8 text-black mx-auto p-6 bg-white shadow-md rounded-lg \"\u003e\n      \u003ch2 className=\"text-2xl font-bold text-center mb-6\"\u003eSchool Admission Form\u003c/h2\u003e\n      \u003cform onSubmit={handleSubmit} className=\"space-y-4\"\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"name\" className=\"block text-sm font-medium text-gray-700\"\u003eName\u003c/label\u003e\n          \u003cinput\n            type=\"text\"\n            id=\"name\"\n            name=\"name\"\n            value={formData.name}\n            onChange={handleChange}\n            className=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm\"\n            required\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"age\" className=\"block text-sm font-medium text-gray-700\"\u003eAge\u003c/label\u003e\n          \u003cinput\n            type=\"number\"\n            id=\"age\"\n            name=\"age\"\n            value={formData.age}\n            onChange={handleChange}\n            className=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm\"\n            required\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"grade\" className=\"block text-sm font-medium text-gray-700\"\u003eGrade\u003c/label\u003e\n          \u003cinput\n            type=\"text\"\n            id=\"grade\"\n            name=\"grade\"\n            value={formData.grade}\n            onChange={handleChange}\n            className=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm\"\n            required\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700\"\u003eEmail\u003c/label\u003e\n          \u003cinput\n            type=\"email\"\n            id=\"email\"\n            name=\"email\"\n            value={formData.email}\n            onChange={handleChange}\n            className=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm\"\n            required\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"phone\" className=\"block text-sm font-medium text-gray-700\"\u003ePhone\u003c/label\u003e\n          \u003cinput\n            type=\"text\"\n            id=\"phone\"\n            name=\"phone\"\n            value={formData.phone}\n            onChange={handleChange}\n            className=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm\"\n            required\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"address\" className=\"block text-sm font-medium text-gray-700\"\u003eAddress\u003c/label\u003e\n          \u003ctextarea\n            id=\"address\"\n            name=\"address\"\n            value={formData.address}\n            onChange={handleChange}\n            className=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm\"\n            required\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"picture\" className=\"block text-sm font-medium text-gray-700\"\u003eUpload Picture\u003c/label\u003e\n          \u003cinput\n            type=\"file\"\n            id=\"picture\"\n            name=\"picture\"\n            accept=\"image/*\"\n            onChange={handleFileChange}\n            className=\"mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border file:border-gray-300 file:bg-gray-50 file:text-gray-700 hover:file:bg-gray-100\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003cbutton\n            type=\"submit\"\n            className=\"w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\"\n          \u003e\n            Submit\n          \u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/form\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default AdmissionForm;\n\n```\n\nSignUp Component\nAllow users to sign in with Google and display their avatar.\n\n```javascript\n// src/components/SignUp.js\nimport { getAuth, signInWithPopup, GoogleAuthProvider } from \"firebase/auth\";\nimport { useState } from \"react\";\nimport { app } from \"../configuration\";\n\nconst auth = getAuth(app);\nconst googleProvider = new GoogleAuthProvider();\n\nfunction SignUp() {\n  const [user, setUser] = useState(null);\n\n  const signupWithGoogle = async () =\u003e {\n    try {\n      const result = await signInWithPopup(auth, googleProvider);\n      setUser(result.user);\n    } catch (error) {\n      console.error(\"Error signing in:\", error.message);\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      {!user ? (\n        \u003cbutton\n          onClick={signupWithGoogle}\n          className=\"bg-gray-800 text-white px-4 py-2 rounded\"\n        \u003e\n          Sign In with Google\n        \u003c/button\u003e\n      ) : (\n        \u003cdiv className=\"flex items-center space-x-4\"\u003e\n          \u003cimg\n            src={user.photoURL}\n            alt=\"Avatar\"\n            className=\"w-12 h-12 rounded-full\"\n          /\u003e\n          \u003cp\u003eWelcome, {user.displayName}\u003c/p\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n\nexport default SignUp;\n```\n\nAdding Components to App.js\nUpdate your App.js to include the components:\n\n```javascript\nimport React from \"react\";\nimport AdmissionForm from \"./components/AdmissionForm\";\nimport SignUp from \"./components/SignUp\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"min-h-screen p-4 bg-gray-100\"\u003e\n      \u003cSignUp /\u003e\n      \u003cdiv className=\"mt-8\"\u003e\n        \u003cAdmissionForm /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nFinalizing the Project\nStart the development server:\n\n```bash\n\nnpm run dev\n```\n\nTest the following features:\n\nSign in with Google.\nSubmit the admission form and verify the data in Firebase Realtime Database.\nDone! 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevymanish%2Ftut-1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevymanish%2Ftut-1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevymanish%2Ftut-1/lists"}