Complete ReactJS Project

Overview

A learning-oriented React application bundled with Parcel, demonstrating modern front-end practices: client-side routing, code-splitting with lazy loading, shared state via React Context, and UI via Tailwind CSS and component libraries.

Tech Stack

• Framework: React 19, React DOM 19
• Router: React Router v6
• Bundler/Dev Server: Parcel v2
• Styling: Tailwind CSS v4 (via @import "tailwindcss"), custom CSS
• UI Libraries: MUI (@mui/material + Emotion), RSuite
• Validation: Zod
• Loading/Feedback: react-spinners, react-loading-indicators

Highlights

• Structured routing with nested routes and an error boundary
• Lazy-loaded Groceries route for code-splitting
• Global state via UserContext and useState
• Product listing with ProductCard and details via route params
• Tailwind v4 setup using CSS @import

Topics Covered

• React Basics: Components, JSX, props, state (useState), events
• Hooks: useState, custom hook (hook/useGetSingleProduct.jsx), memoization demo (MemoHook.jsx)
• Routing: createBrowserRouter, nested routes, Outlet, route params (/products/:productId), error element
• Code Splitting: React.lazy and Suspense for the Groceries route
• Global State: React Context via UserContext (provide/consume pattern)
• Data Fetching: Encapsulated in custom hook for single-product retrieval
• Conditional Rendering & Lists: Product cards, skeleton states (Skelleton.jsx), list components (ListItems.jsx)
• Class Component: ProfileClass.jsx example alongside functional components
• UI & Styling: Tailwind CSS v4, custom CSS classes, MUI (Emotion) and RSuite components
• Navigation UI: NavBar.jsx, Link-style navigation, active link styling
• Form & Auth Basics: Login.jsx scaffold for handling inputs and submit
• Utilities & Constants: Centralized values in utils/constants.js
• Project Structure & Conventions: Colocation in src/components, single router definition in App.js

Project Structure

complete-ReactJs/
├─ index.html              # Parcel entry; mounts React app
├─ index.css               # Tailwind v4 import + custom styles
├─ package.json            # Scripts and dependencies
├─ src/
│  ├─ App.js               # Router, context provider, layout shell
│  ├─ components/
│  │  ├─ About.jsx
│  │  ├─ Accordian.jsx
│  │  ├─ ComponentA.jsx
│  │  ├─ ComponentB.jsx
│  │  ├─ Error.jsx         # Error boundary element
│  │  ├─ Groceries.jsx     # Lazy-loaded route
│  │  ├─ Kid.jsx
│  │  ├─ ListItems.jsx
│  │  ├─ Login.jsx
│  │  ├─ MemoHook.jsx
│  │  ├─ Men.jsx
│  │  ├─ NavBar.jsx
│  │  ├─ Product.jsx
│  │  ├─ ProductCard.jsx
│  │  ├─ ProductDetails.jsx
│  │  ├─ Profile.jsx
│  │  ├─ ProfileClass.jsx
│  │  ├─ Skelleton.jsx
│  │  └─ Women.jsx
│  ├─ hook/
│  │  └─ useGetSingleProduct.jsx
│  └─ utils/
│     ├─ constants.js
│     └─ UserContext.js
└─ README.md

Getting Started

• Prerequisites: Node.js 18+ and npm

1. Install dependencies

npm install

2. Start development server (Parcel)

npm run dev

• Default dev server runs at http://localhost:1234/ (Parcel chooses the port automatically if 1234 is busy).

3. Build for production

npm run build

• Outputs an optimized build (served by Parcel when previewed).

Available Scripts

• npm run dev: Start Parcel dev server with HMR on index.html
• npm run build: Production build using Parcel

Routing

Defined in src/App.js using createBrowserRouter with an App layout and Outlet for nested routes.

• / (index): ProductCard
• /men: Men
• /women: Women
• /kid: Kid
• /about: About
• /groceries: Groceries (lazy-loaded with React.lazy + Suspense)
• /login: Login
• /memo: MemoHook
• /products/:productId: ProductDetails
• Fallback errors are handled by Error component via errorElement.

State and Context

• UserContext (in src/utils/UserContext.js) is provided at the app root within App, exposing { name, setUserName } to descendants.

Styling

• index.css includes Tailwind v4 via @import "tailwindcss" and custom utility classes for product cards, skeletons, and navigation.
• Component libraries available: MUI (via Emotion) and RSuite for rapid UI composition.

Code-Splitting

• Groceries route is imported using React.lazy(() => import('./components/Groceries')) and rendered inside a Suspense boundary to reduce initial bundle size.

Custom Hooks and Utilities

• hook/useGetSingleProduct.jsx: Encapsulates product-fetching logic for details views.
• utils/constants.js: Central place for project-wide constants.

Conventions

• React components use .jsx and are colocated under src/components.
• Routes are declared in a single place (App.js) for clarity.
• Prefer functional components and React hooks.

Troubleshooting

• If the dev server fails to start or HMR behaves unexpectedly:
  • Kill other processes using port 1234 or let Parcel auto-pick a free port.
  • Clear Parcel cache: delete the .parcel-cache directory if present and retry npm run dev.
  • Remove dist/ or .cache/ artifacts if they exist from earlier runs.
• Ensure a modern Node.js (18+) to avoid ESM/CJS interop issues.

License

• Licensed under the ISC License (see package.json).

Acknowledgements

• Built as part of a complete React learning journey, showcasing routing, context, lazy loading, and modern styling with Tailwind CSS.