profile-pic
RashidVisda

Clothora

Tech Stack:
TailwindCSS
React
Next.js
Zustand
Node.js
Git
Npm
Source CodeLive Demo
clothora-img

Clothora

version next

Clothora is a minimal, modern clothing storefront built with Next.js, TypeScript and Tailwind CSS. It demonstrates a clean UI, smooth animations, and simple state management suitable for small e-commerce prototypes and design-focused storefronts.

Live demo: https://clothora-amber.vercel.app/

Why this project is useful

  • Design-focused starter: Minimal UI and responsive layouts for quick prototyping.
  • Modern stack: Next.js 15, React 19, TypeScript 5 and Tailwind CSS 4.
  • Small but complete: Product lists, carousel, cart flows and toast notifications.
  • Easy state: Global state handled with zustand for a tiny, easy-to-follow store.

Key features

  • Product listing and collections (under app/collections)
  • Product detail pages and nested routing (dynamic routes in app/collections/[slug]/[productId])
  • Responsive carousel using keen-slider
  • Loading skeletons with react-loading-skeleton
  • Toast notifications with sonner
  • Lightweight global state using zustand

Tech stack

  • Next.js 15 (App Router)
  • React 19
  • TypeScript 5
  • Tailwind CSS 4
  • Zustand for state management
  • Keen Slider, Lucide React, Sonner, html-to-image

Getting started

Prerequisites

  • Node.js 18+ (tested with Node 18/20)
  • npm or yarn

Clone and run

git clone <your-repo-url> clothora
cd clothora
npm install
# or: yarn

Development

npm run dev
# Open http://localhost:3000

Build and production

npm run build
npm start

Lint

npm run lint

Notes

  • The project uses Turbopack flags for dev and build (--turbopack). Remove these flags if you prefer the standard Next.js bundler or run into compatibility issues.
  • If you use a Node version manager, ensure your active Node version matches the prerequisites.

Project structure (overview)

  • app/ — Next.js App Router pages and route groups (primary app code)
  • components/ — Shared React components (carousel, product list, UI primitives)
  • section/ — Page sections (home/hero/featured)
  • lib/ — Utilities and animation helpers
  • store/ — zustand stores (useCartStore.ts, useProductsStore.ts)
  • public/ — Static assets and sample data

Explore the app/ directory to see how routes are organized and how components are composed.

Usage examples

Import a component in a page (TypeScript / Next.js App Router example):

import ProductList from "@/components/ProductList";

export default function Page() {
  return <ProductList />;
}

Programmatic cart update using the useCartStore (simplified):

import useCartStore from "@/store/useCartStore";

const add = useCartStore((s) => s.addProduct);
add({ id: "sku-123", name: "T-Shirt", price: 29.99 });

Where to get help

  • If this repo includes an active maintainer, open an issue.
  • For questions about the codebase, contact the repository owner or the original author: rashidvisda@gmail.com.

Contributing

See CONTRIBUTING.md for brief contribution pointers and a minimal workflow.

Please keep contributions focused and small: design improvements, accessibility, test coverage, or bug fixes are all welcome.

Maintainers

  • Original author / contact: rashidvisda@gmail.com

If you would like to become a contributor, open an issue or submit a PR and reference the changes you'd like to make.

Acknowledgements

  • Built as a small demo and design prototype inspired by modern e-commerce patterns.

Generated and updated by project maintainer tooling.