Weekend Project: Build an Application Using Your Preferred Frontend Framework

React Setup

// Initialize with Create React App or Vite
npx create-react-app task-manager
// or
npm create vite@latest task-manager -- --template react

// Install dependencies
npm install react-router-dom       // For routing
npm install uuid                   // For generating unique IDs
npm install date-fns               // For date manipulation
npm install react-beautiful-dnd    // For drag-and-drop (optional)
npm install react-hook-form        // For form handling (optional)
              

React Component Structure Example

// App.js - Main component
import React, { useState, useEffect } from 'react';
import { TaskList } from './components/TaskList';
import { TaskForm } from './components/TaskForm';
import { FilterBar } from './components/FilterBar';
import { TaskContext } from './context/TaskContext';
import { loadTasks, saveTasks } from './utils/storage';

function App() {
  // State initialization
  const [tasks, setTasks] = useState([]);
  const [filter, setFilter] = useState({ status: 'all', priority: 'all', category: 'all' });
  
  // Load tasks from localStorage on component mount
  useEffect(() => {
    const savedTasks = loadTasks();
    if (savedTasks) setTasks(savedTasks);
  }, []);
  
  // Save tasks to localStorage whenever tasks change
  useEffect(() => {
    saveTasks(tasks);
  }, [tasks]);
  
  // Task management functions
  const addTask = (task) => {
    setTasks([...tasks, task]);
  };
  
  const updateTask = (id, updatedTask) => {
    setTasks(tasks.map(task => task.id === id ? {...task, ...updatedTask} : task));
  };
  
  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };
  
  // Filter tasks based on filter state
  const filteredTasks = tasks.filter(task => {
    if (filter.status !== 'all' && 
        (filter.status === 'completed') !== task.completed) return false;
    if (filter.priority !== 'all' && filter.priority !== task.priority) return false;
    if (filter.category !== 'all' && !task.categories.includes(filter.category)) return false;
    return true;
  });
  
  return (
    <TaskContext.Provider value={{ tasks, addTask, updateTask, deleteTask }}>
      <div className="app-container">
        <h1>Task Manager</h1>
        <TaskForm onAddTask={addTask} />
        <FilterBar filter={filter} setFilter={setFilter} />
        <TaskList tasks={filteredTasks} onUpdateTask={updateTask} onDeleteTask={deleteTask} />
      </div>
    </TaskContext.Provider>
  );
}

export default App;
              

React Task Item Component Example

// TaskItem.js
import React, { useState } from 'react';
import './TaskItem.css';

export function TaskItem({ task, onUpdateTask, onDeleteTask }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editedTitle, setEditedTitle] = useState(task.title);
  
  const handleToggleComplete = () => {
    onUpdateTask(task.id, { ...task, completed: !task.completed });
  };
  
  const handleEdit = () => {
    setIsEditing(true);
  };
  
  const handleSave = () => {
    onUpdateTask(task.id, { ...task, title: editedTitle });
    setIsEditing(false);
  };
  
  const handleCancel = () => {
    setEditedTitle(task.title);
    setIsEditing(false);
  };
  
  const handleDelete = () => {
    if (window.confirm('Are you sure you want to delete this task?')) {
      onDeleteTask(task.id);
    }
  };
  
  // Determine the priority class for styling
  const priorityClass = `priority-${task.priority}`;
  
  return (
    <div className={`task-item ${task.completed ? 'completed' : ''} ${priorityClass}`}>
      {isEditing ? (
        <div className="task-edit">
          <input
            type="text"
            value={editedTitle}
            onChange={(e) => setEditedTitle(e.target.value)}
            autoFocus
          />
          <button onClick={handleSave}>Save</button>
          <button onClick={handleCancel}>Cancel</button>
        </div>
      ) : (
        <div className="task-content">
          <input
            type="checkbox"
            checked={task.completed}
            onChange={handleToggleComplete}
          />
          <span className="task-title">{task.title}</span>
          <div className="task-actions">
            <button onClick={handleEdit}>Edit</button>
            <button onClick={handleDelete}>Delete</button>
          </div>
        </div>
      )}
      {task.dueDate && (
        <div className="task-due-date">
          Due: {new Date(task.dueDate).toLocaleDateString()}
        </div>
      )}
      {task.categories && task.categories.length > 0 && (
        <div className="task-categories">
          {task.categories.map(category => (
            <span key={category} className="category-tag">{category}</span>
          ))}
        </div>
      )}
    </div>
  );
}
              

