Building a Complete App

task-manager/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── ui/
│   │   │   ├── Button.jsx
│   │   │   ├── Input.jsx
│   │   │   ├── Card.jsx
│   │   │   └── Modal.jsx
│   │   ├── layout/
│   │   │   ├── Header.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   └── Layout.jsx
│   │   └── tasks/
│   │       ├── TaskCard.jsx
│   │       ├── TaskList.jsx
│   │       ├── TaskFilter.jsx
│   │       └── TaskForm.jsx
│   │
│   ├── pages/
│   │   ├── LoginPage.jsx
│   │   ├── DashboardPage.jsx
│   │   ├── TasksPage.jsx
│   │   ├── TaskDetailPage.jsx
│   │   └── NotFoundPage.jsx
│   │
│   ├── context/
│   │   ├── AuthContext.jsx
│   │   └── TaskContext.jsx
│   │
│   ├── hooks/
│   │   ├── useAuth.js
│   │   ├── useTasks.js
│   │   └── useLocalStorage.js
│   │
│   ├── utils/
│   │   ├── api.js
│   │   ├── validation.js
│   │   └── helpers.js
│   │
│   ├── App.jsx
│   ├── index.js
│   └── index.css
│
├── package.json
└── README.md

import React, { createContext, useContext, useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

const AuthContext = createContext()

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)
  
  // Load user from localStorage on mount
  useEffect(() => {
    const savedUser = localStorage.getItem('user')
    if (savedUser) {
      setUser(JSON.parse(savedUser))
    }
    setLoading(false)
  }, [])
  
  const login = (email, password) => {
    // Simulate API call
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (email && password) {
          const user = {
            id: '1',
            email,
            name: email.split('@')[0]
          }
          setUser(user)
          localStorage.setItem('user', JSON.stringify(user))
          resolve(user)
        } else {
          reject(new Error('Invalid credentials'))
        }
      }, 500)
    })
  }
  
  const logout = () => {
    setUser(null)
    localStorage.removeItem('user')
  }
  
  const value = {
    user,
    loading,
    login,
    logout,
    isAuthenticated: !!user
  }
  
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider')
  }
  return context
}

import React, { createContext, useContext, useState, useEffect } from 'react'

const TaskContext = createContext()

export function TaskProvider({ children }) {
  const [tasks, setTasks] = useState([])
  const [categories, setCategories] = useState(['Work', 'Personal', 'Shopping'])
  
  // Load tasks from localStorage
  useEffect(() => {
    const savedTasks = localStorage.getItem('tasks')
    if (savedTasks) {
      setTasks(JSON.parse(savedTasks))
    } else {
      // Initial demo data
      setTasks([
        {
          id: '1',
          title: 'Complete React tutorial',
          description: 'Finish all 42 lessons',
          category: 'Work',
          priority: 'high',
          completed: false,
          dueDate: '2024-12-31',
          createdAt: new Date().toISOString()
        },
        {
          id: '2',
          title: 'Buy groceries',
          description: 'Milk, eggs, bread',
          category: 'Shopping',
          priority: 'medium',
          completed: false,
          dueDate: '2024-12-25',
          createdAt: new Date().toISOString()
        }
      ])
    }
  }, [])
  
  // Save tasks to localStorage whenever they change
  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks))
  }, [tasks])
  
  const addTask = (task) => {
    const newTask = {
      ...task,
      id: Date.now().toString(),
      completed: false,
      createdAt: new Date().toISOString()
    }
    setTasks(prev => [newTask, ...prev])
    return newTask
  }
  
  const updateTask = (id, updates) => {
    setTasks(prev => 
      prev.map(task => 
        task.id === id ? { ...task, ...updates } : task
      )
    )
  }
  
  const deleteTask = (id) => {
    setTasks(prev => prev.filter(task => task.id !== id))
  }
  
  const toggleComplete = (id) => {
    setTasks(prev =>
      prev.map(task =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    )
  }
  
  const getTasksByCategory = (category) => {
    if (!category || category === 'all') return tasks
    return tasks.filter(task => task.category === category)
  }
  
  const getTaskStats = () => {
    return {
      total: tasks.length,
      completed: tasks.filter(t => t.completed).length,
      pending: tasks.filter(t => !t.completed).length,
      highPriority: tasks.filter(t => t.priority === 'high' && !t.completed).length
    }
  }
  
  const value = {
    tasks,
    categories,
    addTask,
    updateTask,
    deleteTask,
    toggleComplete,
    getTasksByCategory,
    getTaskStats
  }
  
  return (
    <TaskContext.Provider value={value}>
      {children}
    </TaskContext.Provider>
  )
}

