Shark Wave — Single Vendor E-commerce (Frontend)

Shark Wave is a single-vendor e-commerce storefront built with Next.js 14 (App Router). It pairs server components for SEO-friendly catalog pages with client-side interactivity for cart, checkout, and account flows. Styling combines Tailwind CSS utility classes with Ant Design components, and global state is managed through React Context providers.

This repository is shared for demonstration purposes only. Cloning, downloading, or redistributing this code without permission is strictly prohibited.

If you're interested in the project or wish to request access, please contact the repository owner at Siam Khushnobish.

• Authentication — Sign in, sign up, OTP verification, forget / reset password (cookie-based session via cookies-next).
• Route protection — src/middleware.js redirects unauthenticated users to /sign-in for protected routes (/profile/*, /my-cart, etc.).
• Catalog — Home page banners, mega-menu navigation, category pages, product listings with filter sidebar and pagination.
• Product details — Image carousel, description / rating tabs, ratings and reviews.
• Cart & checkout — Cart management, coupon codes, multi-step checkout with address selection, shipping methods, and order summary.
• Orders — Order success / cancel pages, active orders, order history, order details, and order tracking.
• Profile — Update name, email, phone, password, and profile image; manage addresses and wishlists.
• Static pages — Terms & conditions and privacy policy (content fetched from the API).

• Framework: Next.js 14.2 (App Router, React Server Components)
• UI: React 18, Ant Design 5, react-icons
• Styling: Tailwind CSS 3 with tailwind-scrollbar, custom color palette, Poppins & Montserrat fonts
• State: React Context (Auth, Cart, Wishlist, Address, Order, Categories)
• HTTP: Native fetch wrapped in a MakeApiCall service helper
• Cookies / auth: cookies-next
• Notifications: react-toastify
• Pagination: react-paginate
• Images: Next/Image + sharp
• Utilities: lodash
• Linting: ESLint (eslint-config-next)

src/
├── app/                       # Next.js App Router
│   ├── (public)/              # Public route group (home, sign-in, sign-up, products, category, etc.)
│   ├── (protected)/           # Auth-gated routes (profile, my-cart, order-success/cancel)
│   ├── layout.js              # Root layout (fonts, providers, toast container, metadata)
│   ├── error.jsx              # App-level error boundary
│   ├── siteMetaData.js        # Site-wide SEO metadata
│   └── globals.css            # Tailwind base + global styles
│
├── components/                # Reusable UI primitives
│   ├── Breadcrumb/            # Dynamic breadcrumb generator
│   ├── Buttons/               # Button variants
│   ├── common/                # Loader, social buttons, shared widgets
│   ├── Errors/                # Error UI container
│   ├── FilterSidebar/         # Product filter sidebar
│   ├── Footer/                # Footer (top + primary)
│   ├── Forms/                 # Inputs (text, email, phone, OTP, password, rating, select, ...)
│   ├── Navbar/                # Top bar, primary nav, mega menu, category menu
│   ├── product/               # Product card, image carousel, listing, details, ratings
│   └── verificationForm/      # OTP / verification form pieces
│
├── contexts/                  # React Context providers
│   ├── AuthContext.js
│   ├── CartContext.js
│   ├── WishListContext.js
│   ├── AddressContext.js
│   ├── OrderContext.js
│   ├── CategoriesContext.js
│   └── Providers.js           # Composes all providers
│
├── sections/                  # Page-level composed UI (Home, Product, MyCart, Checkout,
│                              #   Order, MyAccount, Address, WishLists, SignIn/Up, OTP,
│                              #   ForgetPassword, ResetPassword, OrderSuccess, ...)
│
├── layouts/                   # Primary, Meta, and Profile layout shells
│
├── services/
│   └── MakeApiCall.js         # Generic fetch wrapper (method, headers, cache, tags, signal)
│
├── helpers/
│   ├── apiUrls.js             # Centralized backend endpoint URLs
│   ├── constant.js            # Env-variable accessors
│   └── slug.js                # App route path constants
│
├── libs/                      # Static data (mega menu, footer links, social links)
├── utils/                     # Fonts (Poppins, Montserrat), API & error handlers
└── middleware.js              # Auth middleware for protected routes

Configured in jsconfig.json — import with the @/ prefix:

import Button from '@/components/Buttons/Button';
import { AuthContext } from '@/contexts/AuthContext';
import { PRODUCTS_API_URL } from '@/helpers/apiUrls';

• Node.js 18+
• Yarn or npm
• A running Shark Wave backend (the API endpoints used are defined in src/helpers/apiUrls.js)

Check your Node version:

node -v

yarn install
# or
npm install

Copy the sample file and fill in your backend URL:

cp .env.local.sample .env.local

.env.local:

SHARK_WAVE_API_DOMAIN="YOUR_BACKEND_BASE_URL"
NEXT_PUBLIC_SHARK_WAVE_API_DOMAIN="YOUR_BACKEND_BASE_URL"

The NEXT_PUBLIC_ variant is required for client-side calls; the server-only variant is used during SSR/RSC.

yarn dev
# or
npm run dev

Open http://localhost:3000 in your browser.

yarn build
yarn start

• Allowed image domains are configured in next.config.mjs — add new external image hosts there before using them with next/image.
• Tailwind theme lives in tailwind.config.js: extended color palette (blue-*, neutral-*, black-*, warning-*, error-*, success-*, info-*), custom shadows, and fadeIn animation.
• Protected routes are listed in the matcher of src/middleware.js. Add or remove entries there to control auth-gating.
• Site metadata (title, description, social handles) is centralized in src/app/siteMetaData.js.

Happy coding!