A responsive web demo of Artistly.com, a fictional platform to connect Event Planners and Artist Managers. Built with Next.js, Tailwind CSS, and ShadCN UI, this project showcases frontend architecture, UI rendering, and mock data handling.
- Next.js (v13+ with App Router)
- React (Functional Components)
- Tailwind CSS
- ShadCN/UI
- React Hook Form + Zod
- TypeScript
- pnpm
Prerequisite: Ensure
pnpmis installed. If not:
npm install -g pnpmpnpm install # Install dependencies
pnpm dev # Start the development server.
├── app/ # Next.js App directory (pages, routes)
├── components/ # UI components (Cards, Forms, Filters, etc.)
├── hooks/ # Custom React hooks
├── lib/ # Utilities and helper functions
├── public/ # Static assets
├── styles/ # Tailwind and global styles
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── next.config.mjs-
Homepage
- Hero section, artist categories, CTA buttons.
-
Artist Listing Page
- Responsive grid layout.
- Filterable by category, location, price range.
- Uses static JSON data.
-
Artist Onboarding Form
- Multi-section form (Name, Bio, Category, Language, Fee, Image, Location).
- Validated using
React Hook Form+Zod.
-
(Optional) Manager Dashboard
- Static table with artist data and actions.
Deployed on Vercel.
Run this to build and deploy:
pnpm build # For production build
pnpm start # Serve production build locally- Fully responsive and mobile-friendly
- Component reusability and modular structure
- Form validation and controlled inputs
- Filtering logic using mock JSON
- Clean code with TypeScript safety
- No real backend; uses static or mock data.
- Designed as a test assignment for a frontend role.