export function useTasks() {
  const context = useContext(TaskContext)
  if (!context) {
    throw new Error('useTasks must be used within TaskProvider')
  }
  return context
}

import React from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider, useAuth } from './context/AuthContext'
import { TaskProvider } from './context/TaskContext'
import Layout from './components/layout/Layout'
import LoginPage from './pages/LoginPage'
import DashboardPage from './pages/DashboardPage'
import TasksPage from './pages/TasksPage'
import TaskDetailPage from './pages/TaskDetailPage'
import NotFoundPage from './pages/NotFoundPage'

// Protected Route component
function ProtectedRoute({ children }) {
  const { isAuthenticated, loading } = useAuth()
  
  if (loading) {
    return <div className="loading">Loading...</div>
  }
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />
  }
  
  return children
}

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <TaskProvider>
          <Routes>
            {/* Public route */}
            <Route path="/login" element={<LoginPage />} />
            
            {/* Protected routes */}
            <Route
              path="/"
              element={
                <ProtectedRoute>
                  <Layout />
                </ProtectedRoute>
              }
            >
              <Route index element={<DashboardPage />} />
              <Route path="tasks" element={<TasksPage />} />
              <Route path="tasks/:id" element={<TaskDetailPage />} />
            </Route>
            
            {/* 404 */}
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </TaskProvider>
      </AuthProvider>
    </BrowserRouter>
  )
}

export default App

import React from 'react'
import { Outlet } from 'react-router-dom'
import Header from './Header'
import Sidebar from './Sidebar'

function Layout() {
  return (
    <div className="app-layout">
      <Header />
      <div className="layout-container">
        <Sidebar />
        <main className="main-content">
          <Outlet />
        </main>
      </div>
    </div>
  )
}

export default Layout

import React from 'react'
import { useAuth } from '../../context/AuthContext'
import { useNavigate } from 'react-router-dom'

function Header() {
  const { user, logout } = useAuth()
  const navigate = useNavigate()
  
  const handleLogout = () => {
    logout()
    navigate('/login')
  }
  
  return (
    <header className="header">
      <div className="header-content">
        <h1 className="logo">Task Manager</h1>
        
        <div className="user-menu">
          <span className="user-name">Welcome, {user?.name}</span>
          <button onClick={handleLogout} className="btn-logout">
            Logout
          </button>
        </div>
      </div>
    </header>
  )
}

export default Header

import React from 'react'
import { NavLink } from 'react-router-dom'

function Sidebar() {
  return (
    <aside className="sidebar">
      <nav className="sidebar-nav">
        <NavLink to="/" end className="nav-link">
          📊 Dashboard
        </NavLink>
        <NavLink to="/tasks" className="nav-link">
          ✓ All Tasks
        </NavLink>
      </nav>
    </aside>
  )
}

export default Sidebar

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

function LoginPage() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(false)
  const { login } = useAuth()
  const navigate = useNavigate()
  
  const handleSubmit = async (e) => {
    e.preventDefault()
    setError(null)
    setLoading(true)
    
    try {
      await login(email, password)
      navigate('/')
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }
  
  return (
    <div className="login-page">
      <div className="login-card">
        <h1>Task Manager</h1>
        <h2>Login</h2>
        
        {error && (
          <div className="error-message">{error}</div>
        )}
        
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              placeholder="Enter your email"
            />
          </div>
          
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input
              id="password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              placeholder="Enter your password"
            />
          </div>
          
          <button type="submit" disabled={loading} className="btn-primary">
            {loading ? 'Logging in...' : 'Login'}
          </button>
        </form>
        
        <p className="demo-note">
          Demo: Use any email and password to login
        </p>
      </div>
    </div>
  )
}

export default LoginPage

import React from 'react'
import { Link } from 'react-router-dom'
import { useTasks } from '../context/TaskContext'

