Todobubu

Jan 9 2020 - Jan 17 2020

Todobubu, a light weight daily todo list application. It focus on planning daily workflow, making your day become more productive.

It is a cloud-based, cross-platform application which you can access your todos everywhere with your phones, tablets or desktops.

Features

Adding Todos

Responsive & Clean UI Design

Cross Platform Support

Adding Todos

As a todo list application, Todobubu provided a simple and handy way for users to add a todo. Unlike other todo lists, each todo inside Todobubu occupies its own timeslot, which is assigned with a starting time and an ending time or a duration.

Todobubu will help the users to sort the todos and give users a brief schedule of the day. Plan well before you start the journey. Well scheduled will definitely help to increase the productivity of the day.

Responsive & Clean UI/UX Design

With a bright and smart blue color, Todobubu enlights your whole day. The entire application use only the color #A9BCEE, its shaded color #414F75, muted color #B5C1DE, and achromatic colors with different grayscale

The design on mobile-first approach while it also fit on desktop. Thinking that most of the users will use it on their phones, this design give great experience when users is using it on PWA. Designing before coding is important for me. I tend to design the layout or even prototype on Figma before start coding.

Cross-platform Support

Todobubu is a web application. Which means that it can be access anywhere with internet and browser. Also, Todobubu is also a progressive web application (PWA). For phone user, PWA is provided to enjoy the fullscreen native application experience and shortcut on homescreen for quick access.

For desktop, Todobubu is working on another a electron project which provided dmg and exe as desktop app. As I mentioned before, data of Todobubu can be stored on cloud.

And of course, Todobubu's data can also be stored on local storage. To understand more, can take a look on the implementation section of Firebase Integration.

Implementations

React Framework

Firebase Integration

React Framework

Being the most popular js framework, this web application is built by React. Using React, components can be reused without write repetitively, like Timeslot, Todo components. This keep the code more clean and structeed in an intuitive way.

sortedTodos.map((todo) => <Timeslot key={todo.id} todo={todo} />

As this is my first react project, passing props through compoents is a bit messy at first. At last, I utilized context api to provide props that is used around entire project. I am not sure if it is the best practise for my project but it works in some way.

Using states for array of object (Todo) is a new perspective for me. React render the UI only when the state have changes. Here is an example of how a new todo is added. (Spread operator in ES6 javascript is useful here)

setTodos([
  ...todos,
  {
    id: uuid(),
    title: inputTitle,
    desc: inputDesc,
    start: inputStart,
    end: duration ? inputEndDur : inputEnd,
    dur: inputDur,
    duration: duration,
    complete: false,
  },
]);

Firebase Integration

To achieve the cloud based service, Firebase Cloud Firestore & Authentication is used in this project. Firebase provided a rather simple way to link the database with my react app. With firebase and react-firebase-hooks, I can fetch the query in the database with few lines of code.

const cloudTodosRef = firestore.collection("todos");
const query = cloudTodosRef.orderBy("start");

const [cloudTodos] = useCollectionData(query, { idField: "id" });

For authentication, using the useAuthState can identify if the user is logged in or not throughout the entire applications. I chose to use the Google and Github sign-in this time while Firebase provided various options for developers.

Contributing

This app is built within 1-2 weeks only with design and implementation. There may be some bugs or functions not working well.

Feel free to leave comments or even fork it and create a pull request. I will be happy about it!!!