Quick Start

Building Your To-Do App: A Beginner’s Journey with Qbit Components

Step 1: Setting Up Your Project

Let's begin by preparing the environment for our app. Imagine you're building a personalized task manager to stay organized. First, we need to set up the tools you'll use.

1. Install Dependencies

Before anything else, you’ll need to have Node.js installed. This is the tool that allows us to run React (which is the framework we'll use to build our app). You can download Node.js from here.

Once that’s done, let’s create our project folder. Open your terminal (or command prompt) and run:

npx create-react-app todo-app --template typescript
cd todo-app

This will create a React app for you, setting everything up with TypeScript.

2. Adding Tailwind CSS

To make our app beautiful, we’ll be using Tailwind CSS, a utility-first CSS framework. This will help style our app quickly without needing to write custom CSS. Follow these steps to install it:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Then, go into the tailwind.config.js file and update it with:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Next, open the src/index.css file and replace its contents with:

@tailwind base;
@tailwind components;
@tailwind utilities;

After that, your project is ready to style with Tailwind.

---

Step 2: Creating the interface for the components

The components should be able to get the values from outside so we need to define proper props for that for the props we will define the interface with valid types

import React from 'react';

export interface ITodo{
  date: Date,
  task: string
}

export interface ITodoForm{
  setTodos:React.Dispatch<React.SetStateAction<ITodo[]>>
}

export interface ITodoList{
  todos:ITodo[]
  setTodos:React.Dispatch<React.SetStateAction<ITodo[]>>
}

the above interface is designed for the component we used.

Step 3: Bringing in Qbit Components

To make our app interactive and beautiful, we’ll use Qbit Design, a UI library that simplifies the process of creating components like buttons, text inputs, and cards.

Imagine we need a button in our app. Instead of building one from scratch, we’ll import the Button component from Qbit Design.

1. Import Qbit Components

Inside src/App.tsx, add the following imports to bring in the Button and TextInput components from Qbit Design:

import { Button, TextInput } from '@components/inputs';
import { Card } from '@components/displays';

Now, let’s move on to designing the app with these components!

---

Step 4: Setting Up the To-Do App

1. Creating the To-Do Component

Next, we’ll create the actual To-Do component. This component will handle the task input and display it on the screen.

Inside src/components/Todo.tsx, we’ll write a simple form for users to type their to-dos:

import { useState } from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';
import { ITodo } from './interface/ITodo';

const Todo = () => {
  const [todos, setTodos] = useState<ITodo[]>([]);

  return (
          <div className="max-w-4xl mx-auto mt-12">
            <h2 className="text-3xl font-bold text-center">TODO</h2>

            <TodoForm setTodos={setTodos} />

            <TodoList todos={todos} setTodos={setTodos} />
          </div>
  );
};

export default Todo;

Here is the TodoForm Component

import React, { useState } from 'react';
import { Button, TextInput } from '@components/inputs';
import TodoSkinTextInput from './skins/TextInput.skin.todo';
import TodoSkinButton from './skins/Button.skin.todo';
import { ITodoForm } from './interface/ITodo';

const TodoForm=( props:ITodoForm)=>{
  const{setTodos}=props;

  const [task, setTask] = useState<string>('');

  const handleAddTodo = (e: React.FormEvent) => {
    e.preventDefault();

    if (task.trim()) {
      setTodos((prev) => [
        ...prev,
        { date: new Date(), task: task.trim() },
      ]);
      setTask('');
    }
  };

  return(
    <form className="mt-8" onSubmit={handleAddTodo}>
      <label htmlFor="todo" className="text-sm/6 font-medium text-gray-900">
        Todo
      </label>
      <TextInput
        type="text"
        name="todo"
        id="todo"
        autoComplete="off"
        placeholder="Enter your todo"
        required
        value={task}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTask(e.target.value)}
        renderers={{ renderer: TodoSkinTextInput }}
      />

      <div className="mt-3">
        <Button renderers={{ renderer: TodoSkinButton }} value="Add Todo" onClick={() => {}} />
      </div>
    </form>
  )
}

export default TodoForm

Here is the TodoList Component

import { Card } from '@components/displays';
import { Button } from '@components/inputs';
import TodoSkinCard from './skins/Card.skin.todo';
import TodoCloseSkinButton from './skins/Button.skin.todo.close';
import { ITodoList } from './interface/ITodo';

const TodoList = (props: ITodoList) => {
  const { todos, setTodos } = props;

  const handleDeleteTodo = (index: number) => {
    setTodos((prev) => prev.filter((_, i) => i !== index));
  };

  return (
    <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
      {todos.map((todo, index) => (
        <Card renderers={{ renderer: TodoSkinCard }} keyExtractor={(_: string, i: number) => `${i}`} key={index}>
          <div>
            <p className="text-sm text-gray-500">{todo.date.toLocaleDateString()}</p>
            <p className="text-lg font-medium mt-1">{todo.task}</p>
          </div>
          <Button renderers={{ renderer: TodoCloseSkinButton }} value="X" onClick={() => handleDeleteTodo(index)} />
        </Card>
      ))}
    </div>
  );
};

export default TodoList;

Here’s the story behind this code:

• TextInput: We’re importing the TextInput component from Qbit. The <TextInput /> element helps users enter a new to-do. You can think of it as a digital text box where users will type their tasks.
• Button: Similarly, we import the Button component. The button is labeled "Add Todo" and will trigger the action to add the task when clicked.

2. Displaying Tasks with Cards

Once users add a task, we want to show it on the screen. For that, we’ll use Qbit’s Card component. Here’s how:

<Card>
  <div>
    <p className="text-sm text-gray-500">22/01/2025</p>
    <p className="text-lg font-medium mt-1">Create Documentation</p>
  </div>
  <Button value="X" onClick={() => {}} />
</Card>

• Card: The Card component from Qbit Design wraps around each to-do. It gives the task a structured layout, displaying the task’s name, date, and an option to remove it with the "X" button.
• Button: The "X" button will be used to remove the task. We can assign an action to it, like deleting the task when it’s clicked.

---

Step 5: Finalizing the UI

1. Styling the Layout

Now, you might wonder, “How do we make this app look neat?” That’s where Tailwind CSS comes in. It allows us to quickly style the components.

In the previous steps, we used Tailwind classes like text-3xl for font size, text-center for text alignment, mt-12 for margin, and many others. These classes are provided by Tailwind, making it easy to adjust spacing, colors, and sizes.

---

Step 6: Running the App

1. Testing the App

Once you've put all the code together, it’s time to see your app in action:

1. Save your changes.

2. Start the development server by running:

   npm start

3. Open your browser and go to http://localhost:3000. You’ll now see your to-do app in action!

---

Conclusion

Congratulations! You’ve just built a to-do app using React, Tailwind CSS, and Qbit. You’ve learned how to:

• Import and use components from the Qbit library like TextInput, Button, and Card.
• Style your app quickly using Tailwind CSS.
• Organize your code into smaller components for clarity and efficiency.

Now, you can further expand this app by adding features like saving tasks to a database or marking tasks as complete. The possibilities are endless!

This is just the beginning of your journey into the world of web development. Happy coding! 🎉

---

This version focuses on clear and simple explanations with a story-like flow for each step, ideal for users with minimal technical knowledge.