Skip to content

JoyDhar32/Solstice

BranchesTags

Repository files navigation

Solstice — E-commerce (Laravel + Inertia React)

Solstice is a modern, full-stack e-commerce app built on Laravel and Inertia.js (React) with Tailwind CSS + daisyUI. It ships with a clean, responsive storefront, product variations, department/category browsing, search, filters & sorting, cart and checkout scaffolding, and a polished auth experience.

solstice joydhar com_ (2)

✨ Features

Storefront

  • Hero section with mixed light/dark “flow” theme
  • Department rail (horizontal, draggable/scrollable, with images)
  • Latest & Featured products (5-up on XL, responsive down to mobile)
solstice joydhar com_d_computers-tablets

Catalog

  • Shop page (/shop) with:

    • Sort: latest, price ↑/↓, stock (qty) ↑/↓
    • Stock filter: in/out/all
    • Quantity range: min/max
    • Pagination (server-driven)

  • Department pages (/department/{slug}) share the same grid & filters (scoped to the department)

  • Dedicated Search page (/search?keyword=...)

solstice joydhar com_shop

Product

  • Variations (image/radio types), live price & stock resolution
  • Image carousel: auto-switches to option images when selected
  • Add to cart with option selections preserved in URL and cart item

Cart

  • Vendor-grouped cart UI (supports “Pay only this seller” and full checkout)
  • Quantity debounce updates, line totals, mini-cart dropdown

Media & Admin

  • Spatie Media Library for product & department images

    • Products: images collection with thumb/small/large conversions
    • Departments: single image collection (no conversions)

  • Filament resource for departments (with image upload field)

Auth

  • Styled Login, Register, Verify Email, Forgot/Reset Password, Confirm Password
  • Shared layout (AuthenticatedLayout) with consistent header/footer

🧰 Tech Stack

  • Backend: Laravel, Eloquent, Validation, Resources (Transformers)
  • Frontend: React (Inertia.js), Tailwind CSS, daisyUI, Heroicons
  • Admin & Media: Filament, Spatie Media Library
  • Build: Vite
  • DB: SQLite/MySQL/PostgreSQL (choose your own via .env)

📁 Project Structure (high-level)

app/
  Http/
    Controllers/
      ProductController.php
      ShopController.php
    Resources/
      ProductResource.php
      ProductListResource.php
      DepartmentResource.php
  Models/
    Product.php
    Department.php
resources/
  js/
    Components/
      App/
        Navbar.jsx
        Footer.jsx
        HeroCarousel.jsx
        DepartmentCarousel.jsx
        LatestProductItem.jsx
        FeaturedProductItem.jsx
        ProductItem.jsx
        CartItem.jsx
      Core/
        CurrencyFormatter.jsx
        Carousel.jsx
        PrimaryButton.jsx
    Layouts/
      AuthenticatedLayout.jsx
      GuestLayout.jsx
    Pages/
      Home.jsx
      Shop/Index.jsx
      Department/Index.jsx
      Product/Show.jsx
      Search/Index.jsx
      Auth/
        Login.jsx
        Register.jsx
        VerifyEmail.jsx
        ForgotPassword.jsx
        ResetPassword.jsx
        ConfirmPassword.jsx
  views/
    app.blade.php
public/
  storage/WebsiteImages/ (hero & banner assets)
database/
  seeders/DepartmentSeeder.php
tailwind.config.js

🚀 Getting Started

1) Prerequisites

  • PHP 8.2+, Composer
  • Node 18+, npm or pnpm or yarn
  • Database (SQLite/MySQL/etc)

2) Install & Configure

# Clone & install
composer install
cp .env.example .env
php artisan key:generate

# Configure DB in .env, e.g. for SQLite:
touch database/database.sqlite
# then set DB_CONNECTION=sqlite and clear other DB_* vars

# Migrate & seed
php artisan migrate --seed

# Storage symlink for media & public images
php artisan storage:link

# Frontend
npm install
# (ensure the following are present:)
#  tailwindcss daisyui @tailwindcss/forms @tailwindcss/typography
#  @inertiajs/react @heroicons/react

3) Run

npm run dev   # vite
php artisan serve

Open http://127.0.0.1:8000

🎨 UI & Theming

Tailwind + daisyUI custom theme (flow) is configured in tailwind.config.js. <html data-theme="flow"> in app.blade.php applies the theme.

Key colors:

  • Base background: base-100 → light surface (Slate 50/100 range)
  • Dark surfaces (header/footer): neutral (Slate 900) with neutral-content

You can tweak brand colors (primary, secondary, accent) and surface scales in the daisyui.themes section.

