A comprehensive guide to getting started with Firebase, covering the essential services including Authentication, Hosting, and Firestore Database. This project demonstrates how to integrate Firebase into your web applications using HTML, CSS, and JavaScript.
- 🔐 Firebase Authentication - Secure user authentication
- 🌐 Firebase Hosting - Fast and secure web hosting
- 📊 Firestore Database - Scalable NoSQL cloud database
- 💻 Modern Web Stack - Built with HTML5, CSS3, and JavaScript
- HTML5 - Markup language for structuring content
- CSS3 - Styling and layout
- JavaScript - Client-side programming
- Firebase SDK - Backend services and APIs
- Firebase Auth - User authentication and management
- Firebase Hosting - Static web hosting
- Firestore - Cloud-based NoSQL database
- Node.js and npm installed
- Firebase account
- Firebase CLI installed globally
- Clone the repository
git clone <your-repo-url>
cd firebase-basics- Install Firebase CLI
npm install -g firebase-tools- Login to Firebase
firebase login- Initialize Firebase in your project
firebase init- Select the services you need:
- Firebase Hosting
- Firestore
- Authentication
- Create a Firebase project in the Firebase Console
- Register your web app and copy the configuration
- Add your Firebase config to your JavaScript file:
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);// Sign up new users
firebase.auth().createUserWithEmailAndPassword(email, password);
// Sign in existing users
firebase.auth().signInWithEmailAndPassword(email, password);
// Sign out
firebase.auth().signOut();// Get reference to Firestore
const db = firebase.firestore();
// Add data
db.collection("users").add({
name: "John Doe",
email: "[email protected]",
});
// Get data
db.collection("users")
.get()
.then((snapshot) => {
snapshot.docs.forEach((doc) => {
console.log(doc.data());
});
});firebase deployfirebase-basics/
├── public/
│ ├── index.html
│ ├── styles.css
│ └── app.js
├── firebase.json
├── .firebaserc
└── README.md
This project is licensed under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
For support, please open an issue in the repository or contact the maintainers.
Made with ❤️ using Firebase