{"id":27148788,"url":"https://github.com/nenad0707/vizify","last_synced_at":"2026-04-11T06:03:37.825Z","repository":{"id":278987504,"uuid":"934195315","full_name":"nenad0707/Vizify","owner":"nenad0707","description":"Interactive 3D digital business card platform built with Next.js, Three.js, and TypeScript. Create, customize, and share stunning animated business cards with multiple templates and real-time previews.","archived":false,"fork":false,"pushed_at":"2025-04-08T09:48:58.000Z","size":5622,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T10:30:58.992Z","etag":null,"topics":["3d-visualization","digital-business-card","framer-motion","mysql","next-auth-v5","next-js","react-three-fiber","shadcn-ui","three-js","typescript","web-application"],"latest_commit_sha":null,"homepage":"https://vizify.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nenad0707.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-17T12:36:44.000Z","updated_at":"2025-04-08T10:05:16.000Z","dependencies_parsed_at":"2025-04-08T10:36:00.490Z","dependency_job_id":null,"html_url":"https://github.com/nenad0707/Vizify","commit_stats":null,"previous_names":["nenad0707/vizify"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nenad0707/Vizify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nenad0707%2FVizify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nenad0707%2FVizify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nenad0707%2FVizify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nenad0707%2FVizify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nenad0707","download_url":"https://codeload.github.com/nenad0707/Vizify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nenad0707%2FVizify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31670383,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-visualization","digital-business-card","framer-motion","mysql","next-auth-v5","next-js","react-three-fiber","shadcn-ui","three-js","typescript","web-application"],"created_at":"2025-04-08T12:24:24.100Z","updated_at":"2026-04-11T06:03:37.791Z","avatar_url":"https://github.com/nenad0707.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌟 Vizify - Interactive 3D Digital Business Card Platform\n\n![Next.js](https://img.shields.io/badge/Next.js-000000?style=flat\u0026logo=next.js\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat\u0026logo=typescript\u0026logoColor=white)\n![Three.js](https://img.shields.io/badge/Three.js-000000?style=flat\u0026logo=three.js\u0026logoColor=white)\n![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat\u0026logo=tailwind-css\u0026logoColor=white)\n![Prisma](https://img.shields.io/badge/Prisma-2D3748?style=flat\u0026logo=prisma\u0026logoColor=white)\n![Framer Motion](https://img.shields.io/badge/Framer_Motion-0055FF?style=flat\u0026logo=framer\u0026logoColor=white)\n[![Vercel](https://img.shields.io/badge/Vercel-Deployed-000000?style=flat\u0026logo=vercel\u0026logoColor=white)](https://vizify.vercel.app/)\n\n**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.\n\n## 🌐 Live Demo\n\n[![Vizify Demo](https://img.shields.io/badge/Vizify-Live%20Demo-5277C3?style=for-the-badge\u0026logo=react\u0026logoColor=white)](https://vizify.vercel.app/)\n\n\u003e **⚠️ Note:** Registration is required for creating and managing your own digital business cards.\n\n---\n\n## 📖 Table of Contents\n\n- [🌟 Vizify - Interactive 3D Digital Business Card Platform](#-vizify---interactive-3d-digital-business-card-platform)\n  - [🌐 Live Demo](#-live-demo)\n  - [📖 Table of Contents](#-table-of-contents)\n  - [📚 Project Overview](#-project-overview)\n  - [✨ Features](#-features)\n  - [📸 Screenshots](#-screenshots)\n    - [🖥️ Desktop View](#️-desktop-view)\n      - [Dashboard](#dashboard)\n      - [Card Creator](#card-creator)\n      - [Card Sharing Page](#card-sharing-page)\n    - [📱 Mobile View](#-mobile-view)\n  - [🛠️ Tech Stack \u0026 Tools](#️-tech-stack--tools)\n    - [Frontend](#frontend)\n    - [Backend \u0026 Database](#backend--database)\n    - [Authentication](#authentication)\n    - [3D Rendering](#3d-rendering)\n    - [Deployment](#deployment)\n  - [🔍 Architecture Overview](#-architecture-overview)\n    - [Key Components](#key-components)\n  - [🎯 Design Decisions](#-design-decisions)\n  - [📱 Responsive Design](#-responsive-design)\n  - [🎨 Card Templates](#-card-templates)\n  - [💻 Development](#-development)\n    - [Prerequisites](#prerequisites)\n    - [Installation](#installation)\n    - [Commands](#commands)\n    - [Contributing](#contributing)\n  - [📄 License](#-license)\n  - [🙏 Acknowledgments](#-acknowledgments)\n\n---\n\n## 📚 Project Overview\n\nVizify revolutionizes how professionals share their contact information by providing an immersive and interactive digital business card experience. Users can:\n\n- Create personalized business cards with custom colors and templates\n- Share cards via QR codes or direct links\n- Manage multiple cards through a streamlined dashboard\n- Showcase their professional identity with animated 3D cards\n\nBuilt with a focus on user experience and visual appeal, Vizify combines cutting-edge web technologies to deliver a seamless and memorable digital presence solution.\n\n---\n\n## ✨ Features\n\n- 🌈 **Interactive 3D Business Cards**: Stunning animated cards with realistic 3D effects powered by Three.js\n- 🎨 **Multiple Design Templates**: Choose from modern, classic, and minimalist templates to match your style\n- 🎭 **Custom Color Schemes**: Personalize your card with premium color options that reflect your brand\n- 📱 **Responsive Design**: Perfect viewing experience across all devices - desktop, tablet, and mobile\n- 📊 **User Dashboard**: Comprehensive dashboard to create, edit, and manage all your digital cards\n- 🔄 **Real-time Preview**: See your changes instantly as you customize your business card\n- 📤 **One-click Sharing**: Share your digital presence through multiple channels with ease\n- 🔒 **Secure Authentication**: Protected user accounts with NextAuth.js and secure data storage\n- 📱 **QR Code Generation**: Easily share your digital card in person with auto-generated QR codes\n- 🖼️ **Download as Image**: Save your card for use in email signatures or other digital platforms\n- 🔍 **SEO-Optimized Public Pages**: Card sharing pages designed for maximum discoverability\n\n## 📸 Screenshots\n\n### 🏠 Home Page\n![Home](./public/screenshots/home.png)\n\n*Welcome page showcasing interactive 3D business card examples and main features*\n\n### 📊 Dashboard\n![Dashboard](./public/screenshots/dashboard.png)\n\n*User dashboard for managing multiple digital business cards*\n\n### ✏️ Create Page\n![Create](./public/screenshots/create.png)\n\n*Interactive business card creator with customization options and live 3D preview*\n\n### 📱 Mobile Experience\n![Mobile View](./public/screenshots/mobile.png)\n\n*Responsive design optimized for mobile devices*\n\n---\n\n## 🛠️ Tech Stack \u0026 Tools\n\n### Frontend\n- **Next.js**: React framework with server-side rendering and static site generation\n- **TypeScript**: Type safety and improved developer experience\n- **TailwindCSS**: Utility-first CSS framework for rapid UI development\n- **Framer Motion**: Advanced animations and transitions\n- **Shadcn UI**: Beautifully designed accessible UI components\n- **Lucide Icons**: Beautiful and consistent icon set\n\n### Backend \u0026 Database\n- **Next.js API Routes**: Serverless API endpoints\n- **Prisma ORM**: Type-safe database access and migrations\n- **MySQL**: Robust relational database for data storage\n\n### Authentication\n- **NextAuth.js**: Flexible authentication solution with built-in providers\n- **JWT**: Secure token-based authentication\n\n### 3D Rendering\n- **Three.js**: JavaScript 3D library for rendering interactive 3D graphics\n- **React Three Fiber**: React renderer for Three.js\n- **@react-three/drei**: Helper components for React Three Fiber\n\n### Deployment\n- **Vercel**: Platform optimized for Next.js applications with CI/CD\n\n---\n\n## 🔍 Architecture Overview\n\nVizify follows a modern Next.js architecture that separates concerns while keeping related code together for better maintainability:\n\n### Key Components\n\n1. **Pages \u0026 API Routes**: Next.js pages for the frontend with API routes handling backend logic\n2. **React Components**: Modular UI components organized by functionality\n3. **3D Rendering Engine**: Custom Three.js implementation for interactive card previews\n4. **Database Layer**: Type-safe database access through Prisma ORM\n5. **Authentication System**: Secure user authentication with NextAuth.js\n6. **Shared Types \u0026 Utilities**: Common types and helper functions\n\nThe application uses a hybrid approach with both server-side rendering and client-side interactivity for optimal performance and SEO.\n\n---\n\n## 🎯 Design Decisions\n\n1. **3D Rendering Strategy**: For performance optimization, we implement different rendering approaches:\n   - Full 3D WebGL rendering for interactive card previews\n   - CSS 3D transforms for lighter card representations in listings\n   - Server-side generated previews for sharing images\n\n2. **Modular Components**: UI components are built with composition in mind, following atomic design principles to maximize reusability.\n\n3. **Design System**: A consistent design language using TailwindCSS with custom theme variables ensures visual coherence throughout the application.\n\n4. **Performance Optimization**: Dynamic imports, code splitting, and optimized assets keep the application fast and responsive even with complex 3D elements.\n\n---\n\n## 📱 Responsive Design\n\nVizify is built with a mobile-first approach, ensuring a great user experience across all devices:\n\n- **Adaptive Layouts**: Flexbox and CSS Grid for responsive content organization\n- **Touch-Optimized**: Controls designed for both mouse and touch interaction\n- **Performance Focused**: Optimized 3D rendering based on device capabilities\n- **Progressive Enhancement**: Core functionality works on all devices, with enhanced experiences on capable browsers\n\n---\n\n## 🎨 Card Templates\n\nVizify offers three premium card templates, each with distinct visual characteristics:\n\n- **Modern**: Dynamic color gradients with geometric accents and a sleek finish\n- **Classic**: Elegant side accent with refined details for a traditional business card feel\n- **Minimalist**: Clean design with subtle corner accents for a contemporary, uncluttered look\n\nEach template is fully customizable with your choice of premium colors and information fields.\n\n---\n\n## 💻 Development\n\n### Prerequisites\n\n- Node.js 16.x or higher\n- npm or yarn package manager\n- MySQL database\n- A modern web browser for optimal 3D rendering\n\n### Installation\n\n1. Clone the repository\n```bash\ngit clone https://github.com/nenad0707/Vizify.git\ncd vizify\n```\n\n2. Install dependencies\n```bash\nnpm install\n# or\nyarn install\n```\n\n3. Set up environment variables\n```bash\ncp .env.example .env.local\n```\n\nEdit the `.env.local` file and add your database connection string and other required credentials.\n\n4. Set up the database\n```bash\nnpx prisma db push\n```\n\n5. Start the development server\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\n6. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application\n\n### Commands\n\n- `npm run dev`: Start the development server\n- `npm run build`: Build the application for production\n- `npm run start`: Start the production server\n- `npm run lint`: Run ESLint to check code quality\n- `npm run test`: Run test suite (if configured)\n\n### Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- [Next.js](https://nextjs.org/)\n- [Three.js](https://threejs.org/)\n- [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/)\n- [TailwindCSS](https://tailwindcss.com/)\n- [Framer Motion](https://framer.com/motion/)\n- [Shadcn UI](https://ui.shadcn.com/)\n\n---\n\n📌 Created with ❤️ by Nenad | [Portfolio](https://risticnenad.com/) | [LinkedIn](https://linkedin.com/in/nenadtarailo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnenad0707%2Fvizify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnenad0707%2Fvizify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnenad0707%2Fvizify/lists"}