Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devymanish/tut-1
https://github.com/devymanish/tut-1
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/devymanish/tut-1
- Owner: DevyManish
- Created: 2024-12-26T12:16:00.000Z (about 1 month ago)
- Default Branch: master
- Last Pushed: 2024-12-26T13:04:38.000Z (about 1 month ago)
- Last Synced: 2024-12-26T13:39:38.595Z (about 1 month ago)
- Language: JavaScript
- Size: 69.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Firebase Admission App
A 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.
## Table of Contents
1. [Getting Started](#getting-started)
2. [Installing Tailwind CSS](#installing-tailwind-css)
3. [Setting Up Firebase](#setting-up-firebase)
4. [Building Components](#building-components)
- [AdmissionForm Component](#admissionform-component)
- [SignUp Component](#signup-component)
5. [Adding Components to App.js](#adding-components-to-appjs)
6. [Finalizing the Project](#finalizing-the-project)
---
## Getting Started
### Step 1: Install React using Vite
1. Create a new Vite project:
```bash
npm create vite@latest react-firebase-app --template react
```
2. Navigate to the project directory:
```bash
cd react-firebase-app
```
3. Install dependencies:
```bash
npm install
```
4.Start the development server:
```bash
npm run dev
```
Installing Tailwind CSS
Install Tailwind CSS dependencies:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```
Configure tailwind.config.js:
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,jsx}"],
theme: {
extend: {},
},
plugins: [],
};
```
Add Tailwind directives to your CSS file (index.css):
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
Run the development server to ensure Tailwind CSS is working.
```
Setting Up Firebase
Install Firebase:
```bash
npm install firebase
```
Create a Firebase project in the Firebase Console.
Add your app's Firebase configuration to a new file src/configuration.js:
```javascript
// src/configuration.js
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};
export const app = initializeApp(firebaseConfig);
```
Enable Google Authentication and Realtime Database in Firebase Console.
Building Components
AdmissionForm Component
Create a form to collect user details and save them to Firebase Realtime Database.
```javascript
// src/components/AdmissionForm.js
import React, { useState } from "react";
import { getDatabase, ref, set} from "firebase/database";
import {app} from "../firebaseConfig";
//creating db instance
const myDB= getDatabase(app);
function AdmissionForm() {
const [formData, setFormData] = useState({
name: "",
age: "",
grade: "",
email: "",
phone: "",
address: "",
picture: null,
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};
const handleFileChange = (e) => {
setFormData({
...formData,
picture: e.target.files[0],
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log("Form Data Submitted:", formData);
const fName = formData.name.split(" ")[0].toLowerCase();
set(ref(myDB, `forms/${fName}`), {
...formData
})
};
return (
School Admission Form
Name
Age
Grade
Email
Phone
Address
Upload Picture
Submit
);
}
export default AdmissionForm;
```
SignUp Component
Allow users to sign in with Google and display their avatar.
```javascript
// src/components/SignUp.js
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { useState } from "react";
import { app } from "../configuration";
const auth = getAuth(app);
const googleProvider = new GoogleAuthProvider();
function SignUp() {
const [user, setUser] = useState(null);
const signupWithGoogle = async () => {
try {
const result = await signInWithPopup(auth, googleProvider);
setUser(result.user);
} catch (error) {
console.error("Error signing in:", error.message);
}
};
return (
{!user ? (
Sign In with Google
) : (
Welcome, {user.displayName}
)}
);
}
export default SignUp;
```
Adding Components to App.js
Update your App.js to include the components:
```javascript
import React from "react";
import AdmissionForm from "./components/AdmissionForm";
import SignUp from "./components/SignUp";
function App() {
return (
);
}
export default App;
```
Finalizing the Project
Start the development server:
```bash
npm run dev
```
Test the following features:
Sign in with Google.
Submit the admission form and verify the data in Firebase Realtime Database.
Done! 🎉