function DashboardPage() {
  const { tasks, getTaskStats } = useTasks()
  const stats = getTaskStats()
  
  const recentTasks = tasks.slice(0, 5)
  
  return (
    <div className="dashboard-page">
      <h1>Dashboard</h1>
      
      {/* Stats Cards */}
      <div className="stats-grid">
        <div className="stat-card">
          <h3>Total Tasks</h3>
          <p className="stat-number">{stats.total}</p>
        </div>
        
        <div className="stat-card">
          <h3>Completed</h3>
          <p className="stat-number success">{stats.completed}</p>
        </div>
        
        <div className="stat-card">
          <h3>Pending</h3>
          <p className="stat-number warning">{stats.pending}</p>
        </div>
        
        <div className="stat-card">
          <h3>High Priority</h3>
          <p className="stat-number danger">{stats.highPriority}</p>
        </div>
      </div>
      
      {/* Recent Tasks */}
      <div className="section">
        <div className="section-header">
          <h2>Recent Tasks</h2>
          <Link to="/tasks" className="btn-link">View All</Link>
        </div>
        
        <div className="task-list">
          {recentTasks.length === 0 ? (
            <p className="empty-state">No tasks yet. Create your first task!</p>
          ) : (
            recentTasks.map(task => (
              <Link 
                key={task.id} 
                to={`/tasks/${task.id}`}
                className="task-item"
              >
                <div className="task-info">
                  <h3>{task.title}</h3>
                  <p>{task.category}</p>
                </div>
                <span className={`priority-badge ${task.priority}`}>
                  {task.priority}
                </span>
              </Link>
            ))
          )}
        </div>
      </div>
    </div>
  )
}

export default DashboardPage

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { useTasks } from '../context/TaskContext'
import TaskForm from '../components/tasks/TaskForm'

function TasksPage() {
  const { tasks, categories, toggleComplete, deleteTask } = useTasks()
  const [filter, setFilter] = useState('all')
  const [search, setSearch] = useState('')
  const [showForm, setShowForm] = useState(false)
  
  // Filter and search tasks
  const filteredTasks = tasks.filter(task => {
    const matchesCategory = filter === 'all' || task.category === filter
    const matchesSearch = task.title.toLowerCase().includes(search.toLowerCase()) ||
                         task.description.toLowerCase().includes(search.toLowerCase())
    return matchesCategory && matchesSearch
  })
  
  return (
    <div className="tasks-page">
      <div className="page-header">
        <h1>All Tasks</h1>
        <button 
          onClick={() => setShowForm(true)}
          className="btn-primary"
        >
          + New Task
        </button>
      </div>
      
      {/* Filters */}
      <div className="filters">
        <input
          type="text"
          placeholder="Search tasks..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="search-input"
        />
        
        <select 
          value={filter} 
          onChange={(e) => setFilter(e.target.value)}
          className="filter-select"
        >
          <option value="all">All Categories</option>
          {categories.map(cat => (
            <option key={cat} value={cat}>{cat}</option>
          ))}
        </select>
      </div>
      
      {/* Task List */}
      <div className="tasks-grid">
        {filteredTasks.length === 0 ? (
          <p className="empty-state">
            {search ? 'No tasks match your search.' : 'No tasks found. Create one!'}
          </p>
        ) : (
          filteredTasks.map(task => (
            <div 
              key={task.id} 
              className={`task-card ${task.completed ? 'completed' : ''}`}
            >
              <div className="task-card-header">
                <input
                  type="checkbox"
                  checked={task.completed}
                  onChange={() => toggleComplete(task.id)}
                />
                <Link to={`/tasks/${task.id}`} className="task-title">
                  {task.title}
                </Link>
              </div>
              
              <p className="task-description">{task.description}</p>
              
              <div className="task-meta">
                <span className={`badge ${task.category.toLowerCase()}`}>
                  {task.category}
                </span>
                <span className={`priority ${task.priority}`}>
                  {task.priority}
                </span>
              </div>
              
              <div className="task-actions">
                <Link to={`/tasks/${task.id}`} className="btn-secondary">
                  View
                </Link>
                <button 
                  onClick={() => deleteTask(task.id)}
                  className="btn-danger"
                >
                  Delete
                </button>
              </div>
            </div>
          ))
        )}
      </div>
      
      {/* Task Form Modal */}
      {showForm && (
        <TaskForm onClose={() => setShowForm(false)} />
      )}
    </div>
  )
}

export default TasksPage

import React, { useState } from 'react'
import { useTasks } from '../../context/TaskContext'

