A design platform where artists display their masterpieces and buyers discover and purchase works that resonate with them.
Ortist is a full-featured creative marketplace UI built with Next.js 16, React 19, TypeScript, and Tailwind CSS v4. It features a Pinterest/Instagram-style feed, artist analytics dashboard, real-time-style messaging, and a polished dark/light theme system — all fully responsive across mobile and desktop.
- Landing page — Animated card fan hero, floating glassmorphism navbar, entrance animations
- Feed — Masonry grid with infinite scroll, stories row, like/comment interactions
- Dashboard — Analytics with engagement chart, traffic sources, category bubbles, recent commissions
- Messages — WhatsApp-style responsive chat: conversation list on mobile navigates to full-screen chat view
- Upload — Artwork upload flow with preview
- Onboarding — Interest selection for new users
- Dark / Light theme — Full CSS variable token system, toggled from the sidebar, persisted to localStorage
- Responsive layout — Sidebar on desktop, glassmorphism bottom nav on mobile
| Layer | Technology |
|---|---|
| Framework | Next.js 16.2 (App Router) |
| UI Library | React 19 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v4 |
| Icons | Lucide React |
src/
├── app/
│ ├── page.tsx # Landing page
│ ├── feed/page.tsx # Main feed
│ ├── dashboard/page.tsx # Artist analytics
│ ├── messages/page.tsx # Messaging
│ ├── upload/page.tsx # Artwork upload
│ ├── onboarding/page.tsx # New user onboarding
│ ├── layout.tsx # Root layout with ThemeProvider
│ └── globals.css # CSS custom properties + animations
│
├── components/
│ ├── layout/
│ │ ├── Sidebar.tsx # Desktop nav with theme toggle
│ │ ├── BottomNav.tsx # Mobile glassmorphism bottom nav
│ │ ├── MainHeader.tsx # Top search/header bar
│ │ └── Navbar.tsx
│ ├── feed/
│ │ ├── MasonryGrid.tsx # Infinite-scroll masonry layout
│ │ ├── FeedCard.tsx # Post card with like/comment
│ │ ├── StoriesRow.tsx # Horizontal stories strip
│ │ └── StoryCircle.tsx # Individual story avatar
│ ├── dashboard/
│ │ ├── StatCard.tsx
│ │ ├── EngagementChart.tsx
│ │ ├── TrafficSources.tsx
│ │ ├── CategoryBubbles.tsx
│ │ ├── RecentCommissions.tsx
│ │ └── SparkLine.tsx
│ ├── upload/
│ │ └── UploadFlow.tsx
│ ├── search/
│ │ ├── SearchOverlay.tsx
│ │ └── CategoryChip.tsx
│ ├── onboarding/
│ │ └── InterestCard.tsx
│ └── ui/
│ └── Avatar.tsx # Generated gradient avatar
│
├── contexts/
│ └── ThemeContext.tsx # Dark/light theme state + toggle
│
└── lib/
├── mockData.ts # Seed data for posts, designers
└── types.ts # Shared TypeScript types
Prerequisites: Node.js 18+
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000.
# Build for production
npm run build
# Start production server
npm startAll theme-sensitive colors are CSS custom properties defined in globals.css. The dark theme is the default (:root); light mode is activated by adding the light class to <html>.
| Token | Dark | Light |
|---|---|---|
--bg |
#151515 |
#EEE9FB |
--bg-card |
rgba(255,255,255,0.04) |
rgba(54,30,123,0.05) |
--text-1 |
#ffffff |
#0f0f0f |
--border |
rgba(255,255,255,0.07) |
rgba(0,0,0,0.09) |
--shadow |
rgba(0,0,0,0.25) |
rgba(54,30,123,0.12) |
Accent colors (same in both themes):
- Deep purple:
#361E7B - Purple glow:
#7C5BF5 - Pink:
#FF7EA0
const GLASS: React.CSSProperties = {
background: "var(--bg-card)",
backdropFilter: "blur(20px)",
border: "1px solid var(--border-card)",
boxShadow: "0 4px 24px var(--shadow)",
};- Desktop (lg+): Fixed sidebar (
w-56), content offset withlg:ml-56 - Mobile: Sidebar hidden, glassmorphism bottom nav with Feed / Messages / +Create / Dashboard
- All pages use
pb-24 lg:pb-7to clear the mobile bottom nav
Animated hero with a 6-card artwork fan, entrance word animations, and parallax mouse tilt on desktop. The card fan scales down and renders below the headline on mobile.
Masonry grid using CSS columns. Infinite scroll via IntersectionObserver loads 8 posts per batch. Stories row at the top with gradient avatar rings.
Stat cards with sparklines, SVG engagement line chart (Views / Likes / Sales tabs), traffic source progress bars, category bubble chart, and a paginated commissions table.
Responsive two-panel layout. On mobile, tapping a conversation navigates to a full-screen chat view with a back arrow to return to the list. On desktop, both panels are visible side by side.
Drag-and-drop artwork upload flow with file preview.
Interest selection cards to personalise the feed for new users.
The theme is managed by ThemeContext. The toggle button lives in the sidebar between the nav links and the logout button.
import { useTheme } from "@/contexts/ThemeContext";
const { theme, toggle } = useTheme();
// theme: "dark" | "light"
// toggle(): flips theme, persists to localStorage