Vue Setup

// Initialize with Vue CLI or Vite
npm init vue@latest task-manager

// Install dependencies
npm install uuid                // For generating unique IDs
npm install date-fns            // For date manipulation
npm install vuedraggable        // For drag-and-drop (optional)
npm install vee-validate        // For form validation (optional)
              

Vue App Component Example

<!-- App.vue -->
<template>
  <div class="app-container">
    <h1>Task Manager</h1>
    <TaskForm @add-task="addTask" />
    <FilterBar 
      :filter="filter" 
      @update:filter="filter = $event" 
    />
    <TaskList 
      :tasks="filteredTasks" 
      @update-task="updateTask" 
      @delete-task="deleteTask" 
    />
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue';
import TaskForm from './components/TaskForm.vue';
import TaskList from './components/TaskList.vue';
import FilterBar from './components/FilterBar.vue';
import { loadTasks, saveTasks } from './utils/storage';

export default {
  components: {
    TaskForm,
    TaskList,
    FilterBar
  },
  setup() {
    // State
    const tasks = ref([]);
    const filter = ref({ status: 'all', priority: 'all', category: 'all' });
    
    // Load tasks from localStorage
    onMounted(() => {
      const savedTasks = loadTasks();
      if (savedTasks) tasks.value = savedTasks;
    });
    
    // Save tasks when they change
    watch(tasks, (newTasks) => {
      saveTasks(newTasks);
    }, { deep: true });
    
    // Computed filtered tasks
    const filteredTasks = computed(() => {
      return tasks.value.filter(task => {
        if (filter.value.status !== 'all' && 
            (filter.value.status === 'completed') !== task.completed) return false;
        if (filter.value.priority !== 'all' && 
            filter.value.priority !== task.priority) return false;
        if (filter.value.category !== 'all' && 
            !task.categories.includes(filter.value.category)) return false;
        return true;
      });
    });
    
    // Methods
    function addTask(task) {
      tasks.value.push(task);
    }
    
    function updateTask(id, updatedTask) {
      const index = tasks.value.findIndex(task => task.id === id);
      if (index !== -1) {
        tasks.value[index] = { ...tasks.value[index], ...updatedTask };
      }
    }
    
    function deleteTask(id) {
      tasks.value = tasks.value.filter(task => task.id !== id);
    }
    
    return {
      tasks,
      filter,
      filteredTasks,
      addTask,
      updateTask,
      deleteTask
    };
  }
};
</script>

<style>
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}
</style>
              

Vue Task Item Component Example

<!-- TaskItem.vue -->
<template>
  <div :class="taskClasses">
    <div v-if="isEditing" class="task-edit">
      <input
        v-model="editedTitle"
        type="text"
        @keyup.enter="saveEdit"
        ref="editInput"
      >
      <button @click="saveEdit">Save</button>
      <button @click="cancelEdit">Cancel</button>
    </div>
    <div v-else class="task-content">
      <input
        type="checkbox"
        :checked="task.completed"
        @change="toggleComplete"
      >
      <span class="task-title">{{ task.title }}</span>
      <div class="task-actions">
        <button @click="startEdit">Edit</button>
        <button @click="confirmDelete">Delete</button>
      </div>
    </div>
    <div v-if="task.dueDate" class="task-due-date">
      Due: {{ formatDate(task.dueDate) }}
    </div>
    <div v-if="task.categories && task.categories.length" class="task-categories">
      <span
        v-for="category in task.categories"
        :key="category"
        class="category-tag"
      >{{ category }}</span>
    </div>
  </div>
