KYNA Track Your Order - React Redux App

A React Redux application that replicates the "Track Your Order" page from the KYNA jewelry website. This application features a modern, responsive design with a teal color scheme and includes order tracking functionality.

Features

• Responsive Design: Mobile-first approach with responsive layout
• Redux State Management: Centralized state management for order tracking
• Modern UI Components: Clean, professional interface matching the original design
• Order Tracking: Functional order tracking form with mock API simulation
• Interactive Elements: Hover effects, loading states, and form validation

Project Structure

src/
├── components/
│   ├── Header.js          # Header with navigation and branding
│   ├── MainContent.js     # Main content wrapper
│   ├── Sidebar.js         # User account sidebar navigation
│   ├── OrderTrackingForm.js # Order tracking form component
│   └── Footer.js          # Footer with links and information
├── store/
│   ├── store.js           # Redux store configuration
│   └── slices/
│       └── orderSlice.js  # Order state management slice
├── App.js                 # Main App component
├── App.css               # Main stylesheet
├── index.js              # Application entry point
└── index.css             # Global styles

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm start

3. Open http://localhost:3000 to view it in the browser.

Available Scripts

• npm start - Runs the app in development mode
• npm build - Builds the app for production
• npm test - Launches the test runner
• npm eject - Ejects from Create React App (one-way operation)

Features Overview

Header

• Top promotional banner
• Main header with contact info and logo
• Navigation menu with product categories
• User account icons (search, user, wishlist, cart)

Sidebar

• User account navigation menu
• Active state highlighting for current page
• Clean, organized menu structure

Order Tracking Form

• Order number and email input fields
• Form validation and error handling
• Loading states during API calls
• Mock order status display with tracking information

Footer

• Multiple sections with relevant links
• Contact information
• Professional layout matching the original design

Redux State Management

The application uses Redux Toolkit for state management with the following structure:

• orderSlice: Manages order tracking state including:
  • Order number and email inputs
  • Loading states
  • Error handling
  • Order status information

Styling

The application uses CSS modules with a custom design system featuring:

• Teal color scheme (#20b2aa)
• Responsive grid layouts
• Modern typography
• Hover effects and transitions
• Mobile-first responsive design

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is for educational purposes and replicates the design of the KYNA jewelry website.