🔎 Routing Overview

  • Home: GET / → ProductController@home

    • Props: latest, featured, departments, products (paginated grid, optional)

  • Shop: GET /shop → ShopController@index

    • Query:

      • sort=latest|price_asc|price_desc|qty_asc|qty_desc
      • stock=all|in|out
      • qmin (int), qmax (int)

  • Department: GET /department/{department:slug} → ProductController@byDepartment

    • Same grid UI; optionally extend filters

  • Search: GET /search?keyword=... → Shows results in product grid

  • Product Show: GET /products/{product:slug}

  • Cart: GET /cart, POST /cart/{product}, PUT /cart/{product}, DELETE /cart/{product}, POST /cart/checkout

🗂 Data & Resources

Product Resource (list)

  • id, title, slug, price, quantity
  • image (first media small), department (name/slug), user (name)

Product Resource (detail)

  • images: product images or option-specific images
  • variationTypes: array of variation groups (type: image or radio)
  • variations: resolved combos with price & quantity

Department Resource

  • id, name, slug, meta fields
  • image_url (single image collection)
  • categories (if eager loaded)

🖼 Media (Spatie)

Products

  • Collection: images
  • Conversions: thumb (368×232), small (480w), large (1200w)

Departments

  • Collection: image (single) — no conversions

Make sure to run php artisan storage:link and upload images via Filament. If seeding department images, copy assets into storage/app/public/departments and attach in the seeder.

🧭 Filters & Sorting (Shop)

Controller (ShopController@index)

  • Validates query params

  • Applies stock & quantity range filters

  • Uses reorder() then applies sorting:

    • latest, price_asc, price_desc, qty_asc, qty_desc

  • Paginates with appends($request->query()) so page links keep filters

Client (Shop/Index.jsx)

  • Controlled form via useForm
  • Change handlers call get(route('shop.index'), { preserveState: false, replace: true }) (server is source of truth; client UI rehydrates from returned filters)

🔐 Auth Pages

  • Login, Register, Verify Email, Forgot Password, Reset Password, Confirm Password
  • Centered cards, consistent with main layout
  • Show/hide password toggles on password fields

🛒 Cart & Checkout

  • Cart grouped per vendor (UI section per seller)
  • Quantity updates are debounced (400ms)
  • Per-seller checkout button + full cart checkout button
  • Totals update via Inertia partial reloads (only: [...] props)

🧪 Testing (suggested)

  • Feature tests for filters/sort combinations:

    • Stock in/out, qmin/qmax boundaries
    • Sorting stability (price/qty)

  • Resource tests for Product & Department transforms

  • Browser tests (Dusk/Playwright) for UI flows:

    • Add to cart, change variations, update qty
    • Search & pagination

📦 Deployment Notes

  • Build assets: npm run build

  • Set APP_URL, APP_ENV=production, APP_KEY properly

  • Queue/mail config for auth emails (verification, reset)

  • Ensure php artisan storage:link and correct file permissions

  • Cache optimizations:

    php artisan config:cache
php artisan route:cache
php artisan view:cache

🛠 Troubleshooting

  • Tailwind plugin missing Error: Cannot find module '@tailwindcss/forms' Fix: npm i -D @tailwindcss/forms @tailwindcss/typography and keep them in tailwind.config.js > plugins.

  • Font import path Error: ENOENT for @fontsource/... Fix: Install the font or remove the import; use system fonts or Figtree via CDN or local CSS.

  • Theme not applying (too dark/too light) Fix: Set <html data-theme="flow"> and verify your daisyui.themes definition matches desired surfaces (base-100/200/300, neutral).

  • Inertia sorting shows stale results Fix: Use preserveState: false and send back canonical filters from the server; bind select value to those props (not stale URL state).

  • Carousel anchors stop working after click Fix: Avoid pointer-capture/drag on anchor children or prefer a programmatic slider without hash navigation.

🧭 Roadmap

  • Price range (min/max) UI control on shop/department pages
  • Category sidebar filters + color/attributes
  • Product compare & wishlist storage
  • Checkout flow (shipping, payments integration)
  • Vendor storefront pages
  • Reviews & ratings

🤝 Contributing

PRs welcome! Please:

  1. Follow existing patterns (Resources, Controllers, Inertia pages)
  2. Keep styling consistent (Tailwind/daisyUI, theme tokens)
  3. Add tests for significant changes

📄 License

MIT — use it, modify it, ship it.

About

Solstice — A modern e-commerce starter built with Laravel + Inertia (React) and Tailwind + daisyUI featuring a responsive storefront, product filters/sorting, departments/categories, variations, search, cart/checkout scaffolding, Filament admin, and Spatie Media Library.

solstice.joydhar.com

Topics

reactjs laravel-framework strapi mysqli stripe-payments multipurpose tailwindcss inertiajs filamentphp daisy-ui

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages