العودة إلى المشاريع
LinkSharing
LinkSharing تطبيق روابط شخصية بـ Next.js مع PostgreSQL، من تحديات Frontend Mentor بمستوى Guru، مع سحب وإفلات ومعاينة حية للجوال.
- السنة
- 2024
- النوع
- تطبيق ويب
- الحالة
- مؤرشف
مشروع أقدم محفوظ كدراسة حالة.
دراسة الحالة الكاملة متوفرة بالإنجليزية.
A professional link-sharing platform that allows users to create personalized link-in-bio pages. Built as a **Guru-level Frontend Mentor challenge**, this application demonstrates modern full-stack development practices with Next.js 14, TypeScript, and PostgreSQL.
📊 Project Impact:
🛠️ Key Features:
🔧 Technical Highlights:
📊 Project Impact:
- 🏆 Challenge Level: Successfully completed Frontend Mentor's highest difficulty Guru-level challenge
- 🔗 Link Management: Comprehensive platform for creating and sharing professional link collections
- 📱 Real-time Preview: Live mobile mockup updates for instant visual feedback
- 🎨 User Experience: Intuitive drag-and-drop interface with platform-specific link validation
🛠️ Key Features:
- 🔐 Secure authentication with NextAuth.js and JWT-based session management
- 🔗 Support for 8+ platforms: GitHub, LinkedIn, Facebook, Twitter, Instagram, YouTube, Website, Custom
- 🎯 Drag & drop link reordering with SortableJS integration
- 📸 Avatar upload functionality with Vercel Blob cloud storage
- 📱 Real-time mobile preview with responsive design
- ✅ Advanced form validation with Yup schemas and platform-specific URL patterns
- 🔄 Full CRUD operations for link and profile management
- 📊 Database optimization with proper indexing and connection pooling
- 🎨 Interactive UI elements with hover states and toast notifications
- 🚀 One-click profile sharing functionality
🔧 Technical Highlights:
- Built with Next.js 14 App Router and Server Components for optimal performance
- Implemented 100% TypeScript with zero 'any' types for enterprise-level type safety
- Designed PostgreSQL database schema with Prisma ORM for type-safe operations
- Created server actions for seamless client-server data mutations
- Integrated Vercel Blob for secure cloud file storage and avatar management
- Implemented server-side route protection and authentication
- Added comprehensive error handling and loading states throughout the application
- Configured ESLint and TypeScript for code quality and consistency
دوري
Full-Stack Developer
Architected and developed the complete link-sharing platform from design to deployment:
Architected and developed the complete link-sharing platform from design to deployment:
- 🏗️ Architecture: Designed scalable Next.js 14 application with App Router and Server Components
- 🗄️ Database: Built PostgreSQL database schema with Prisma ORM and proper indexing
- 🎨 Frontend: Developed responsive UI with Tailwind CSS and interactive components
- 🔐 Authentication: Implemented secure NextAuth.js with JWT strategy and password hashing
- ☁️ Cloud Integration: Configured Vercel Blob for avatar upload and file management
- 🎯 UX Features: Built drag-and-drop interface with SortableJS and real-time preview
- 📝 Form Handling: Created advanced form validation with Formik and Yup schemas
- 🚀 Deployment: Set up production deployment with database migrations and seeding
- Next.js 14
- TypeScript
- React 18
- PostgreSQL
- Prisma ORM
- NextAuth.js
- Tailwind CSS
- Vercel Blob
- Formik
- Yup
- SortableJS
- React Sortable
- Lucide React
- React Icons
- React Hot Toast
- bcryptjs
- JWT