react-js-jsx-and-css-mastering-front-end-development-Razkim254

https://plp-mern-stack-development.github.io/react-js-jsx-and-css-mastering-front-end-development-Razkim254/

# 🌟 React + Tailwind CSS Front-End Assignment

This project is a responsive React application built with Vite and styled using Tailwind CSS. It demonstrates component architecture, state management, hooks usage, and API integration — all aligned with modern front-end development best practices.

---

🚀 Features

• ✅ Component-based architecture with reusable UI elements
• ✅ Task Manager with add, delete, complete, and filter functionality
• ✅ Custom hooks (useLocalStorage) and context (ThemeContext)
• ✅ API integration with JSONPlaceholder (search, loading, error states)
• ✅ Responsive design with light/dark theme toggle
• ✅ Routing via React Router

---

📂 Project Structure

src/ ├── components/ # Reusable UI components (Button, Card, Navbar, etc.) ├── pages/ # Page-level components ├── hooks/ # Custom React hooks ├── context/ # Theme context provider ├── api/ # API integration logic ├── utils/ # Utility functions └── App.jsx # Main application component

Code

---

🛠️ Setup Instructions

Prerequisites

• Node.js v18 or higher
• npm or yarn
• Modern browser
• VS Code (recommended)

Installation

```bash

Clone your GitHub Classroom repo

git clone https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git cd YOUR-REPO-NAME

Install dependencies

npm install

Start development server

npm run dev 🌐 Live Preview Once running, open http://localhost:5173 in your browser.

📸 Screenshots Replace these with actual screenshots from your app

🧭 Navbar and Theme Toggle

✅ Task Manager

🌍 API Integration

📦 Dependencies React

Vite

Tailwind CSS

React Router DOM

ESLint

📄 Assignment Instructions See Week3-Assignment.md for detailed task breakdown.

📬 Submission Commit and push regularly to show progress

Include all project files and screenshots

Ensure your code is clean, organized, and well-commented