📋 Todo List CRUD and OAuth with Firebase

Related tags

Learning resource react oauth firebase crud hosting
Overview

Todo List CRUD and OAuth with Firebase

Esta es una app hecha con React y Firebase en la que puedas crear, leer, actualizar y borrar tareas dentro de una lista de tareas. El usuario solo pude crear, leer, actualizar y borrar las tareas que le pertenecen. Para eso el usuario debe estar logueado con Google, Facebook o Github.

Features

  • Login con Google
  • Login con Facebook
  • Login con GitHub
  • Crear tareas
  • Leer tareas
  • Actualizar tareas
  • Borrar tareas

Screenshots

image

image

Demo

Corre en local

Clona el repositorio

  git clone https://github.com/adonyssantos/cic-evaluation-app.git

Ve a la carpeta del proyecto

  cd cic-evaluation-app

Instala las dependencias

  npm install

Ejecuta la app

  npm run start

Funcionamiento

Autenticación

El usuario debe estar logueado para poder crear, leer, actualizar y borrar tareas. Para eso se utiliza una autenticación con Firebase. Se utilizan 3 providers para el login: Google, Facebook y Github.

Dentro de la carpeta src/utils/firebase-auth.js se encuentra toda la lógica de autenticación.

Funciones:

  • loginWithGoogle
  • loginWithFacebook
  • loginWithGithub
  • logout

Se almacenara en un state la información del usuario logueado. (email, photoUrl, uid...)

Base de datos

La base de datos utilizada es Firestore. Solo existe una colección llamada todos. Aquí se va a guardar toda la información.

  • id: Es el identificador de la tarea.
  • title: Es el título de la tarea.
  • completed: Es un booleano que indica si la tarea está completada o no.
  • userRef: Id del usuario que creó la tarea.

Dentro de la carpeta src/utils/firebase-db.js se encuentra toda la lógica de base de datos.

Funciones:

  • createTodo
  • readTodos
  • updateTodo
  • deleteTodo

Al momento de leer la colección, se va a filtrar utilizando el id del usuario que está logueado. Ejemplo: userRef == user.uid.

Hosting

La aplicación esta alojada en Firebase.

Comando para alojar la app:

  firebase deploy

Autores

You might also like...

A simple and basic app, where you can add your todo list and remove all selected or one of the items from the list

A simple and basic app, where you can add your todo list and remove all selected or one of the items from the list

Jun 14, 2022

Remix Auth plugin for Twitter OAuth 1.0a

Remix Auth Twitter Remix Auth plugin for Twitter OAuth 1.0a. Supported runtimes Runtime Has Support Node.js ✅ Cloudflare ✅ Demo Try out live demo (sou

Dec 31, 2022

OAuth 2 / OpenID Connect Client for Web API runtimes

OAuth 2 / OpenID Connect Client for Web APIs runtime This is a collection of bits and pieces upon which a more streamlined Client module may be writte

Jan 6, 2023

Express middleware for easy OAuth with a variety of providers.

accounted4 Express middleware for easy OAuth2 with a variety of providers. accounted4 is intended to make it easy for developers to add third-party OA

May 7, 2022

Minimalistic pre-configured OAuth 2.0 client for Deno. Inspired by grant.

DenoGrant Minimalistic pre-configured OAuth 2.0 client for Deno. Inspired by Grant. NOTE: this is alpha software subject to breaking changes at anytim

Dec 13, 2022

To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. It is built with HTML, CSS and JavaScript

To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. It is built with HTML, CSS and JavaScript

to do List To do list is a simple CRUD application that allows you to add, delete, update tasks that you are supposed to do. Built With HTML-5 CSS3 Ja

Jun 7, 2022

A simplified list crud that adds, removes and edits items

To-do list This project is as simplified todo list crud. Built With HTML CSS JavaScript Webpack Live version See live version Getting Started To get a

Apr 2, 2022

In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. I followed the JavaScript, CSS, HTML, DRY, KISS and YAGNI Best practices.

In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. I followed the JavaScript, CSS, HTML, DRY, KISS and YAGNI Best practices.

To Do list: add & remove In this project, I implement a Simple To Do List with the CRUD (create, read, update, delete) methods. All the elements of th

Nov 20, 2022

A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

To Do list: interactive list description: A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScrip

Aug 4, 2022
Comments
  • Add styles

    Add styles 

    /* Search form */
form {
}

form input {
}

form button {
}

/* Todo list */
ul {
}

ul li {
}

ul li s,
ul li span {
}

ul li button {
}

/* Login buttons */
.login-btns {
}

.login-btns button {
}
    opened by adonyssantos 0
Owner
Adonys Santos
Junior Frontend Developer with React.js | TypeScript | Firebase
Adonys Santos
GitHub https://todo.adonys.me/
TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

Todo TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list. App Screenshot Live Demo Todo Ap

Ishmael Kargbo 3 May 12, 2022
Login of app to remind to drink water, using Firebase tools like Firebase Auth and Firebase Firestore

Water Reminder Login App Menu Contents Motivation Final Images How to download the project and run it? Technologies utilized Dev ?? Motivation This ap

Ilda Neta 10 Aug 22, 2022
Angular 14 Firebase CRUD with Realtime Database - AngularFireDatabase Object and List example: create, retrieve, update, delete

Angular 14 Firebase CRUD example with Realtime DataBase | AngularFireDatabase Build Angular 14 CRUD example with Firebase Realtime Database that uses

null 7 Dec 26, 2022
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

tarike bouari 9 Sep 9, 2022
This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 2022
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
A simple Todo App with check complete function and filter todo. Made with React and TypeScript.

A simple Todo App with check complete function and filter todo. Made with React and TypeScript. The app can Add, Delete and Edit todo. Todo can be sorted by Complete or Active.

Bao Nguyen 9 Dec 6, 2022
Full-Stack CRUD Application With Angular + Firebase Database + Authentication + REST APIs

BookCompany Full-Stack CRUD Application With Angular + Firebase Database + Authentication + REST APIs Technologies & Features Angular front-end framew

Rodrigo Bravo 3 Apr 10, 2022
Aplicação Angular CRUD para uso e prática do Firebase com Authentication, Firestore e Storage

DiariosApp This project was generated with Angular CLI version 13.3.3. Development server Run ng serve for a dev server. Navigate to http://localhost:

José Almir 4 Jun 3, 2022