Build eisenhower matrix with React, firebase and neumorphism ui . (Part one)

Simplified working mechanism of project

In this tutorial, we're going to delve into a fascinating React project. Our goal? To construct an Eisenhower matrix, an incredibly effective productivity tool designed to help prioritize tasks based on their urgency and importance. This project facilitate user to enter todo with category based on its importance and urgency.

Source code link

About the Project

Our React project has been designed around two main components, AddTodo and DisplayMatrix.

The AddTodo component is designed to capture the user's input. It includes a function that transfers user data to the database, ensuring that all tasks are stored and can be accessed when needed.

On the other hand, DisplayMatrix provides a visual representation of the to-do list. To ensure that tasks can be easily managed, each item is accompanied by a delete button for easy removal when tasks are completed or need to be discarded.  Under DisplayMatrix there are two nested components TodoList and TodoTask , TodoTask is for rendering todo and respective delete button. TodoList is for rendering list of TodoTask.

You can initiate this project with 'npm create vite@latest .'

This project can be broken down into four key sections, each playing a crucial role in the matrix's functionality (applying css alongside):

1. Setting up the database (Firebase) and data modelling
2. Capturing user input and transferring it to the database
3. Displaying data and implementing a delete function
4. Building the Eisenhower matrix grid with Neumorphic UI

1.Setting up database (firebase) and data modelling:

• Set up database(firebase) and establish connection with it.
• Make sure your firebase apikey is in environment variable if you are pushing your code to github or any public platform if your apikey is leaked it can be abused.
• Put .env in .gitignore file.
• 
  modelling data: when modelling data Identify the use cases and logical data model, Identify your data access patterns, Identify the technical requirements to serve functionalities. In this specific case, consolidate 'todo' and its associated 'category' into a unified object, streamlining your data architecture for enhanced efficiency.

2. Capturing user input and transferring it to the database:

• Create component AddTodo for adding todos to db.
• Create a input field to collect to-dos from your users.
• Initialize useState to track inputs in input field. [newTodo, setNewTodo]
•  Design buttons to capture user-selected categories. You can assign value to them to get user's category. 
• Use  e.nativeEvent.submitter.value to get button's value from form.
• You can use array and map method to render button and avoid repetition . 

  const categories = [

    "Important&Urgent",

    "Important&Noturgent",

    "Notimportant&Urgent",

    "Notimportant&Noturgent",

  ];

•  Let these buttons trigger a function that transfers both the to-do and category data to your Firebase database. These buttons are embedded within a form, so they automatically activate the form's submit function.
• Architect a function to handle submissions. Utilize the addDoc function from Firebase, requiring two essential parameters: the database reference and the data object to be added.
• To get database reference use collection which take two parameters reference to your Firestore database instance and second the name of the collection in Firestore.
• Make sure you have set true for read and write in firestore rules, usually you will need to write some condition so only authorize person will able to read or write from your firestore.
• check if it transfereed successfully.

Some helpful css:

form { 

     display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

padding: 20px 0px;

  margin: 16px 17rem 14px;

 border-radius: 10px;}

input[type='text']{

        margin-bottom: 15px;

            border: none;

            background-color: transparent;

            padding: 10px;

            width: 90%;

            border-radius: 7px;

            outline: none;

}

.inputWrapper{

    display: flex;

    width: 400px;

    text-transform: uppercase;

}

button {

    margin: 0.3rem 0.5rem;

        border: none;

        text-align: center;

        font: inherit;

        cursor: pointer;

        border-radius: 30px;

        padding: 12px;

        font-size: 1rem; }

*,

*:before,

*:after {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}

body{

background:  #dbd9d9;

color: #202035;

    font-family: 'Poppins', sans-serif;

        font-size: 14px;

        font-weight: 600;

letter-spacing: 1.2px;

}