feat: add TaskFlow Board with React Flow integration

CONTRIBUTING.md

@@ -70,31 +70,47 @@ Jokes & Quotes:
 Pets Dashboard:
 - Persist favorites
 - Download image helper
-  
+
 COVID Dashboard:
+
 - Daily trends line charts
 - Country comparison
-
+
+Task Flow Board:
+
+- Add color themes for nodes
+- Implement keyboard shortcuts (Delete, Undo)
+- Add task search and filtering
+- Create board templates (Kanban, Sprint Planning)
+- Export/import boards as JSON
+- Add task due dates and calendar view
+- Implement drag-to-connect nodes feature
+- Add task dependencies validation
+
 Global Enhancements:
+
 - Extract API calls into services folder
 - Add custom hooks (useFetch, useLocalStorage)
 - Add tests with Vitest
 - TypeScript migration
 - CI workflow (lint + build)
 
 ## Code Style
+
 - Keep components small & focused
 - Use semantic HTML where practical
 - Prefer descriptive variable names
 - Add `// TODO:` comments for follow-up ideas
 
 ## Submitting a PR
+
 1. Ensure build passes: `npm run build`
 2. Provide a clear title & description (include issue # if applicable)
 3. Screenshots / GIFs for UI changes encouraged
 4. One feature/fix per PR when possible
 
 ## License
+
 By contributing you agree your work is licensed under the project’s MIT License.
 
 Happy hacking! ✨

README.md

@@ -22,6 +22,7 @@ A collection of interactive dashboards that fetch and display data from **free,
 | 😂 Jokes & Quotes     | [Joke API](https://official-joke-api.appspot.com/) + [Quotable](https://github.com/lukePeavey/quotable) | Daily dose of humor and motivation                |
 | 🐶🐱 Pets             | [Dog CEO](https://dog.ceo/dog-api/) + [Cataas](https://cataas.com/#/)                                   | Random cute dog and cat images                    |
 | 🦠 COVID-19 Tracker   | [COVID19 API](https://covid19api.com/)                                                                  | Track pandemic stats and trends globally          |
+| 📋 Task Flow Board    | [React Flow](https://reactflow.dev/)                                                                    | Visual task management with draggable nodes       |
 
 ---
 
@@ -51,6 +52,9 @@ Then open [http://localhost:5173](http://localhost:5173) in your browser.
 * 🧭 React Router v6
 * 🌐 Fetch API (no external client)
 * 🎨 Custom Light/Dark CSS Theme
+* 🔄 React Flow (for Task Board visualization)
+* 📊 Recharts (for data charts)
+* 🗺️ Leaflet + React Leaflet (for maps)
 
 ---
 

package.json

@@ -17,6 +17,7 @@
     "react-icons": "^5.5.0",
     "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.27.0",
+    "reactflow": "^11.11.4",
     "recharts": "^3.3.0"
   },
   "devDependencies": {

src/App.jsx

@@ -43,6 +43,7 @@ import Covid from './pages/Covid.jsx';
 import Navbar from './components/Navbar.jsx';
 import ContributorsWall from './pages/Contributors.jsx'
 import Pokedex from './pages/Pokedex.jsx';
+import TaskFlowBoard from './pages/TaskFlowBoard.jsx';
 
 // TODO: Extract theme state into context (see todo 5).
 import { useState, useEffect } from 'react';
@@ -82,6 +83,7 @@ export default function App() {
             <Route path="/covid" element={<Covid />} />  
             <Route path="/contributors" element={<ContributorsWall />} />    
             <Route path="/pokedex" element={<Pokedex />} />  
+            <Route path="/taskflow" element={<TaskFlowBoard />} />
         </Routes>
       </main>
     </div>

src/components/Navbar.jsx

@@ -16,6 +16,7 @@ export default function Navbar({ theme, toggleTheme }) {
         <li><NavLink to="/jokes-quotes">Jokes & Quotes</NavLink></li>
         <li><NavLink to="/pets">Pets</NavLink></li>
         <li><NavLink to="/covid">COVID-19</NavLink></li>
+        <li><NavLink to="/taskflow">TaskFlow</NavLink></li>
         <li className="theme-item">
           <button 
             className="theme-toggle" 

src/pages/Home.jsx

@@ -34,6 +34,7 @@ const dashboards = [
   { path: '/pets', title: 'Pets Images', desc: 'Random dog & cat images' },
   { path: '/covid', title: 'COVID-19 Stats', desc: 'Global & country data' },
   { path: '/pokedex', title: 'Pokédex', desc: 'Explore Pokémon species' },
+  { path: '/taskflow', title: 'Task Flow Board', desc: 'Visual task management with nodes' },
    { path: '/contributors', title: 'Contributor Wall', desc: 'Our Contributors' },
 
 ];