A comprehensive beauty clinic management system designed to streamline patient registration, appointment scheduling, and medical records management using Next.js 14, Spline 3D, and Framer Motion.

1. Features
2. Tech Stack
3. Quick Start
4. Architecture
5. Strengths & Improvement Areas
6. Component Highlights
7. Core Technologies
8. Acknowledgments
9. License
10. Screenmshots

• Patient Management: Comprehensive patient registration and profile management
• Appointment Scheduling: Intuitive booking system with calendar integration
• Medical Records: Secure document upload and management system
• Admin Dashboard: Complete administrative control panel for clinic management
• 3D Interactive UI: Engaging Spline-powered 3D elements for modern aesthetics
• Real-time Notifications: SMS integration via Twilio for appointment reminders
• Responsive Design: Mobile-first approach with elegant dark theme
• Error Monitoring: Integrated Sentry for production error tracking

Make sure you have the following installed:

Using npm is recommended, but yarn or pnpm will work too.

git clone https://github.com/your-username/auraaesthetics.git
cd auraaesthetics

npm install

Create a .env.local file in the root directory and add your environment variables:

# Appwrite Configuration
NEXT_PUBLIC_ENDPOINT=your_appwrite_endpoint
PROJECT_ID=your_project_id
API_KEY=your_api_key
DATABASE_ID=your_database_id
PATIENT_COLLECTION_ID=your_patient_collection_id
APPOINTMENT_COLLECTION_ID=your_appointment_collection_id
NEXT_PUBLIC_BUCKET_ID=your_bucket_id

# Twilio Configuration
TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token

# Sentry Configuration
SENTRY_DSN=your_sentry_dsn

npm run dev

Open http://localhost:3000 in your browser – the app will hot-reload on changes.

Frontend Framework & Runtime

• Next.js 14 with App Router, React 18, TypeScript

Styling & UI

• Tailwind CSS for styling, Framer Motion for animations, Radix UI for accessible components

3D & Graphics

• Spline Tool for 3D scene creation, React Spline integration for interactive elements

Backend & Database

• Appwrite for backend services, database management, and file storage

Communication & Notifications

• Twilio for SMS notifications, React Hook Form for form management

Monitoring & Error Tracking

• Sentry for error monitoring, custom error boundaries for graceful error handling

Component-Based Architecture: Modular, reusable UI components with strict TypeScript typing

Advanced Animation System: Framer Motion integration with Spline 3D elements

Responsive & Accessible Design: Mobile-first Tailwind CSS with Radix UI accessibility standards

Secure Data Management: Appwrite backend with proper authentication and authorization

Modern Development Workflow: ESLint, Prettier, and comprehensive testing suite

✅ Strengths

• Modern tech stack with Next.js 14 and TypeScript
• Comprehensive healthcare management features
• Rich 3D interactive user interface
• Robust error monitoring and testing infrastructure
• Mobile-responsive design with dark theme
• Secure backend integration with Appwrite

⚒️ Potential Improvements

• Implement advanced state management (Zustand/Redux)
• Add comprehensive unit and integration tests
• Enhance SEO optimization
• Implement PWA capabilities
• Add more comprehensive documentation
• Optimize bundle size and performance metrics

Hero Section

• Interactive 3D Spline background with Galaxy theme
• Responsive design with smooth animations
• Call-to-action elements for patient engagement

Patient Registration

• Multi-step form with validation using React Hook Form and Zod
• File upload capabilities for medical documents
• Phone number validation and formatting

Appointment Management

• Calendar-based scheduling system
• Real-time availability checking
• SMS confirmation via Twilio integration

Admin Dashboard

• Comprehensive patient and appointment management
• Statistical overview with StatCard components
• Data table with sorting and filtering capabilities

UI Components

• Custom form fields with consistent styling
• Status badges for appointment states
• Modal dialogs for various interactions
• Reusable submit buttons with loading states

Built with care for healthcare professionals and patients. ✨

Built with inspiration from:

• Adrian Hajdin's JavaScript Mastery community JavaScript Mastery
• The Next.js community for endless resources and best practices
• Radix UI team for accessible component primitives
• Appwrite community for backend-as-a-service solutions
• Open-source contributors who share their knowledge freely

MIT License - see LICENSE.md for details.