Shimmer Business Showcase Platform
This app is a sleek, multi-tenant product showcase platform for small businesses — each tenant gets its own branded website, grouped by business type, with dedicated pages and a personalized header experience.
- About the Project
- Core Features
- How It Works
- Tenant Structure
- Routes
- Tech Stack
- Project Structure
- Getting Started
- Customization
- Roadmap
- License
Shimmer Business Showcase Platform is a frontend platform designed to generate personalized product showcase websites for small businesses. Instead of building a separate site from scratch for every business, each business is defined as a tenant in a single configuration file and instantly get a branded, route-based website for it.
The app is built to feel like a real product, not just a demo. It includes a sticky header, tenant switcher, grouped tenants, dynamic pages, responsive cards, and a clean visual hierarchy that works well for portfolios and client presentations. It also includes a fully-functional admin panel for managing tenants without touching code.
- Multi-tenant architecture for multiple businesses in one app.
- Grouped tenants such as Food, Tech, and other categories.
- Personalized branding per tenant, including colors, logo text, and hero content.
- Sticky top header with a tenant switcher.
- Dedicated router pages per tenant:
- Home
- Products
- About
- Contact
- Dynamic URL support using React Router.
- Responsive product/service showcase cards.
- Clean, modern, portfolio-ready UI.
- Tenant Admin Management:
- View all businesses grouped by category.
- Edit existing tenants.
- Delete tenants.
- Live preview with real-time updates.
- Create New Tenant:
- Quick business setup with auto-ID generation
- Choose from predefined groups (Food, Tech, Health Care, etc.).
- Set brand colors and basic hero content.
- Edit Tenant Details:
- Live form editing for:
- Business name & logo.
- Brand colors (color picker).
- Group assignment.
- Hero heading & subheading.
- Changes persist in localStorage and update the live site instantly.
Each business is stored as a tenant object inside src/config/tenants.js.
A tenant includes its own brand colors, hero section, about text, products, contact details, and group name.
The app reads the active tenant from the URL, then renders the matching layout and pages for that business. The tenant switcher lets you jump between businesses, while the router handles each tenant’s internal pages like a standalone website.
This setup makes the app easy to scale because new businesses can be added by editing configuration instead of duplicating components.
Each tenant follows a structure like this:
"zella-bakery": {
id: "zella-bakery",
name: "Zella Bakery",
group: "Food",
logoText: "...",
brandColor: "#E27D60",
accentColor: "#85DCB0",
textColor: "#1F2933",
backgroundColor: "#FFF9F5",
hero: {
heading: "Freshly Baked, Every Morning",
subheading: "...",
ctaLabel: "View Today’s Specials",
imageUrl: "..."
},
about: {
title: "About Zella Bakery",
body: "..."
},
products: [...],
contact: {...},
social: {...}
}
The group field allows tenants to be organized into categories like:
- Food
- Tech
- Health Care
- Real Estate
- Transportation
- Fashion
- Beauty
Each tenant has its own route-based website structure:
/:tenantId→ Home page/:tenantId/products→ Products page/:tenantId/about→ About page/:tenantId/contact→ Contact page
/zella-bakery/zella-bakery/products/zee-digital/zee-digital/contact
This makes each tenant feel like a separate branded website while still sharing the same codebase.
While the route-based structure for the admin are:
/admin/tenants→ Tenant Management/admin/new-tenant→ Create New Tenant/admin/edit/:tenantId→ Edit Tenant Details
- React
- Vite
- React Router DOM
- Inline component-based styling
- JavaScript
- React Hook Form for validation and state management
- LocalStorage persistence (production-ready for demos)
- React Router → nested admin routes
- Real-time sync between admin and public site
- Responsive design → matching main app
Upgrades to be later added if possible:
- Tailwind CSS
- TypeScript
- Framer Motion
- Headless CMS
- Firebase or Supabase backend
- Admin dashboard for tenant management
- Swap localStorage for API calls:
localStorage.getItem() → fetch("/api/tenants")
localStorage.setItem() → fetch("/api/tenants", { method: "PUT" })
src ┣ assets ┃ ┣ backery.jpg ┃ ┣ consultation.jpg ┃ ┣ croissant.jpg ┃ ┣ customcake.jpg ┃ ┣ delivery1.jpg ┃ ┣ delivery2.jpg ┃ ┣ delivery3.jpg ┃ ┣ delivery4.jpg ┃ ┣ dreamHouse.jpg ┃ ┣ familyCare.jpg ┃ ┣ gardenHome.jpg ┃ ┣ healthScreen.jpg ┃ ┣ IMG.jpg ┃ ┣ mealPlan.jpg ┃ ┣ salesFunnel.jpg ┃ ┣ sourdough.jpg ┃ ┣ starterPackage.jpg ┃ ┣ studioCondo.jpg ┃ ┣ twoBedroom.jpg ┃ ┣ webBusiness.jpg ┃ ┗ webCare.jpg ┣ components ┃ ┣ AboutSection ┃ ┃ ┣ AboutSection.css ┃ ┃ ┗ AboutSection.jsx ┃ ┣ AdminLayout ┃ ┃ ┣ AdminLayout.css ┃ ┃ ┗ AdminLayout.jsx ┃ ┣ ContactSection ┃ ┃ ┣ ContactSection.css ┃ ┃ ┗ ContactSection.jsx ┃ ┣ Footer ┃ ┃ ┣ Footer.css ┃ ┃ ┗ Footer.jsx ┃ ┣ Header ┃ ┃ ┣ Header.css ┃ ┃ ┗ Header.jsx ┃ ┣ HeroSection ┃ ┃ ┣ HeroSection.css ┃ ┃ ┗ HeroSection.jsx ┃ ┣ ProductCard ┃ ┃ ┣ ProductCard.css ┃ ┃ ┗ ProductCard.jsx ┃ ┣ ProductGrid ┃ ┃ ┣ ProductGrid.css ┃ ┃ ┗ ProductGrid.jsx ┃ ┗ TenantSwitcher ┃ ┃ ┣ TenantSwitcher.css ┃ ┃ ┗ TenantSwitcher.jsx ┣ config ┃ ┗ tenants.js ┣ pages ┃ ┣ Admin ┃ ┃ ┣ AdminEditTenantPage.css ┃ ┃ ┣ AdminEditTenantPage.jsx ┃ ┃ ┣ AdminNewTenantPage.css ┃ ┃ ┣ AdminNewTenantPage.jsx ┃ ┃ ┣ AdminTenantsPage.css ┃ ┃ ┗ AdminTenantsPage.jsx ┃ ┗ Tenant ┃ ┃ ┣ TenantAboutPage.jsx ┃ ┃ ┣ TenantContactPage.jsx ┃ ┃ ┣ TenantHomePage.jsx ┃ ┃ ┗ TenantProductsPage.jsx ┣ App.css ┣ App.jsx ┣ index.css ┣ Layout.css ┣ Layout.jsx ┗ main.jsx
git clone https://github.com/Shimmerpeace/Showcase-Website.git
cd frontend
npm install
npm run dev
http://localhost:5173
You can navigate directly to a tenant route such as:
http://localhost:5173/zella-bakery
http://localhost:5173/zee-digital
You can navigate directly to the admin route such as:
http://localhost:5173/admin
---
Open src/config/tenants.js and add a new tenant object:
"green-garden": {
id: "green-garden",
name: "Green Garden",
group: "Food",
brandColor: "#22C55E",
accentColor: "#16A34A",
textColor: "#0F172A",
backgroundColor: "#F8FFF8",
hero: {
heading: "Fresh produce for healthy living",
subheading: "..."
},
about: {
title: "About Green Garden",
body: "..."
},
products: [],
contact: {},
social: {}
}
Update the tenantGroups object in tenants.js if you want custom ordering in the switcher:
export const tenantGroups = {
Food: "Food",
Tech: "Tech",
"Health Care": "Health Care",
"Real Estate": "Real Estate",
Transportation: "Transportation",
};
Each tenant can have its own:
- Colors
- Hero image
- Headline
- Product list
- Contact details
- Social links
- Allow tenants to upload their own logo and images.
- Add CMS integration for product and content management.
- Add search and filtering for products.
- Add animations and page transitions.
- Support custom domains for each business.
- Add authentication for business owners.
This project is more than a UI demo.
It shows that you can build scalable frontend systems with reusable components, route-based layouts, and data-driven design.
It demonstrates:
- Real-world multi-tenant thinking.
- Clean component architecture.
- Practical React Router usage.
- A polished user experience.
- Strong portfolio presentation.
This project is licensed under the MIT License. See the LICENSE file for details.
Built by Peace Efeh Ogbata Frontend developer focused on React, CSS and modern web experiences.