DEV Community

Rossano D'Angelo
Rossano D'Angelo

Posted on

3 2

How to build a todo app with React and Firebase Database

Day 0

📅 10-06-2019
🕐 1h
🏁 Planning and initial design

Planning

What I'm going to develop

The goal of this challenge is to create a working to-do app to keep track of tasks I have to do.

What technologies I'm going to use

  • React (ES6)
  • Google Firebase Database

Designing

Before starting writing I always try to understand the structure of my application. This draw should be enough to see components I'm going to build and the way I'm going to manage the state of the application.

The application state

The state will be managed in the App component. Using the state lifting technique it will be passed over son components.
At the moment I can only imagine how the state will looks like: a collection of todos where each todo has some properties.

...
{
  id: 1,
  description: "Lorem Ipsum",
  done: false
},
{
  id: 2,
  description: "Another Lorem Ipsum",
  done: true
},
...
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay