Before you begin
Prerequisites
A Firebase Account
Knowledge of Next.js and JavaScript
What you'll learn
How to use Firebase with the Next.js App Router and server-side rendering.
How to Send images in Cloud Storage for Firebase.
How to read and write data in a Cloud Firestore database.
What you'll need
Firebase Account
A recent stable version of Node.js
A browser of your choice, such as Google Chrome
A development environment with a code editor and terminal
The ability to upgrade your Firebase project to the Blaze pricing plan
2. Set up your development environment and Install Firebase SDK
Install or update the Firebase CLI
npm install -g firebase-tools@latest
If you're unable to install the Firebase CLI because of permission errors, see the npm documentation or use another installation option.
3. Set up your Firebase project
In this section, you'll set up a Firebase project and associate a Firebase web app with it. You'll also set up the Firebase services used by the sample web app.
Create a Firebase project
In the Firebase console, click Add project.
In the Enter your project name text box, enter
FriendlyEats Codelab(or a project name of your choice), and then click Continue.In the Confirm Firebase billing plan modal, confirm the plan is Blaze, and then click Confirm plan
For this codelab, you don't need Google Analytics, so toggle off the Enable Google Analytics for this project option.
Click Create project.
Wait for your project to provision, and then click Continue.
In your Firebase project, go to Project Settings. Note your project ID because you need it later. This unique identifier is how your project is identified (for example, in the Firebase CLI).
4. Create Firebase Sdk
// firebaseConfig.js
import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
//You're Config Files
};
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
const db = getFirestore(app);
export { storage, db };
5. Import Firebase & Firestore
"use client"
import { storage, db } from "../firebase";
import { useState } from "react";
import Link from "next/link";
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { collection, addDoc } from 'firebase/firestore';
Now The Coding Part
Frontend Form
Copy and paste this in you're component U will have a working Firebase Store Don't forget to use "use client"
"use client"
import { storage, db } from "../firebase";
import { useState } from "react";
import Link from "next/link";
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { collection, addDoc } from 'firebase/firestore';
import "./v.css"
export default function Ads() {
const [name, setName] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [petbreed, setpetbreed] = useState('');
const [department, setDepartment] = useState('');
const [address, setaddress] = useState('');
const [image, setImage] = useState(null);
const [showPopup, setShowPopup] = useState(false);
const handleImageChange = (e) => {
if (e.target.files[0]) {
setImage(e.target.files[0]);
}
};
const timestamp = new Date();
const handleSubmit = async (e) => {
e.preventDefault();
if (image) {
const storageRef = ref(storage, `images/${image.name}`);
await uploadBytes(storageRef, image);
const imageUrl = await getDownloadURL(storageRef);
const docRef = await addDoc(collection(db, 'users'), {
name,
phoneNumber,
imageUrl,
address,
petbreed,
department,
timestamp: timestamp
});
setShowPopup(true);
setTimeout(() => {
window.location.href = '/'; // Replace '/success' with the actual URL of the page you want to redirect to
}, 4000);
console.log('Document written with ID: ', docRef.id);
}
};
return (
<div className='bg-black'>
<div class="area">
<section class="bg-blue-50 dark:bg-slate-800" id="contact">
<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
<div class="mb-4">
<div class="mb-6 max-w-3xl text-center sm:text-center md:mx-auto md:mb-12">
<p class="text-base font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-200">
Post Ad
</p>
<h2
class="font-heading mb-4 font-bold tracking-tight text-gray-100 dark:text-white text-3xl sm:text-5xl">
Get in Touch
</h2>
<p class="mx-auto mt-4 max-w-3xl text-xl text-gray-100 dark:text-slate-400">ABU PET ADOPTION
</p>
</div>
</div>
<div class="flex items-stretch justify-center">
<div class="grid md:grid-cols-2">
<div class="h-full pr-6">
<p class="mt-3 mb-12 text-lg text-gray-50 dark:text-slate-50">
We do not share details with anybody. Ensure that you are not posting illegal pets such as tortoises or dictator scorpions. Once we review your Ad, we will publish on our site.
</p>
<p class="mt-3 mb-12 text-lg text-red-500" >
Ads will be removed after 12 days. Feel free to repost, add more content.<br/>
If u want to put Ads on Featured Section u can <u><Link id='sd' href="https://www.instagram.com/vpnwan">Contact Me </Link></u>
</p>
<ul class="mb-6 md:mb-0">
<li class="flex">
<div class="flex h-10 w-10 items-center justify-center rounded bg-blue-900 text-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="h-6 w-6">
<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
<path
d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z">
</path>
</svg>
</div>
<div class="ml-4 mb-4">
<h3 class="mb-2 text-lg font-medium leading-6 text-gray-100 dark:text-white">Our Address
</h3>
<p class="text-yellow-600 dark:text-slate-400">ABUROAD Rajasthan</p>
</div>
</li>
</ul>
<ul class="mb-6 md:mb-0">
<li class="flex">
<div class="flex h-10 w-10 items-center justify-center rounded text-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
<line x1="17.5" y1="6.5" x2="17.5" y2="6.5"/>
</svg>
</div>
<div class="ml-4 mb-4">
<h3 class="mb-2 text-lg font-medium leading-6 text-gray-100 dark:text-white">Instagram Handle
</h3>
<a href='https://www.instagram.com/vpnwan'><p class="text-yellow-600 dark:text-slate-400">@VpnWan</p> </a>
</div>
</li>
</ul>
</div>
<div class="card h-fit max-w-6xl p-5 md:p-12" id="form">
<h2 class="mb-4 text-2xl font-bold dark:text-white">Ready to Get Started?</h2>
<form class="mt-2" method='POST' onSubmit={handleSubmit} >
<div class="mb-6"><br/>
<label for="address" class="block text-gray-700 text-sm font-bold mb-2">Name:</label>
<input value={name} onChange={(e) => setName(e.target.value)} style={{ color: 'black' }} type="text" id="name" name="name" class="border-2 border-gray-400 rounded-md px-4 py-2 w-full focus:outline-none focus:border-yellow-500" placeholder="Name" required/>
</div>
<div class="mb-6">
<label for="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label>
<input value={address} onChange={(e) => setaddress(e.target.value)}style={{ color: 'black' }} type="text" id="address" name="address" class="border-2 border-gray-400 rounded-md px-4 py-2 w-full focus:outline-none focus:border-yellow-500" placeholder="Enter your address" required/>
</div>
<div class="mb-6">
<label for="phone" class="block text-gray-700 text-sm font-bold mb-2">Phone Number:</label>
<input
value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)}
pattern="[0-9]{10}"
title='10 Digit Number'
style={{ color: 'black' }} type="tel" id="phone" name="phn" class="border-2 border-gray-400 rounded-md px-4 py-2 w-full focus:outline-none focus:border-yellow-500" placeholder="Enter your phone number" required />
</div>
<div class="mb-6">
<label for="petname" class="block text-gray-700 text-sm font-bold mb-2">Pet Breed:</label>
<input style={{ color: 'black' }} value={petbreed} onChange={(e) => setpetbreed(e.target.value)} type="text" id="petname" name="breed" class="border-2 border-gray-400 rounded-md px-4 py-2 w-full focus:outline-none focus:border-yellow-500" placeholder="Enter your pet's name" required/>
</div>
<div class="mb-6">
<label for="photo" class="block text-gray-700 text-sm font-bold mb-2">Photo:</label>
<input style={{ color: 'black' }} onChange={handleImageChange} type="file" id="photo" name="photo" accept="image/*" class="border-2 border-gray-400 rounded-md px-4 py-2 w-full focus:outline-none focus:border-yellow-500" required/>
</div>
<div class="mb-6">
<div class="flex items-center space-x-4">
<div style={{ color: 'black' }}>
<label htmlFor="dropdown" className="block text-gray-700">Select an option:</label>
<select value={department} onChange={(e) => setDepartment(e.target.value)} required>
<option value="">Select Type</option>
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Other">Others</option>
{/* Add more options as needed */}
</select>
</div>
</div>
</div>
<div class="flex justify-end">
<button type="submit" class="bg-yellow-500 text-white px-4 py-2 rounded-md hover:bg-yellow-600 focus:outline-none focus:bg-yellow-600">Submit</button>
</div>
</form>
{showPopup && (
<div className="popup">
<div className="popup-content">
<p>ThankYou ! Please wait 24hours for review.<br/>
Redirecting you...</p>
<h1>Please Wait</h1>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</section>
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
)
}