How to Build a React Todo App with a Pomodoro Timer using Cosmic

Community Articles
Community Articles How to Build a React Todo App with a Pomodoro Timer using Cosmic

In this tutorial, I'm going to show you how to create a Todo list app with pomodort timer included using React and Cosmic. We will be using Cosmic npm package for implementing the basic CRUD for our objects and to retrieve data and media from Cosmic. Let's get started.

TL;DR

View the Demo
Download the GitHub repo

Prerequisites

You will be requiring to install Node JS and npm before starting. Make sure you already have them.

Getting Started

Doing everything using the existing git repo

First of all, you have to be sure you have node > 6.x and yarn installed, than run the following commands:

After successfull completion of the last command browser window will automatically open package.json will look like this.

Now the app has to be running on http://localhost:300

Let's setup webpack.config.js

Code written here is responsible for compiling React JS.

Setting up ./src/components/app/app.js

In this file we are creating the home page file. So in state we are keeping the following data.

  1. Form-> title : Responsible for new task input value
  2. List: Array of strings, here are saved all the tasks
  3. showNewTaskInput: Boolean value, responsible for show/hide the new task input
  4. notification: Current notification name, we also have types for notifications listed below as an object, here are sorted the names for the notification types.

We use the following methods in our Class:

  1. Constructor: We are setupping new Api service, this gonna be used to connect to the Cosmic API.
  2. ComponentWillMount: This is function which belongs to React component lifecycle, here we just call another method created by us.
  3. getData: Function which does a call to the API and updates the list of tasks, after what we reset the value of new task input using this.resetForm()
  4. createNotification: Function which gets a notification type as an argument and puts it in the state for further use
  5. onChange: Function is responsible to keep the new task title in the state.
  6. onSave: Function creates a new task using the Cosmic api.
  7. onStart: Function is responsible for starting the timer for specific task, it calls the Api to save the start time in the Cosmic's db.
  8. onDone: Function is responsible for setting the status of specific task to "Done".
  9. onUpdate: Function is responsible to update specific task's title.
  10. showNewTaskInput: Function shows new task input.
  11. resetForm: Function is responsible for cleaning the value of the new task input.
  12. render: In render we put our html, and call our functions mentioned above.

Setting up ./src/task-list/list-item/index.js


Inlist-item we are creating each task item


In state we are keeping 2 items:

  1. editing: If the title is currently in process of change
  2. title: Current title of the task

Below we 3 functions coming after. They will call the functions passed to component by props.

Next 2 functions have some logic in them. Here they are:

  1. onEdit: Function which is responsive for updating the state editing item.
  2. onChange: Function which changes the title item in the state.

Then we have 2 React component lifecycle methods:

  1. componentWillReceiveProps: In this function we are checking if component has recieved new props we are updating our local state.
  2. render: All the HTML code goes here. Where we call our functions mentioned above.

Setting up ./src/components/countdown/index.js


In this file we are using Moment JS for doing basic calculation for the time countdown.

We are all set up, you can run the application, and enjoy it.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


Here we build a progressive web app in React.js with the power of Cosmic. It respond with status 200 and carries data when you disconnected to internet and in Chrome browser (both mobile and desktop) it gives an option to install the app on home screen.
Hi, In this tutorial, we are going to create an application that filters twitter tweets by selecting a specific location on the map. We are going to use React and Cosmic. We will be using Cosmic npm package for saving and sorting the most popular searches in our application. Let's get started.
In this walkthrough, I'm going to show you how I build a blog application in Go Lang. I'll also talk about styling it using Tailwind CSS and lastly, I'll show you how you can utilize GitHub Actions to deploy your Go-based applications to Heroku.
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart a React Auth App. This app shows implementation of Authentication in ReactJS, NextJS and NodeJS using the Cosmic API. This app has all the basic modules like signin, signup, view/edit profi
A website boilerplate satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.
Filtering data is one of the most common feature of any data facing application, wheather it's a fron-end app or a back-end application. The Filter function is used to find records in a table or a dataset that meets certain criteria.

Ready to Get Started?

Build personal projects for free. Add your team at unbeatable prices.
Start Now Contact Sales