TaskBerry - a task management application developed with react.js that implements the ability to add, edit and delete your daily tasks to keep track of them

Last update: Feb 25, 2022

TaskBerry

TaskBerry is a simple react.js based task managing app where you can add, edit and delete your everyday tasks to keep a track of them.

Project Purpose

The purpose of this project is to demonstrate how can a person:

  • Setup react.js in his or her app
  • Implement states in react.js
  • Refractor the code into multiple components that makes code management easy

Project Setup

Required Softwares and Plugins

To follow through this app, you need to:

  • Install Visual Studio Code which is the text editor in which we will be making our app
  • [OPTIONAL]: Install VSCode Extensions: Javascript, Material Theme Icons, Prettier and ES7+ React/Redux/React-Native snippets

Things you should know before exploring this project

  • React.js: It is a library that makes it really easy for us to create web pages with advanced UI. Unlike Bootstrap whose primary purpose is to achieve responsive design, using react.js, you can achieve responsive design and unique and customized UI
  • Component: A component is simply a piece of HTML code that is rendered by react.js. Like you have a form tag with some input tags and buttons. Using react.js, you can move all the form code inside a file (say FormComponent.js). And then whenever you want to use it, you just need to write Using this feature, we can get rid of boilerplate code in our project
  • State: A state can be considered as a special variable provided by react.js. Using this, we can keep track of the state of a component. For instance, we can know when a task item enters edit state or when it exists edit state

Creating a react.js project

  • Open VSCode inside a blank folder and there, open terminal and write npx create-react-app yourProjectName
  • And then simply refer to the code written in this repository

Project Files

  • App.js: This is the actual file where we write all our business logic and return HTML renderable content
  • App.css: This file contains all the css code that belongs to our App.js file
  • index.js: This file is used by react.js to render our App.js component's content into the web page along with some react.js configurations
  • index.css: This file contains index.js related css code
  • index.html: This file binds or merges all our files together and displays it on the screen
  • manifest.json: This file contains some react.js configurations like icons, theme colors, etc

Project Folders

  • components: This folder contains the react.js components like HeaderComponent.js (For the header div), TaskComponent.js (For each task div) and CreateTaskFormComponent.js (For the create task form at the bottom of our app)
  • public: This folder contains data that will be exposed to the public or all the users who see this app. It contains files like our index.html file and some configuration files

Contact

For any queries, you can mail me at [email protected]

GitHub

https://github.com/ishantchauhan710/Taskberry
You might also like...

React application that uses json server to store all your important tasks.

React application that uses json server to store all your important tasks.

I-do React application that uses json server to store all your important tasks. Run the app clone the project

Nov 2, 2021

Todooo is a simple mobile application where you can save your tasks.

Todooo is a simple mobile application where you can save your tasks.

Todooo is a simple mobile application where you can save your tasks. I made that app, because I wanted to try something new and the choice were React Native.

Nov 22, 2021

CalFit tracks your weight and calculates a recommended daily calorie intake.

CalFit tracks your weight and calculates a recommended daily calorie intake.

CalFit tracks your weight and calculates a recommended daily calorie intake. It also has a well-designed food diary and an exercise log.

Dec 21, 2021

A Simple Tasks Manager Application Created with Electron And React

A Simple Tasks Manager Application Created with Electron And React

Application Created with Electron.js & React.js Important This version is on experimental test, is no stable at this time (the pwa version is stable v

Dec 3, 2021

A full stack task manager application built with node, react,mongodb,and mantine.

A full stack task manager application built with node, react,mongodb,and mantine.

Mar 12, 2022

Aura, an easy to use mood tracking app that takes your daily life's mood into account.

Aura, an easy to use mood tracking app that takes your daily life's mood into account.

Aura, an easy to use mood tracking app that takes your daily life's mood into account. It allows you to understand yourself better and helps you maintain an even mood throughout the day. The app has various features such as graphs, statistics, insights, and relaxing sounds to improve you mood.

May 31, 2022

Task tracking application from the React crash course

React Crash Course 2021 (Task Tracker App) This is the project from the YouTube crash course. It includes the react ui as well as JSON-server for our

Jun 20, 2022

To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

Apr 3, 2022

A React Application challenge With CRUD (Create, Read, Update, Delete)

A React Application challenge With CRUD (Create, Read, Update, Delete)

Desafio 03 - Corrigindo o código 💻 Sobre o desafio Nesse desafio, temos uma aplicação Node.js que está em processo de desenvolvimento mas que já poss

Dec 17, 2021
Daily Tasks - Opinionated MacOS-first task app to help you get through the day

Daily Tasks Opinionated task app for MacOS to help you get through the day Screen.Recording.2022-03-27.at.14.20.48.mov Installation At the moment, the

Apr 4, 2022
This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone.
This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone.

This application integrates Twilio SMS with a ToDo app. As you add tasks to your Todo app, you have the option to send SMS reminders to your cell phone. The days of forgetting a task or meeting are no more with ToodleDo app.

Dec 14, 2021
A simple to-do app for managing daily tasks built with Reactjs

A simple to-do app for managing daily tasks built with Reactjs. With the functionality to manipulate multiple completed tasks.

Jun 8, 2022
This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.
This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.

Memories Front end - React,javascript,html,css Back end- NODE JS Application - This is memory application and it is a simple social media app that all

Apr 20, 2022
Powerfull TODOLIST app with React.js with Add, Remove, Remove all, Edit, Local Storage features.

Advance React TODOLIST Application Powerfull TODOLIST app with React.js with Add, Remove, Remove all, Edit, Local Storage features. Clone this project

Jul 5, 2021
Virtual bookstore created with React and Redux, with add and delete functionalities.
Virtual bookstore created with React and Redux, with add and delete functionalities.

Bookstore Virtual bookstore created with React and Redux. Preview Built With Node.js React Redux JavaScript Live Demo Heroku Live Demo Netlify Live De

Nov 19, 2021
A bookstore MVP that allows users to add, delete, and list available books
A bookstore MVP that allows users to add, delete, and list available books

Bookstore It is a bookstore MVP that allows users to add, delete, and list available books. Features The website displays a bookstore user interface u

Mar 23, 2022
Game-creator - The app with authentication and ability to create different type of games
Game-creator - The app with authentication and ability to create different type of games

Backend: mongDB nodeJS Frontend: pug for JSX stylus react native adaptive design

Feb 19, 2022
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Jun 19, 2022