function TaskForm({ onClose, task }) {
  const { addTask, updateTask, categories } = useTasks()
  const [formData, setFormData] = useState({
    title: task?.title || '',
    description: task?.description || '',
    category: task?.category || categories[0],
    priority: task?.priority || 'medium',
    dueDate: task?.dueDate || ''
  })
  const [errors, setErrors] = useState({})
  
  const validate = () => {
    const newErrors = {}
    
    if (!formData.title.trim()) {
      newErrors.title = 'Title is required'
    }
    
    if (formData.title.length > 100) {
      newErrors.title = 'Title must be less than 100 characters'
    }
    
    if (!formData.description.trim()) {
      newErrors.description = 'Description is required'
    }
    
    return newErrors
  }
  
  const handleSubmit = (e) => {
    e.preventDefault()
    
    const newErrors = validate()
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors)
      return
    }
    
    if (task) {
      updateTask(task.id, formData)
    } else {
      addTask(formData)
    }
    
    onClose()
  }
  
  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
    // Clear error when user types
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }))
    }
  }
  
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>{task ? 'Edit Task' : 'New Task'}</h2>
          <button onClick={onClose} className="btn-close">×</button>
        </div>
        
        <form onSubmit={handleSubmit} className="task-form">
          <div className="form-group">
            <label htmlFor="title">Title *</label>
            <input
              id="title"
              name="title"
              type="text"
              value={formData.title}
              onChange={handleChange}
              className={errors.title ? 'error' : ''}
            />
            {errors.title && <span className="error-text">{errors.title}</span>}
          </div>
          
          <div className="form-group">
            <label htmlFor="description">Description *</label>
            <textarea
              id="description"
              name="description"
              value={formData.description}
              onChange={handleChange}
              rows="4"
              className={errors.description ? 'error' : ''}
            />
            {errors.description && (
              <span className="error-text">{errors.description}</span>
            )}
          </div>
          
          <div className="form-row">
            <div className="form-group">
              <label htmlFor="category">Category</label>
              <select
                id="category"
                name="category"
                value={formData.category}
                onChange={handleChange}
              >
                {categories.map(cat => (
                  <option key={cat} value={cat}>{cat}</option>
                ))}
              </select>
            </div>
            
            <div className="form-group">
              <label htmlFor="priority">Priority</label>
              <select
                id="priority"
                name="priority"
                value={formData.priority}
                onChange={handleChange}
              >
                <option value="low">Low</option>
                <option value="medium">Medium</option>
                <option value="high">High</option>
              </select>
            </div>
          </div>
          
          <div className="form-group">
            <label htmlFor="dueDate">Due Date</label>
            <input
              id="dueDate"
              name="dueDate"
              type="date"
              value={formData.dueDate}
              onChange={handleChange}
            />
          </div>
          
          <div className="form-actions">
            <button type="button" onClick={onClose} className="btn-secondary">
              Cancel
            </button>
            <button type="submit" className="btn-primary">
              {task ? 'Update' : 'Create'} Task
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default TaskForm

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}

/* Layout */
.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: #2563eb;
  color: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.layout-container {
  display: flex;
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.sidebar {
  width: 250px;
  background: white;
  border-right: 1px solid #e5e7eb;
  padding: 2rem 1rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-link {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #4b5563;
  transition: all 0.2s;
}

.nav-link:hover {
  background: #f3f4f6;
}

.nav-link.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

.main-content {
  flex: 1;
  padding: 2rem;
}

/* Buttons */
.btn-primary {
  background: #2563eb;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: white;
  color: #4b5563;
  border: 1px solid #d1d5db;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
}

.btn-danger {
  background: #ef4444;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

/* Cards */
.stat-card {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 0.5rem;
}

.task-card {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.task-card.completed {
  opacity: 0.6;
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
}

.form-group input.error,
.form-group textarea.error {
  border-color: #ef4444;
}

.error-text {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 0.5rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

import { renderHook, act } from '@testing-library/react'
import { TaskProvider, useTasks } from '../context/TaskContext'

const wrapper = ({ children }) => <TaskProvider>{children}</TaskProvider>

describe('TaskContext', () => {
  test('adds a new task', () => {
    const { result } = renderHook(() => useTasks(), { wrapper })
    
    const newTask = {
      title: 'Test Task',
      description: 'Test Description',
      category: 'Work',
      priority: 'high'
    }
    
    act(() => {
      result.current.addTask(newTask)
    })
    
    expect(result.current.tasks).toHaveLength(3) // 2 initial + 1 new
    expect(result.current.tasks[0].title).toBe('Test Task')
  })
  
  test('toggles task completion', () => {
    const { result } = renderHook(() => useTasks(), { wrapper })
    
    const taskId = result.current.tasks[0].id
    const initialStatus = result.current.tasks[0].completed
    
    act(() => {
      result.current.toggleComplete(taskId)
    })
    
    expect(result.current.tasks[0].completed).toBe(!initialStatus)
  })
  
  test('calculates task stats correctly', () => {
    const { result } = renderHook(() => useTasks(), { wrapper })
    
    const stats = result.current.getTaskStats()
    
    expect(stats).toHaveProperty('total')
    expect(stats).toHaveProperty('completed')
    expect(stats).toHaveProperty('pending')
    expect(stats).toHaveProperty('highPriority')
  })
})