mp# Pitch Lab

A modern multi-tenant slider assessment application built with Next.js 14 and Sanity CMS. Users can create slider-based assessments with custom criteria and preferences.

• 🎯 Multi-Tenant Assessments: Create multiple slider-based assessments
• 📊 Slider Preferences: Drag sliders to indicate preferences between two options
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices
• 🎨 Modern UI: Built with Tailwind CSS and Radix UI components
• 🔄 Reset Functionality: Reset all sliders to neutral position
• 📊 Data Collection: Track user preferences and responses
• 🔗 URL Sharing: Each assessment has a unique shareable URL
• 📝 Optional Feedback: Users can provide their name with submissions

• Frontend: Next.js 14 with App Router
• Styling: Tailwind CSS
• UI Components: Radix UI + shadcn/ui
• CMS: Sanity Studio
• Language: TypeScript
• Icons: Lucide React

• Node.js 18+
• npm or yarn
• Sanity account

git clone <your-repo-url>
cd pitch-lab
npm install

1. Create a Sanity account

2. Create a new project

3. The schema is configured in sanity/schemaTypes/sliderInstance.ts with:

   • title (string, required) - Assessment name
   • slug (string, required) - URL identifier
   • description (text, optional) - Assessment description
   • sliderPairs (array) - Slider criteria with:
     • title (string, required) - Criteria name
     • leftSide (string, required) - Left option label
     • rightSide (string, required) - Right option label
   • isActive (boolean) - Assessment availability
   • createdBy (string) - CMS user who created the assessment

4. Add slider pairs to your Sanity project

Create a .env.local file in the root directory:

# Sanity Configuration
NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id_here
NEXT_PUBLIC_SANITY_DATASET=production

# Next.js Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

npm run dev

Open http://localhost:3000 to view the app.

├── app/                           # Next.js App Router
│   ├── admin/                    # Admin pages for assessment management
│   ├── sliders/                  # Slider assessment pages
│   ├── studio/                   # Sanity Studio interface
│   ├── api/                      # API routes
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Home page with assessment gallery
├── components/                   # React components
│   ├── ui/                      # shadcn/ui components
│   ├── SliderAssessment.tsx     # Main assessment component
│   ├── SliderCard.tsx           # Individual slider component
│   ├── SubmissionForm.tsx       # Form submission component
│   └── Navigation.tsx           # Navigation component
├── lib/                         # Utility functions
│   └── sanity.ts                # CMS integration
├── sanity/                      # Sanity configuration
│   ├── schemaTypes/             # Content schemas
│   └── studio/                  # Sanity Studio setup
└── public/                      # Static assets

1. Navigate to /admin to manage assessments
2. Click "Sanity Studio" to create new assessments
3. Add slider pairs with left and right options
4. Set assessment title and description
5. Publish the assessment

1. Browse assessments on the home page
2. Click "Start Sliding" on any assessment
3. View slider criteria with left and right options
4. Drag sliders to indicate preferences
5. Use reset controls as needed
6. Submit assessment when complete

1. Navigate to /admin to view all assessments
2. See assessment details: title, description, pair count, status
3. Access Sanity Studio for content management
4. View and edit assessment configurations

• Each assessment is independent
• Unique URLs: /sliders/{slug}
• Separate slider criteria and preferences per assessment

• Draggable sliders for preference indication
• Smooth animations and visual feedback
• Real-time value updates
• Neutral position (50%) as default

• Track user preferences and responses
• Optional name collection
• Session data stored in Sanity CMS
• Analytics and reporting capabilities

• Clean, modern interface
• Responsive design for all devices
• Smooth animations and transitions
• Accessible form controls

1. Create slider pairs in Sanity Studio
2. Set left and right option labels
3. Configure assessment title and description
4. Set display order for proper sequencing

The app uses Tailwind CSS with a custom design system. Modify app/globals.css to change colors and styling.

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

The app can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

This project is licensed under the MIT License.

For support, please open an issue in the GitHub repository or contact the development team.