React Project Starter (Vite + Tailwind)

Overview

A responsive React application built with Vite and Tailwind CSS. It demonstrates component architecture, routing, state management with hooks, a Task Manager persisted to localStorage, and a public API integration with search and pagination. Includes light/dark theme support.

Tech Stack

• React 18 + Vite 5
• React Router 6
• Tailwind CSS 3

Getting Started

1. Install dependencies:

   npm install
   

2. Start the dev server:

   npm run dev
   

   Open http://localhost:5173.

Project Structure

src/
  App.jsx                # Routes and pages
  main.jsx               # React root
  index.css              # Tailwind layers
  context/ThemeContext.jsx
  layouts/RootLayout.jsx
  pages/{Home,Tasks,Api}.jsx
  sections/TaskManager.jsx
  ui/{Button,Card,Navbar,Footer}.jsx

Features

• Reusable UI: Button variants, Card
• Layout: Navbar, Footer, responsive container
• Theme: Light/Dark via context + Tailwind dark mode
• Task Manager: add/complete/delete/filter, persisted to localStorage
• API Page: fetch from JSONPlaceholder, loading/error states, search, pagination
• Animations: subtle fade-in transitions

Scripts

• npm run dev - start dev server
• npm run build - production build
• npm run preview - preview built app

Deployment (Netlify)

1. Ensure netlify.toml exists (already included):
   • Build command: npm run build
   • Publish directory: dist
   • SPA redirects via public/_redirects
2. Push to GitHub and connect the repo in Netlify, or run locally:

   npm run build
   

   Drag-and-drop the dist/ folder into Netlify Deploys, or use ntl deploy.

Live Demo

• Deployed URL: [Add your Netlify deployment URL here]
• Example: https://your-app-name.netlify.app

Screenshots

• Add screenshots of Home, Tasks, and API pages here.

Notes

• Requires Node 18+.
• Tailwind is configured in tailwind.config.js with darkMode: 'class'.