README.md

TuDu

A simple To-Do Web App written in React powered by Firebase and Cloud Firestore.

Demo non più attiva.

Table of Contents

• Table of Contents
• About The Project
• Used in this project
  • Bootstrap
  • Splash Screen
  • Color picker
  • DateTime Picker
  • Firebase
  • Moment.js
  • Fontawesome
  • React Router
  • Depcheck
• Features
  • Add Item
  • Categories
  • Item Management
  • Colors
  • DateTime
• Authentication
• Database
• Test & Deploy
• License

About The Project

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.

Used in this project

This project uses some very useful npm dependencies createad by the React community, here's which dependency is used and how to install:

Bootstrap

react-bootstrap

This package is needed to use Bootstrap with React, all components are available with minimal to no adjustments.

Splash screen

react-welcome-page

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.

Color picker

react-color

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.

Date Picker

react-datepicker

Use to set a time to a task, it'very customizable. Used with Moment.js to convert the date to a specific format.

Firebase

firebase

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.

Moment.js

react-moment

Used to convert Firestore timestamps in legible format.

Fontawesome

react-fontawesome

Just some icons, nothing more, nothing less.

React Router

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.

react-router

Depcheck

depcheck

Used to check the dependencies, remove the unused ones and install the missing ones.

Features

This is a comprehensive list of all the features available in TuDu.

Add Item

Simply type your task and press enter to add it to your table.

Categories

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.

Item Management

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.

Colors

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!

DateTime

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

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.

Database

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.

Test / Deploy

This project is tested using Travis CI/CD and deployed to Netlify.

License

Distributed under the GPL License.

Icons made by Freepik from www.flaticon.com

Contributors

Mattia Ricci