Logo
Ruby React Navigation
Overview
Features
Prerequisites
Installation
Build & Deployment
Project Structure
Home Page Variants
Technology Stack
API Structure
Performance
Security & SEO
License

Ruby React

A modern, responsive e-commerce platform built with Next.js 15, React 19, TypeScript, and Tailwind CSS.

Next.js 15
React 19
TypeScript
Tailwind CSS
Redux Toolkit
React Query
Framer Motion
Visit Theme

Features

  • Multiple Home Page Layouts: 8 different home page designs for various industries (Fashion, Electronics, Beauty, Books, Furniture, Sports, etc.)
  • Product Management: Complete product catalog with categories, collections, and specifications
  • Shopping Cart: Full cart functionality with quantity management and checkout
  • User Authentication: Login, register, forgot password, and reset password
  • Responsive Design: Mobile-first approach with Tailwind CSS
  • Dark Mode Support: Built-in dark/light theme switching
  • API Integration: RESTful API with React Query for data fetching
  • State Management: Redux Toolkit with persistence
  • Animations: Framer Motion for smooth animations
  • Type Safety: Full TypeScript implementation
  • Blog System: Complete blog functionality with multiple layouts
  • Wishlist: Add/remove products from wishlist
  • Search: Advanced product search functionality

Prerequisites

Install Node.js 18.0+ and a package manager: npm, yarn, pnpm or bun.

Installation

Step 1: Clone the repository

git clone <repository-url>
cd ruby-react

Step 2: Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Step 3: Start the development server

Navigate to http://localhost:3000

npm run dev

Build & Deployment

Development build

npm run dev

Production build

npm run build
npm start

Linting

npm run lint

Project Structure

ruby-react/
├── app/
│   ├── (auth)/
│   ├── api/
│   ├── blog/
│   ├── cart/
│   ├── checkout/
│   ├── home/
│   ├── pages/
│   ├── products/
│   ├── shop/
│   ├── wishlist/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── account/
│   ├── blog/
│   ├── cards/
│   ├── cart/
│   ├── checkout/
│   ├── filter/
│   ├── footer/
│   ├── header/
│   ├── product/
│   ├── skeleton/
│   └── ui/
├── constants/
├── data/
├── hooks/
├── lib/
├── service/
├── store/
├── types/
├── utils/
├── views/
├── next.config.ts
├── package.json
├── tsconfig.json
└── README.md

Home Page Variants

Main Home Page

Route: / — Hero banner, featured brands, flash sales, new arrivals, top categories, testimonials.

Beauty & Skincare Home

Route: /home/beauty-skin-care — Beauty banner, shop by type, today's top picks, unbeatable beauty, client success stories.

Book Store Home

Route: /home/book-store — Book store banner, book deals, shop categories, new releases, recommended books.

Electronics Home

Route: /home/electronic — Electronics banner, top categories, trending products, brands, today's picks.

Furniture Home

Route: /home/furniture — Furniture banner, best selling furniture, explore collection, happy customers.

Men's Fashion Home

Route: /home/men-fashion — Men's fashion banner, categories, new collection, coming soon products.

Sports Accessories Home

Route: /home/sport-accessory — Sports banner, latest sneakers, apparel section, top picks, testimonials.

Trending Fashion Home

Route: /home/trending-fashion — Trending fashion banner, categories, new arrivals, deal of the day.

Women's Fashion Home

Route: /home/women-fashion — Women's fashion banner, best selling, top picks, top brands, testimonials.

Technology Stack

Frontend Framework

  • Next.js 15 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS 4

State Management

  • Redux Toolkit
  • React Query (TanStack Query)
  • Redux Persist

UI Components & Libraries

  • HeroUI (React UI)
  • Heroicons
  • React Icons
  • Swiper

Animation & Forms

  • Framer Motion
  • React Hot Toast
  • Axios

Development Tools

  • ESLint
  • Turbopack (Next.js 15)
  • TypeScript (Strict Mode)

Utilities

  • use-debounce
  • tailwind-merge
  • @tailwindcss/forms

API Structure

Key endpoints

/api/category/...
/api/collection/...
/api/electronics/...
/api/post/...
/api/product/...
/api/sport/...
/api/top-categories/...
/api/wishlist/...

Typical data flow: Next.js API routes handle server-side logic → Service layer functions for API calls with error handling → React Query for client-side data fetching, caching, and synchronization → UI components consume data with loading and error states.

Performance

  • Next.js Optimization: Automatic code splitting, image optimization, and static generation
  • React Query: Efficient data fetching with caching, background updates, and optimistic updates
  • Lazy Loading: Component and image lazy loading for better performance
  • Bundle Optimization: Tree shaking, minification, and compression
  • Turbopack: Fast development builds with incremental compilation
  • Redux Persist: State persistence for cart and user preferences

Security & SEO

  • Type Safety: Full TypeScript implementation with strict type checking
  • Input Validation: Form validation with comprehensive error handling
  • Error Handling: Comprehensive error handling with user-friendly messages
  • API Security: Secure API endpoints with proper error responses
  • SEO Optimized: Meta tags, structured data, and semantic HTML
  • Accessibility: ARIA labels, keyboard navigation, and screen reader support
  • Performance: Core Web Vitals optimization with Next.js features
  • Semantic HTML: Proper HTML structure with meaningful elements

License

This project is licensed under the MIT License.

Ruby React Documentation | Fold