A modern, full-stack web application for DopeCuts barbershop, built with Next.js, TypeScript, and Tailwind CSS.
DopeCuts is a comprehensive barbershop management system featuring online booking, customer management, admin dashboard, and e-commerce capabilities. The platform is designed to be modern, elegant, and mobile-responsive.
- Online Booking System: Book, confirm, reschedule, and cancel appointments
- Service Selection: Choose from various barbershop services with pricing
- Customer Portal: Track appointment history and manage bookings
- Product Store: Browse and purchase hair care products
- Gallery: View portfolio of previous work
- Contact System: Multiple ways to get in touch
- Dashboard: Comprehensive overview of business metrics
- Appointment Management: Full control over scheduling and bookings
- Customer Relationship Management (CRM): Track customer data and analytics
- SMS Messaging: Send bulk and individual messages to customers
- Analytics: Business performance tracking and reporting
- Settings: Configure business hours, pricing, and booking rules
- Booking Rules: 2-month advance booking limit
- Cancellation Policy: 24-hour cancellation requirement
- Payment Options: Pay now or pay at appointment
- Repeat Customer Handling: Special rules for frequent cancellations
- Time Slot Management: Admin can block/unblock specific times
- Font: Roboto Mono (Google Fonts)
- Weights: 100-700 (regular and italic)
--color-black-50: #f6f6f6; /* Lightest */
--color-black-100: #e7e7e7;
--color-black-200: #d1d1d1;
--color-black-300: #b0b0b0;
--color-black-400: #888888;
--color-black-500: #6d6d6d; /* Mid-tone */
--color-black-600: #5d5d5d;
--color-black-700: #4f4f4f;
--color-black-800: #454545;
--color-black-900: #3d3d3d;
--color-black-950: #000000; /* Darkest */- Mobile-First: Responsive design optimized for all devices
- Minimalist: Clean, professional aesthetic
- Apple-level Polish: Attention to detail in animations and interactions
- Accessibility: High contrast ratios and readable typography
- Framework: Next.js 13+ (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Animations: CSS transitions and transforms
- Database: MongoDB (for customer data and CRM)
- SMS: Twilio (for messaging functionality)
- Payments: Stripe (for online payments)
- Analytics: Google Analytics
- Calendar: Google Calendar integration
dopecuts/
├── app/ # Next.js App Router pages
│ ├── about/ # About page
│ ├── admin/ # Admin dashboard
│ ├── book/ # Booking system
│ ├── contact/ # Contact page
│ ├── gallery/ # Portfolio gallery
│ ├── products/ # Product store
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Homepage
├── components/ # Reusable components
│ ├── ui/ # shadcn/ui components
│ ├── About.tsx # About section
│ ├── BookingCTA.tsx # Booking call-to-action
│ ├── Footer.tsx # Site footer
│ ├── Hero.tsx # Homepage hero
│ ├── Navigation.tsx # Main navigation
│ └── Services.tsx # Services section
├── lib/ # Utilities and configuration
└── README.md # Project documentation
- Node.js 18+
- npm or yarn package manager
-
Clone the repository
git clone [https://github.com/Callmecgrey/dopecuts.git] cd dopecuts -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser Navigate to
http://localhost:3000
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Hero section with compelling messaging
- Services overview
- About section preview
- Call-to-action for booking
- Company story and mission
- Team member profiles
- Business values and philosophy
- Multi-step booking process
- Service selection with pricing
- Date and time picker
- Customer information form
- Payment options
- Booking confirmation
- Business metrics overview
- Appointment management
- Customer database (CRM)
- Analytics and reporting
- SMS messaging system
- Business settings
- Portfolio of haircuts and styling
- Category filtering
- High-quality before/after images
- Hair care product catalog
- Detailed product information
- Shopping cart functionality
- Professional recommendations
- Contact form
- Business information
- Location map
- Operating hours
Create a .env.local file for environment-specific settings:
# Database
MONGODB_URI=your_mongodb_connection_string
# SMS Service
TWILIO_ACCOUNT_SID=your_twilio_sid
TWILIO_AUTH_TOKEN=your_twilio_token
TWILIO_PHONE_NUMBER=your_twilio_phone
# Payment Processing
STRIPE_PUBLIC_KEY=your_stripe_public_key
STRIPE_SECRET_KEY=your_stripe_secret_key
# Analytics
GOOGLE_ANALYTICS_ID=your_ga_id
# Email Service
EMAIL_HOST=your_email_host
EMAIL_USER=your_email_user
EMAIL_PASS=your_email_passwordAdmin can configure:
- Business hours
- Service pricing
- Booking advance limit (default: 60 days)
- Cancellation deadline (default: 24 hours)
- SMS templates
- Blocked time slots
npm run build- Vercel: Optimized for Next.js (recommended)
- Netlify: Static deployment with serverless functions
- AWS: Full control with S3 + CloudFront
- Digital Ocean: App Platform deployment
- Image optimization with Next.js Image component
- Font preloading for faster text rendering
- CSS optimization with Tailwind CSS
- Code splitting and lazy loading
- Static generation where applicable
- Google Analytics: Track user behavior and conversions
- Customer Analytics: Booking patterns and preferences
- Business Metrics: Revenue tracking and appointment analytics
- Performance Monitoring: Page load times and user experience
- Input Validation: All forms validated on client and server
- Rate Limiting: Prevent spam and abuse
- Data Encryption: Sensitive customer data protection
- Secure Payments: PCI-compliant payment processing
- Access Control: Role-based admin permissions
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is proprietary software for DopeCuts barbershop.