Vite React TypeScript Features Projects:

• All Rights Reserved to bappasaha.com

Main Folders

• 0-A-Redux-Works
• 0-B-Vite-JavaScript-Works
• 0-C-Vite-TypeScript-Works
• 0-D-Nextjs-Works
• 0-E-CSS-Works

📗 Run the project

🔥 Project Setup Instructions

1. Clone the repository:

   git clone https://github.com/bappasahabapi/vite-react-typescript-2025.git

2. Go to the folder

   cd forder_name

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

You can find additional setup instructions here.

• cd 03-Google-Map
• npm install
• npm run dev

TypeScript state props event types

Project Setup Instructions

• onSearch Types:

  type SearchProps ={
  onSearch:(searchTerm:string)=>void;
  }
  
  const SearchTask = ({onSearch}:SearchProps) => {
  const [searchTerm, setSearchTerm] = useState<string>("");

• props Types:

interface TaskListProps {
  tasks: DefaultTask[];
  onFavourite: (id: string) => void;
  onDelete: (id: string) => void;
  onEdit: (task: DefaultTask) => void;
}

const TaskList = ({ tasks, onFavourite, onDelete, onEdit }: TaskListProps) => {}

interface TaskActionsProps {
    onClick: () => void; // Type for onClick prop
    onDeleteAll: () => void; 
}


export default function TaskActions({onClick,onDeleteAll}:TaskActionsProps) {}

type SearchProps ={
    onSearch:(searchTerm:string)=>void;
}

const SearchTask = ({onSearch}:SearchProps) => {}

    
    ```

- handleChange Types:

```typescript

         const handleChange = (
        event: React.ChangeEvent<
          HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
        >
      ) => {
        const { name, value } = event.target;
        const updatedValue = name === "tags" ? value.split(",") : value;
        setTask({
          ...task,
          [name]: updatedValue,
        });
      };
    
      const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault(); // Prevent default form submission behavior
        onSave(task,isAdd); // Call onSave with the current task
      };

  const handleEdit = (editTask: DefaultTask) => {
    console.log(editTask);
    setTaskToUpdate(editTask);
    setShowAddModal(true);
  };

  const handleFavourite = (taskId: string) => {
    // const taskIndex =tasks.findIndex(task=>{ console.log(task.id, taskId) ; return task.id ===taskId});
    const taskIndex = tasks.findIndex((task) => task.id === taskId);
    const previousTask = [...tasks];

    previousTask[taskIndex].isFavorite = !previousTask[taskIndex].isFavorite;
    setTasks(previousTask);
  };

  const handleDelete = (taskId: string) => {
    console.log(taskId);
    const filterTasks = tasks.filter((task) => task.id !== taskId);
    setTasks(filterTasks);
  };

  const handleDeleteAll = () => {
    tasks.length = 0;
    setTasks([...tasks]);
  };

  const handleOnSearch = (serchText: string) => {
    console.log(serchText);

    const filterTasks = tasks.filter(
      (task) =>
        task.title.toLocaleLowerCase().includes(serchText) ||
        task.description.toLocaleLowerCase().includes(serchText) ||
        task.priority.toLocaleLowerCase().includes(serchText)
    );

    setTasks([...filterTasks])
  };


 Separate function to handle editing an existing task
  const handleAddTask = (newTask: DefaultTask) => {
    setTasks([...tasks, newTask]);
    setShowAddModal(false);
  };

 Separate function to handle editing an existing task
  const handleUpdateTask = (updatedTask: DefaultTask) => {
    const updatedTasks = tasks.map((task) =>
      task.id === updatedTask.id ? updatedTask : task
    );
    setTasks(updatedTasks);
    setShowAddModal(false);
    setTaskToUpdate(null);
  };
        

📗 Features:

• 01-Css Flexbox
• 02-Google Map
• [03-React-Basic-Max]
• 04-React-TypeScript-Todo
• 05-Stepper
• 06-Tasker

📗 Output Images

• 01-Css Flexbox Playground

Working Functionality

• Very good use of UseState() hook.
• Dynamic Style added

• 02-Google Map Integration Feature

• 03-React-Basic-Max

• 04-React-Typescript-Todo-Max

• 05-Stepper-jonas

• 06-Css Positioning Playground

Working Functionality

• Very good use of UseState() hook.
• Dynamic Style added

• 06-Tasker+Book-Search-Filter live

Working Functionality

• Passing data from parent to child as props
• Passing function props from child to parent as props
• Lifting State up desing pattern added
• CRUD is done using useState
• Search Functionality Added based on title priority description