Vizify is a modern web application built with Next.js that allows users to create, customize, and share interactive 3D digital business cards. Leveraging cutting-edge technologies like Three.js for 3D rendering and Framer Motion for smooth animations, Vizify helps professionals stand out with stunning digital business cards that showcase their personal brand.
⚠️ Note: Registration is required for creating and managing your own digital business cards.
- 🌟 Vizify - Interactive 3D Digital Business Card Platform
Vizify revolutionizes how professionals share their contact information by providing an immersive and interactive digital business card experience. Users can:
- Create personalized business cards with custom colors and templates
- Share cards via QR codes or direct links
- Manage multiple cards through a streamlined dashboard
- Showcase their professional identity with animated 3D cards
Built with a focus on user experience and visual appeal, Vizify combines cutting-edge web technologies to deliver a seamless and memorable digital presence solution.
- 🌈 Interactive 3D Business Cards: Stunning animated cards with realistic 3D effects powered by Three.js
- 🎨 Multiple Design Templates: Choose from modern, classic, and minimalist templates to match your style
- 🎭 Custom Color Schemes: Personalize your card with premium color options that reflect your brand
- 📱 Responsive Design: Perfect viewing experience across all devices - desktop, tablet, and mobile
- 📊 User Dashboard: Comprehensive dashboard to create, edit, and manage all your digital cards
- 🔄 Real-time Preview: See your changes instantly as you customize your business card
- 📤 One-click Sharing: Share your digital presence through multiple channels with ease
- 🔒 Secure Authentication: Protected user accounts with NextAuth.js and secure data storage
- 📱 QR Code Generation: Easily share your digital card in person with auto-generated QR codes
- 🖼️ Download as Image: Save your card for use in email signatures or other digital platforms
- 🔍 SEO-Optimized Public Pages: Card sharing pages designed for maximum discoverability
Welcome page showcasing interactive 3D business card examples and main features
User dashboard for managing multiple digital business cards
Interactive business card creator with customization options and live 3D preview
Responsive design optimized for mobile devices
- Next.js: React framework with server-side rendering and static site generation
- TypeScript: Type safety and improved developer experience
- TailwindCSS: Utility-first CSS framework for rapid UI development
- Framer Motion: Advanced animations and transitions
- Shadcn UI: Beautifully designed accessible UI components
- Lucide Icons: Beautiful and consistent icon set
- Next.js API Routes: Serverless API endpoints
- Prisma ORM: Type-safe database access and migrations
- MySQL: Robust relational database for data storage
- NextAuth.js: Flexible authentication solution with built-in providers
- JWT: Secure token-based authentication
- Three.js: JavaScript 3D library for rendering interactive 3D graphics
- React Three Fiber: React renderer for Three.js
- @react-three/drei: Helper components for React Three Fiber
- Vercel: Platform optimized for Next.js applications with CI/CD
Vizify follows a modern Next.js architecture that separates concerns while keeping related code together for better maintainability:
- Pages & API Routes: Next.js pages for the frontend with API routes handling backend logic
- React Components: Modular UI components organized by functionality
- 3D Rendering Engine: Custom Three.js implementation for interactive card previews
- Database Layer: Type-safe database access through Prisma ORM
- Authentication System: Secure user authentication with NextAuth.js
- Shared Types & Utilities: Common types and helper functions
The application uses a hybrid approach with both server-side rendering and client-side interactivity for optimal performance and SEO.
-
3D Rendering Strategy: For performance optimization, we implement different rendering approaches:
- Full 3D WebGL rendering for interactive card previews
- CSS 3D transforms for lighter card representations in listings
- Server-side generated previews for sharing images
-
Modular Components: UI components are built with composition in mind, following atomic design principles to maximize reusability.
-
Design System: A consistent design language using TailwindCSS with custom theme variables ensures visual coherence throughout the application.
-
Performance Optimization: Dynamic imports, code splitting, and optimized assets keep the application fast and responsive even with complex 3D elements.
Vizify is built with a mobile-first approach, ensuring a great user experience across all devices:
- Adaptive Layouts: Flexbox and CSS Grid for responsive content organization
- Touch-Optimized: Controls designed for both mouse and touch interaction
- Performance Focused: Optimized 3D rendering based on device capabilities
- Progressive Enhancement: Core functionality works on all devices, with enhanced experiences on capable browsers
Vizify offers three premium card templates, each with distinct visual characteristics:
- Modern: Dynamic color gradients with geometric accents and a sleek finish
- Classic: Elegant side accent with refined details for a traditional business card feel
- Minimalist: Clean design with subtle corner accents for a contemporary, uncluttered look
Each template is fully customizable with your choice of premium colors and information fields.
- Node.js 16.x or higher
- npm or yarn package manager
- MySQL database
- A modern web browser for optimal 3D rendering
- Clone the repository
git clone https://github.com/nenad0707/Vizify.git
cd vizify- Install dependencies
npm install
# or
yarn install- Set up environment variables
cp .env.example .env.localEdit the .env.local file and add your database connection string and other required credentials.
- Set up the database
npx prisma db push- Start the development server
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser to see the application
npm run dev: Start the development servernpm run build: Build the application for productionnpm run start: Start the production servernpm run lint: Run ESLint to check code qualitynpm run test: Run test suite (if configured)
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.