A simple To-Do Web App written in React powered by Firebase and Cloud Firestore.
Demo non più attiva.
- Table of Contents
- About The Project
- Used in this project
- Features
- Authentication
- Database
- Test & Deploy
- License
TuDu is a simple To-Do List Web App written in React, a JavaScript framework created by the smart folks at Facebook, it uses Firebase for authentication and Cloud Firestore for the database and some really cool packages powered by the npm and GitHub community.
This project uses some very useful npm dependencies createad by the React community, here's which dependency is used and how to install:
This package is needed to use Bootstrap with React, all components are available with minimal to no adjustments.
This is used to create the awesome splashscreen you see when loading the app, it's fully customizable inside the splashScreen component, you can follow the likn's instruction.
This is used to add the color picker to the app, it allows the user to change the card's background color. It's fully customizable, there's a lot of picker style to choose from.
Use to set a time to a task, it'very customizable. Used with Moment.js to convert the date to a specific format.
The application works thank to Firebase, the platform created by Google offers authentication via the major providers such as Google, Facebook GitHub and many others (i chose to use Google for ease of use). Cloud Firestore is a NoSQL, document-oriented database.
Used to convert Firestore timestamps in legible format.
Just some icons, nothing more, nothing less.
React Router is a collection of navigational components that compose declaratively with your application. Using this package i can redirect the user to the right page based on whether he is loged or not.
Used to check the dependencies, remove the unused ones and install the missing ones.
This is a comprehensive list of all the features available in TuDu.
Simply type your task and press enter to add it to your table.
When adding a new item you can add a category with this simple sintax:
New Item Text #Category
The category will be shown in the header of your item.
You can set your items as completed by pressing on the ✔️ button or you can delete the item of your choice by pressing the 🗑️ button.
You can choose the card color of your liking by pressing the 🎨 button on the bottom right side of the card and select which color you want, you can even enter a Hex value!
You can set a date and time for the task by clicking on the ⏰ icon and choosing date and time, you can delete said date and time by clicking on the ✖ besides the date. When a date expires it will change color, loosing it's opacity.
Authentication is provided by Google Firebase, i chose to support only Google's own authentication. It can be customized to support Facebook, GitHub and many more.
I chose Cloud Firestore for the database, it's reliable, fast and cloud-based, which makes it perfect for a web-app. The data is stored securely on Google's servers.
This project is tested using Travis CI/CD and deployed to Netlify.
Distributed under the GPL License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent