TODO App

Todo App is a simple tool to help you organise everything. It’s a list of tasks you need to complete or things that you want to do.

View Demo · Report Bug

Table of Contents

1. About The Project
   • Built With
2. Installation
3. Roadmap
4. Contributing
5. License
6. Contact
7. Links

About The Project

This projects is a solution to the Todo app challenge on Frontend Mentor. The app is connected with Firebase and perform CRUD operations in the database.

Users are able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Toggle light and dark mode
• Add new todos to the list
• Mark todos as complete
• Update todos
• Delete todos from the list
• Filter by all/active/complete todos
• Clear all completed todos (in progress...)

Built With

• React.js
• Styled Components
• Firebase
• Responsive Web Design - w3schools, MDN

Installation

1. Create a project and a database on Firebase. How to setup Firebase and build similiar application see this tutorial.
2. Clone the repo

   git clone git@github.com:lukaszkus/todo-app.git

3. Install NPM packages

   npm install

4. Enter your API in firebaseConfig.js

   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID",
   };

Roadmap

• User authorization and authentication.
• Task categories.
• Calendar integration.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Don't forget to give the project a star!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

@lukaszkus
LinkedIn: https://www.linkedin.com/in/lukasz-kus
e-mail: lukasz.kus84@outlook.com

Links

Demo link: https://todo-fm.netlify.app/
Project link: https://github.com/lukaszkus/todo-app
Frontend Mentor solution: https://www.frontendmentor.io/solutions/todo-app-made-with-reactjs-styledcomponents-and-firebase-EvXd7GwFt

(back to top)