GithubHelp home page GithubHelp logo

mahdi-hazrati / firebase-user-management-dashboard Goto Github PK

View Code? Open in Web Editor NEW
3.0 3.0 2.0 79 KB

This is a simple client-side dashboard built with HTML, CSS, and JavaScript that interacts with the Firebase Realtime Database API to create, delete, show, and edit user information.

License: MIT License

HTML 19.41% CSS 38.36% JavaScript 42.23%
firebase firebase-database firebase-realtime-database usermanagementsystem dashboard dashboard-templates firebase-dashboard vanilla-javascript vanilla-js

firebase-user-management-dashboard's Introduction

Firebase Realtime Database User Management Dashboard

This is a simple client-side dashboard built with HTML, CSS, and JavaScript that interacts with the Firebase Realtime Database API to create, delete, show, and edit user information. The project uses vanilla JavaScript and does not require any external libraries or frameworks. All CRUD operations are performed through HTTP requests to the Firebase Realtime Database API.

User Management Dashboard

Features

  • Create new users in the Firebase Realtime Database
  • Retrieve a list of all users in the database
  • Update user information in the database
  • Delete users from the database

Usage

To use the application, simply clone the repository and open the index.html file in your browser. Before running the application, make sure you have set up a Firebase project and updated the Firebase configuration values in JavaScript/app.js and with your own Firebase project credentials.

const endPointUrl ="{PUT YOUR PROJECT NAME HERE}.firebaseio.com/"

Creating a User

To create a new user, click the "Create User" button and fill out the form fields with the user's name, email address, and password. Click the "Save Changes" button to add the new user to the Firebase Realtime Database.

Creating a User

Retrieving User Data

To retrieve a list of all users in the database, click the "Show Users" button. The dashboard will display a table of all users in the database, including their name, email address, and unique ID.

Retrieving User Data

Updating User Data

To update a user's data, click the "Edit " button next to the user's information in the table. Make any necessary changes to the form fields and click the "Save" button to update the user's information in the Firebase Realtime Database.

Updating User Data

Deleting a User

To delete a user from the database, click the "Delete" button next to the user's information in the table. The backend will remove the specified user from the Firebase Realtime Database.

Deleting a User

Endpoint URLs

To make GET, DELETE, PUT, and POST requests to the Firebase Realtime Database API, use the following endpoint URLs:

  • GET: https://<your-firebase-project-id>.firebaseio.com/users.json
  • DELETE: https://<your-firebase-project-id>.firebaseio.com/users/<user-id>.json
  • PUT: https://<your-firebase-project-id>.firebaseio.com/users/<user-id>.json
  • POST: https://<your-firebase-project-id>.firebaseio.com/users.json

Replace <your-firebase-project-id> with your actual Firebase project ID and <user-id> with the unique ID of the user you want to delete or update.

Contributing

Contributions are always welcome! If you find any bugs or have suggestions for new features, please open an issue or submit a pull request.

Support

If you find this project helpful, please consider giving it a star on GitHub. It helps others discover the project and encourages me to keep working on it.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.