react

README.md

@@ -1,70 +1,138 @@
-# React.js and Tailwind CSS Assignment
+# React Task Manager
 
-This assignment focuses on building a responsive React application using JSX and Tailwind CSS, implementing component architecture, state management, hooks, and API integration.
+A modern task management application built with React, demonstrating component architecture, responsive design, and API integration.
 
-## Assignment Overview
+![App Screenshot](./screenshots/app-preview.png)
 
-You will:
-1. Set up a React project with Vite and Tailwind CSS
-2. Create reusable UI components
-3. Implement state management using React hooks
-4. Integrate with external APIs
-5. Style your application using Tailwind CSS
+[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE.md)  [![Vite](https://img.shields.io/badge/Vite-4.0-blue)](https://vitejs.dev)
 
-## Getting Started
+## 🌟 Features
 
-1. Accept the GitHub Classroom assignment invitation
-2. Clone your personal repository that was created by GitHub Classroom
-3. Install dependencies:
-   ```
-   npm install
-   ```
-4. Start the development server:
-   ```
-   npm run dev
-   ```
+* Responsive design for mobile, tablet and desktop views
+* Dark/Light theme toggle using Context API
+* Task management with CRUD operations
+* Dynamic API data fetching and display
+* Reusable component architecture
+* Modern UI with Tailwind CSS
+* React Router for navigation
+* Optional: API search/filter and pagination
 
-## Files Included
+## 🚀 Live Demo
+[View Live Demo](https://react-js-jsx-and-css-mastering-fron-nine-sandy.vercel.app/)
 
-- `Week3-Assignment.md`: Detailed assignment instructions
-- Starter files for your React application:
-  - Basic project structure
-  - Pre-configured Tailwind CSS
-  - Sample component templates
 
-## Requirements
+## 💻 Tech Stack
 
-- Node.js (v18 or higher)
-- npm or yarn
-- Modern web browser
-- Code editor (VS Code recommended)
+* React 18
+* React Router v6
+* Tailwind CSS
+* Context API
+* Vite
+* JSON Placeholder API
 
-## Project Structure
+## 📋 Prerequisites
+
+* Node.js (v14 or higher)
+* npm or yarn
+
+## ⚙️ Installation
+
+1. Clone the repository
+
+
+2. Navigate to project directory
+
+```bash
+cd react-task-manager
+```
+
+3. Install dependencies
+
+```bash
+npm install
+```
+
+4. Start development server
+
+```bash
+npm run dev
+```
+
+5. Open [http://localhost:5173](http://localhost:5173) in your browser
+
+## 📱 Screenshots
+
+### Home Page
+
+![Home Page](src/assets/Home.png)
+
+### Task Management
+
+![Tasks Page](src/assets/Tasks.png)
+
+### API Data & Light Mode
+
+![Light Mode](src/assets/Light Mode.png)
+
+## 🏗️ Project Structure
 
 ```
 src/
-├── components/       # Reusable UI components
-├── pages/           # Page components
-├── hooks/           # Custom React hooks
-├── context/         # React context providers
-├── api/             # API integration functions
-├── utils/           # Utility functions
-└── App.jsx          # Main application component
+├── components/
+│   ├── Button.jsx
+│   ├── Card.jsx
+│   ├── Navbar.jsx
+│   ├── Footer.jsx
+│   ├── TaskManager.jsx
+│   └── ApiData.jsx
+├── context/
+│   └── ThemeContext.jsx
+├── pages/
+│   ├── Home.jsx
+│   └── Tasks.jsx
+├── layout/
+│   └── Layout.jsx
+├── App.jsx
+└── main.jsx
 ```
 
-## Submission
+## 🛠️ Usage
+
+### Theme Toggle
+
+```jsx
+import { useTheme } from './context/ThemeContext';
+
+const { theme, toggleTheme } = useTheme();
+<button onClick={toggleTheme}>{theme === 'light' ? 'Dark Mode' : 'Light Mode'}</button>
+```
+
+### Adding Tasks
+
+```jsx
+<TaskManager onAdd={(task) => handleAddTask(task)} />
+```
+
+### API Data Display
+
+```jsx
+<ApiData /> // Fetches first 5 tasks and displays status
+```
+
+## 📝 Contributing
+
+1. Fork the project
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit changes (`git commit -m 'Add AmazingFeature'`)
+4. Push to branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
 
-Your work will be automatically submitted when you push to your GitHub Classroom repository. Make sure to:
+## 📜 License
 
-1. Complete all required components and features
-2. Implement proper state management with hooks
-3. Integrate with at least one external API
-4. Style your application with Tailwind CSS
-5. Deploy your application and add the URL to your README.md
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
 
-## Resources
+## 👏 Acknowledgments
 
-- [React Documentation](https://react.dev/)
-- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
-- [Vite Documentation](https://vitejs.dev/guide/)
-- [React Router Documentation](https://reactrouter.com/) 
+* [Tailwind CSS](https://tailwindcss.com)
+* [React Icons](https://react-icons.github.io/react-icons)
+* [JSON Placeholder](https://jsonplaceholder.typicode.com)

eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>react-js-jsx-and-css-mastering-front-end-development-morganwambulwa</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>