<<<<<<< HEAD
=======
A modern, responsive Trello-like task management application built with React. Features multiple boards, lists, cards with drag-and-drop functionality, and persistent data storage using localStorage.
This is a frontend-only task management application that mimics Trello's core functionality:
- Multiple boards for organizing different projects
- Lists within boards (To Do, In Progress, Done)
- Cards with titles and descriptions
- Drag-and-drop for reordering and moving items
- Data persistence using browser localStorage
- No backend required - everything runs in the browser
- Framework: React 19.1.1 with Vite 7.1.2
- Styling: SCSS with CSS Variables for theming
- Drag & Drop: @dnd-kit/core & @dnd-kit/sortable
- Routing: React Router DOM 7.8.2
- State Management: React Context + useReducer
- Build Tool: Vite
- Package Manager: npm
- Node.js (v16 or higher)
- npm (v8 or higher)
-
Clone or download the project files
-
Navigate to the project directory:
cd tamasha_project -
Install dependencies:
npm install
-
Start development server:
npm run dev
-
Open your browser and go to
http://localhost:5173
That's it! The app should be running in under 2 minutes.
- Display all created boards
- Create new board (with name validation)
- Delete board (with confirmation)
- Rename board (inline editing)
- Navigate to board on click
- Bonus: Drag-and-drop board reordering
- Default lists: "To Do", "In Progress", "Done"
- Add new list functionality
- Rename list (inline editing)
- Delete list (with confirmation)
- Bonus: Horizontal list reordering via drag-and-drop
- Add new card (title required)
- Edit card via modal (title + optional description)
- Delete card functionality
- Bonus: Drag-and-drop cards between lists
- localStorage integration
- State persistence across page reloads
- Automatic saving on state changes
- React functional components
- useState, useEffect, useReducer hooks
- Logical component organization
- Custom hooks (useBoards, useLocalStorage)
- Dark/Light Theme Toggle - Persistent theme preference
- Search Functionality - Search boards and cards
- Export/Import State - Backup and restore data as JSON
- Responsive Design - Works on desktop and mobile
- Accessibility Features - ARIA labels, keyboard navigation
- Professional Styling - Modern, clean interface
- Hover Effects - Smooth transitions and feedback
- Empty States - Helpful messages when no data
- Truncated Titles - Long titles with tooltips
- Confirmation Dialogs - Safe deletion workflows
- Focus Management - Proper keyboard navigation
- Clean grid layout for boards
- Search bar for filtering boards
- Theme toggle in navigation
- Export/Import functionality
- Responsive design
- Horizontal scrolling lists
- Sticky "Add new list" composer
- Drag-and-drop for cards and lists
- Modal for card editing
- Search functionality for cards
- Keyboard navigation support
- ARIA labels and roles
- Focus management in modals
- Screen reader friendly
src/
├── components/ # Reusable UI components
│ ├── BoardCard.jsx # Individual board display
│ ├── DraggableCard.jsx # Draggable card wrapper
│ ├── Modal.jsx # Reusable modal component
│ ├── Navbar.jsx # Top navigation
│ ├── SearchBar.jsx # Search functionality
│ ├── ThemeToggle.jsx # Dark/light theme toggle
│ └── ExportImport.jsx # Data backup/restore
├── pages/ # Main page components
│ ├── Dashboard.jsx # Board overview page
│ └── Board.jsx # Individual board page
├── hooks/ # Custom React hooks
│ ├── useBoards.js # Boards context hook
│ └── useLocalStorage.jsx # localStorage hook
├── state/ # State management
│ └── boardsReducer.js # Main state reducer
├── utils/ # Utility functions
│ └── id.js # ID generation
└── styles/ # Global styles
└── index.scss # Main stylesheet
# Development
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
# Code Quality
npm run lint # Run ESLint
npm run format # Format code (if configured)
# Testing (if added later)
npm run test # Run tests
npm run test:watch # Run tests in watch modeNo environment variables required - this is a frontend-only application.
- Chrome/Edge (latest)
- Data Storage: Limited to browser localStorage (~5-10MB)
- Collaboration: No real-time collaboration features
- File Attachments: No file upload functionality
- Offline: Requires internet for initial load
- Data Recovery: No automatic backup to cloud
- localStorage has size limits (~5-10MB depending on browser)
- Data is browser-specific (not synced across devices)
- Clearing browser data will remove all boards
- Cloud Storage: Integration with Firebase/Backend
- Real-time Collaboration: WebSocket support
- File Attachments: Image/document uploads
- Advanced Search: Filters, tags, date ranges
- Templates: Pre-built board templates
- Analytics: Usage statistics and insights
- Mobile App: React Native version
- Offline Support: Service Worker implementation
- Testing: Unit and integration tests
- Performance: Virtual scrolling for large lists
- PWA: Progressive Web App features
- TypeScript: Type safety implementation
- State Management: Redux Toolkit migration
This is an assignment project, but contributions are welcome:
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
- useReducer over useState: For complex state management
- @dnd-kit over react-beautiful-dnd: Better performance and accessibility
- SCSS over Tailwind: More control over theming and animations
- localStorage over IndexedDB: Simpler for assignment scope
- Debounced localStorage saves
- Memoized components with React.memo
- Efficient drag-and-drop algorithms
- Optimized re-renders
- Keyboard navigation support
- ARIA labels and roles
- Focus management
- Screen reader compatibility