</template>

<script>
import { ref, computed, nextTick } from 'vue';
import { format } from 'date-fns';

export default {
  props: {
    task: {
      type: Object,
      required: true
    }
  },
  emits: ['update-task', 'delete-task'],
  setup(props, { emit }) {
    const isEditing = ref(false);
    const editedTitle = ref('');
    const editInput = ref(null);
    
    // Computed class based on task state
    const taskClasses = computed(() => {
      return {
        'task-item': true,
        'completed': props.task.completed,
        [`priority-${props.task.priority}`]: true
      };
    });
    
    // Methods
    function toggleComplete() {
      emit('update-task', props.task.id, { 
        ...props.task, 
        completed: !props.task.completed 
      });
    }
    
    function startEdit() {
      editedTitle.value = props.task.title;
      isEditing.value = true;
      nextTick(() => {
        editInput.value.focus();
      });
    }
    
    function saveEdit() {
      if (editedTitle.value.trim()) {
        emit('update-task', props.task.id, { 
          ...props.task, 
          title: editedTitle.value 
        });
        isEditing.value = false;
      }
    }
    
    function cancelEdit() {
      isEditing.value = false;
    }
    
    function confirmDelete() {
      if (confirm('Are you sure you want to delete this task?')) {
        emit('delete-task', props.task.id);
      }
    }
    
    function formatDate(dateString) {
      return format(new Date(dateString), 'MMM d, yyyy');
    }
    
    return {
      isEditing,
      editedTitle,
      editInput,
      taskClasses,
      toggleComplete,
      startEdit,
      saveEdit,
      cancelEdit,
      confirmDelete,
      formatDate
    };
  }
};
</script>

<style scoped>
.task-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 1rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

.completed {
  opacity: 0.6;
  text-decoration: line-through;
}

.priority-high {
  border-left: 4px solid #ff4d4f;
}

.priority-medium {
  border-left: 4px solid #faad14;
}

.priority-low {
  border-left: 4px solid #52c41a;
}

.task-content {
  display: flex;
  align-items: center;
}

.task-title {
  flex-grow: 1;
  margin: 0 1rem;
}

.task-due-date {
  font-size: 0.8rem;
  color: #888;
  margin-top: 0.5rem;
}

.category-tag {
  display: inline-block;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}
</style>
              

Angular Setup

// Initialize with Angular CLI
ng new task-manager --routing=true --style=scss

// Install dependencies
npm install uuid                 // For generating unique IDs
npm install date-fns             // For date manipulation
npm install @angular/material    // For UI components (optional)
              

Angular App Component Example

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Task } from './models/task.model';
import { TaskService } from './services/task.service';
import { FilterOptions } from './models/filter-options.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Task Manager';
  tasks: Task[] = [];
  filteredTasks: Task[] = [];
  filterOptions: FilterOptions = {
    status: 'all',
    priority: 'all',
    category: 'all'
  };
  
  constructor(private taskService: TaskService) {}
  
  ngOnInit(): void {
    this.taskService.getTasks().subscribe(tasks => {
      this.tasks = tasks;
      this.applyFilters();
    });
  }
  
  onAddTask(task: Task): void {
    this.taskService.addTask(task);
  }
  
  onUpdateTask(task: Task): void {
    this.taskService.updateTask(task);
  }
  
  onDeleteTask(taskId: string): void {
    this.taskService.deleteTask(taskId);
  }
  
  onFilterChange(filterOptions: FilterOptions): void {
    this.filterOptions = filterOptions;
    this.applyFilters();
  }
  
  private applyFilters(): void {
    this.filteredTasks = this.tasks.filter(task => {
      if (this.filterOptions.status !== 'all' && 
          (this.filterOptions.status === 'completed') !== task.completed) return false;
      if (this.filterOptions.priority !== 'all' && 
          this.filterOptions.priority !== task.priority) return false;
      if (this.filterOptions.category !== 'all' && 
          !task.categories.includes(this.filterOptions.category)) return false;
      return true;
    });
  }
}
              

