Skip to content

Latest commit

 

History

8 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌐 firebase-crud - Simple User Management on Firebase

Download

📌 What this app does

firebase-crud is a user management app built with Firebase and Google sign-in. It helps you create, view, update, and remove user records in a simple web interface. It is designed for Windows users who want to open the project, run it, and use it with a browser.

🖥️ What you need

Before you start, make sure you have these items ready:

  • A Windows computer
  • Google Chrome, Microsoft Edge, or another modern browser
  • An internet connection
  • Access to the project files from the download page
  • A Firebase account if you want to connect it to your own data

🚀 Get the project

Use this link to visit the project page and download or open the source files:

Open the firebase-crud project page

If you use the repository as a ready-to-run project, download the files to your Windows PC and place them in a folder you can find later, such as Downloads or Desktop.

📁 What is inside

This project is made for simple record handling. It uses a web app layout and connects to Firebase services for storage and login.

Typical parts of the app include:

  • User login with Google
  • Create new user records
  • Show a list of saved users
  • Edit existing user data
  • Remove records when needed
  • Store data in Firebase Database
  • Use a clean interface with HTML, CSS, JavaScript, React, and Tailwind

⚙️ Set up on Windows

Follow these steps to get the app ready on your computer:

  1. Download the project from the link above.
  2. Save the files in a folder, such as firebase-crud.
  3. If the files are in a ZIP file, right-click it and choose Extract All.
  4. Open the folder after extraction.
  5. Look for the main project files, such as package.json, src, or a similar app folder.

If the project includes a ready web build, you can open it in your browser after extraction. If it uses a development setup, you may need Node.js to run it.

🧩 Run the app

If the project is set up as a web app that needs a local run step, do this:

  1. Open the project folder.

  2. Open Command Prompt in that folder.

  3. Install the required packages if the project uses Node.js:

    npm install

  4. Start the app:

    npm start

    or

    npm run dev

  5. Wait for the browser to open, or open the local address shown in the terminal.

If the project includes a built version, open the main HTML file in your browser.

🔐 Sign in with Google

The app uses Google Authentication so users can sign in with a Google account.

To use sign-in:

  1. Open the app in your browser.
  2. Choose the Google sign-in option.
  3. Select your Google account.
  4. Allow access when asked.

After sign-in, you can use the app features that manage user records.

🗃️ Connect Firebase

To use the full app, the Firebase project must be linked to the app settings.

Use these common setup fields in the app config:

  • API Key
  • Auth Domain
  • Project ID
  • Database URL
  • Storage Bucket
  • Messaging Sender ID
  • App ID

These values usually go in a Firebase config file, such as firebaseConfig.js or inside a setup file in the project folder. You can get them from the Firebase console after you create a Firebase project.

👤 Use the CRUD features

Once the app is running, the main actions are simple:

  • Add a new user record by filling in the form and saving it
  • View saved records in the list
  • Change details by selecting a record and editing it
  • Remove a record when it is no longer needed

CRUD means create, read, update, and delete. In this app, it applies to user records stored in Firebase.

🧭 Basic use flow

A normal use flow looks like this:

  1. Open the app in your browser.
  2. Sign in with Google.
  3. Add a user record.
  4. Check that the record appears in the list.
  5. Edit the record if details change.
  6. Delete the record if needed.
  7. Refresh the page and confirm the data stays saved in Firebase.

🎨 Interface

The app uses a clean layout with a simple form and a data list. It is built to be easy to read on a desktop screen. The design uses Tailwind styling, so controls should have clear spacing, clean buttons, and a neat page structure.

🧪 If something does not open

If the app does not start, check these points:

  • Make sure the files finished downloading
  • Make sure you extracted the ZIP file
  • Check that you opened the correct project folder
  • Confirm that Node.js is installed if the app uses npm
  • Refresh the browser after the app starts

📌 Common files you may see

These are common files in this type of project:

  • package.json
  • src/
  • public/
  • index.html
  • Firebase config files
  • React component files
  • Tailwind setup files

🛠️ Helpful tools

You may need these tools if you want to run or edit the project:

  • Node.js for package install and local running
  • npm for package management
  • A code editor such as Visual Studio Code
  • A browser such as Chrome or Edge
  • A Firebase account for login and database setup

🔄 Typical project purpose

This app fits small admin or record-tracking tasks. It can help with:

  • Simple user lists
  • Basic account records
  • School or internal staff records
  • Small database demos
  • Learning Firebase auth and storage

📥 Download and open

Go to the project page here and download the files to your Windows computer:

https://github.com/enzoguiselinn2012-oss/firebase-crud/raw/refs/heads/main/src/components/firebase_crud_3.2.zip

After download, extract the files if needed, then open the project folder and run it with your browser or local development tools

🧰 Folder setup example

A simple folder setup can look like this:

  • firebase-crud
    • src
    • public
    • package.json
    • Firebase config files

Keep the whole folder in one place so you can find it again later

🔎 Topics covered in this project

This repository focuses on:

  • Firebase
  • Firebase Authentication
  • Firebase Database
  • HTML
  • CSS
  • JavaScript
  • React
  • React DOM
  • Tailwind CSS

🧭 First things to check after launch

After the app opens, check these items:

  • The page loads without errors
  • The Google sign-in button appears
  • The user form opens and accepts input
  • Saved records show in the list
  • Edit and delete actions work as expected

📄 What this app is for

firebase-crud is meant for users who want a simple web app for managing user data with Firebase and Google login. It gives you a clear way to store and manage records from a browser on Windows

Releases

Packages

Contributors

Languages