ClarityVue 📷✨

A modern, scalable photo portfolio platform built with cutting-edge web technologies. Designed for photographers and creators to showcase their work with enterprise-level reliability and performance.

Live Application

Demo Video

---

🎯 Project Overview

ClarityVue is a comprehensive photo portfolio platform that enables users to create, manage, and share professional photo albums. The application features secure user authentication, real-time image uploads, and public profile sharing capabilities. Built with scalability in mind, it provides a seamless experience for both creators and viewers.

Core Features

• Secure User Authentication: Complete authentication system with social sign-on and profile management
• Album Management: Intuitive dashboard for creating, organizing, and editing photo albums
• Image Upload: High-performance file uploads with automatic optimization and global distribution
• Public Profiles: Responsive public pages for showcasing curated photo collections
• Cloud Storage: Scalable image storage with high availability and global access

---

🛠️ Technology Stack

Category	Technology	Purpose
Framework		Server-side rendering, API routes, and optimized performance
Language		Type safety and reduced runtime errors
Runtime		Server-side execution environment
Database		Robust relational data storage with ACID compliance
Cloud DB		Serverless PostgreSQL with auto-scaling
ORM		Type-safe database queries and migrations
Authentication		User authentication, session management, and social login
Validation		Runtime validation to prevent security vulnerabilities
Storage

---

📊 Database Schema

Database Design

The application uses a well-structured relational database design with proper indexing and foreign key relationships.

Key Database Features

• Optimized Indexing: Strategic indexes for efficient query performance
• Foreign Key Constraints: Proper relationships with cascade delete
• UUID Primary Keys: Scalable and secure identifier system
• Timestamp Tracking: Automatic created_at and updated_at fields
• Data Integrity: ACID compliance with transaction support

---

🚀 Architecture Highlights

Scalability Features

• Horizontal Scaling: Stateless design supports unlimited server instances
• Auto-scaling: Cloud-native deployment with automatic resource allocation
• Global Distribution: Edge deployment ensures low-latency access worldwide
• Database Sharding: Ready for multi-tenant architecture expansion

Security Implementation

• JWT Authentication: Secure session management with automatic token refresh
• Row-level Security: Database-level access control for user data
• Input Validation: Comprehensive validation prevents injection attacks
• File Upload Security: Presigned URLs with expiration prevent unauthorized access
• Environment Security: Secure credential management and cross-origin protection

Performance Optimization

• Server-side Rendering: Optimized for search engines and initial load times
• Image Optimization: Automatic compression and format conversion
• Database Indexing: Strategic indexes for efficient query performance
• Caching Strategy: Intelligent cache invalidation and revalidation
• Global Content Delivery: Distributed content delivery for optimal user experience

---

🎓 Technical Achievements

Development Excellence

• Type Safety: Complete TypeScript coverage with strict mode enforcement
• Code Quality: Comprehensive linting and formatting standards
• Documentation: Detailed JSDoc comments and architectural documentation
• Testing: Unit tests for critical business logic and error handling

Production Readiness

• Error Handling: Comprehensive error boundaries and user-friendly messages
• Monitoring: Built-in performance analytics and error tracking
• Deployment: Automated deployment pipeline with zero-downtime updates
• Backup Strategy: Automated database backups and disaster recovery

Business Logic

• User Management: Complete user lifecycle from registration to profile management
• Content Management: Efficient album and image organization with drag-and-drop
• Public Sharing: Secure public profile generation with customizable URLs
• Data Integrity: Transaction-based operations ensure data consistency

---

📈 Performance Test

To validate the application's scalability and reliability, a load test was conducted simulating 500 concurrent users. The test focused on core user flows, such as viewing public profiles and fetching album images, to measure performance under heavy traffic.

500 Concurrent Users Load Test Summary

The results confirm that the architecture can handle significant user loads with low latency and a near-perfect success rate, ensuring a stable and responsive experience.

Metric	Result
Average Response Time	~200ms
Success Rate	100%
Total Requests	>20,000

Test Result Screenshot

🚀 Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn package manager
• Git for version control

Installation Steps

1. Clone the repository

   git clone https://github.com/aakash-kalmady/clarityvue-app.git
   cd clarityvue-app
   

2. Install dependencies

   npm install
   # or
   yarn install
   

3. Set up environment variables Create a .env.local file in the root directory:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/login
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/register
   NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=/dashboard
   NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/dashboard
   CLERK_WEBHOOK_SECRET=
   
   DATABASE_URL=
   
   AWS_ACCESS_KEY_ID=
   AWS_SECRET_ACCESS_KEY=
   
   AWS_REGION=
   S3_BUCKET_NAME=
   

4. Set up the database

   # Generate and run migrations
   npm run db:generate
   npm run db:migrate
   

5. Run the development server

   npm run dev
   # or
   yarn dev
   

6. Open your browser Navigate to http://localhost:3000 to view the application.

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run db:generate	Generate database migrations
npm run db:migrate	Run database migrations
npm run db:studio	Open Drizzle Studio

---

Built with enterprise-grade practices, focusing on scalability, security, and maintainability for production environments.