Angular Task Service Example

// task.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Task } from '../models/task.model';
import { v4 as uuidv4 } from 'uuid';

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: Task[] = [];
  private tasksSubject = new BehaviorSubject([]);
  
  constructor() {
    this.loadTasks();
  }
  
  getTasks(): Observable {
    return this.tasksSubject.asObservable();
  }
  
  addTask(task: Task): void {
    const newTask = {
      ...task,
      id: uuidv4(),
      createdAt: new Date(),
      updatedAt: new Date()
    };
    this.tasks = [...this.tasks, newTask];
    this.updateTasks();
  }
  
  updateTask(updatedTask: Task): void {
    this.tasks = this.tasks.map(task => 
      task.id === updatedTask.id 
        ? { ...updatedTask, updatedAt: new Date() } 
        : task
    );
    this.updateTasks();
  }
  
  deleteTask(taskId: string): void {
    this.tasks = this.tasks.filter(task => task.id !== taskId);
    this.updateTasks();
  }
  
  private updateTasks(): void {
    this.tasksSubject.next([...this.tasks]);
    this.saveTasks();
  }
  
  private saveTasks(): void {
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
  
  private loadTasks(): void {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      this.tasks = JSON.parse(savedTasks);
      this.tasksSubject.next([...this.tasks]);
    }
  }
}
              

Angular Task Item Component Example

// task-item.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Task } from '../../models/task.model';
import { format } from 'date-fns';

@Component({
  selector: 'app-task-item',
  templateUrl: './task-item.component.html',
  styleUrls: ['./task-item.component.scss']
})
export class TaskItemComponent {
  @Input() task: Task;
  @Output() updateTask = new EventEmitter();
  @Output() deleteTask = new EventEmitter();
  
  isEditing = false;
  editedTitle = '';
  
  get taskClasses() {
    return {
      'task-item': true,
      'completed': this.task.completed,
      [`priority-${this.task.priority}`]: true
    };
  }
  
  toggleComplete(): void {
    this.updateTask.emit({
      ...this.task,
      completed: !this.task.completed
    });
  }
  
  startEdit(): void {
    this.editedTitle = this.task.title;
    this.isEditing = true;
  }
  
  saveEdit(): void {
    if (this.editedTitle.trim()) {
      this.updateTask.emit({
        ...this.task,
        title: this.editedTitle
      });
      this.isEditing = false;
    }
  }
  
  cancelEdit(): void {
    this.isEditing = false;
  }
  
  confirmDelete(): void {
    if (confirm('Are you sure you want to delete this task?')) {
      this.deleteTask.emit(this.task.id);
    }
  }
  
  formatDate(date: string | Date): string {
    return format(new Date(date), 'MMM d, yyyy');
  }
}
              

Angular Task Item Template Example

<!-- task-item.component.html -->
<div [ngClass]="taskClasses">
  <div *ngIf="isEditing" class="task-edit">
    <input
      [(ngModel)]="editedTitle"
      type="text"
      (keyup.enter)="saveEdit()"
      #editInput
    >
    <button (click)="saveEdit()">Save</button>
    <button (click)="cancelEdit()">Cancel</button>
  </div>
  <div *ngIf="!isEditing" class="task-content">
    <input
      type="checkbox"
      [checked]="task.completed"
      (change)="toggleComplete()"
    >
    <span class="task-title">{{ task.title }}</span>
    <div class="task-actions">
      <button (click)="startEdit()">Edit</button>
      <button (click)="confirmDelete()">Delete</button>
    </div>
  </div>
  <div *ngIf="task.dueDate" class="task-due-date">
    Due: {{ formatDate(task.dueDate) }}
  </div>
  <div *ngIf="task.categories && task.categories.length" class="task-categories">
    <span
      *ngFor="let category of task.categories"
      class="category-tag"
    >{{ category }}</span>
  </div>
</div>