ZexHub

The all-in-one developer ecosystem. Build portfolios, generate CSS, explore UI components, and ship faster.

Live Demo · Report Bug · Request Feature

---

Recent Updates (v2.1)

• ** Visual Layout Builder**: New drag-and-drop tool to create responsive layouts visually with live HTML/CSS export.
• ** Enhanced UI/UX**: Complete overhaul of the Tools section with a scalable sidebar layout and dark mode aesthetic.
• ** Mobile Experience**: Fully responsive header with smooth animated hamburger menu.
• ** Performance & Fixes**:
  • Fixed production build issues (file extensions, case sensitivity).
  • Switched typography to Bricolage Grotesque for a modern, distinctive look.
  • Added HTML export support for all CSS generators.
• ** Deployment Ready**: Added root-level Vercel configuration for seamless deployment.

---

Features

Portfolio Builder

• Template System: Choose from curated, production-ready HTML templates
• Live Customization: Real-time preview with dynamic placeholder replacement
• One-Click Deploy: Export as ZIP or deploy directly to GitHub
• Folder-Based Templates: Support for multi-template repositories

CSS Tools

• Visual Layout Builder: Drag & drop layout creator with resize, snap-to-grid, and live code generation (HTML/CSS).
• Gradient Generator: Create beautiful CSS gradients with multi-stop control and HTML/CSS export.
• Box Shadow Generator: Design layered shadows with visual controls and instant code export.
• Layout Generator: Classic Flexbox & Grid generator for quick CSS snippets.

Component Showcase

• Live Interactive Demos: Real components powered by React, Framer Motion, and GSAP
• Multi-Framework Support: Components available for React, Tailwind, and vanilla HTML/CSS
• Copy-Paste Ready: One-click code copying for instant integration
• Categories: Buttons, Cards, Creative effects, and more

UI Component Library

• Tailwind Components: Modern, responsive components using Tailwind CSS
• CSS Components: Pure CSS implementations for framework-free projects
• Searchable & Filterable: Find exactly what you need instantly

Productivity Hub

• Curated Tools: Hand-picked developer resources and utilities
• Categorized: Design tools, icons, generators, and learning resources
• External Links: Direct access to the best tools on the web

---

Quick Start

Prerequisites

• Node.js 18.x or higher
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/AbdullahMukadam/ZexHub.git
   cd ZexHub

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   cp .env.example .env

   Add your GitHub OAuth credentials (optional, for deployment features):

   VITE_GITHUB_CLIENT_ID=your_github_client_id
   VITE_GITHUB_REDIRECT_URI=http://localhost:5173/auth/callback
   VITE_BACKEND_GITHUB_URL=your_backend_url

4. Start the development server

   npm run dev

5. Open your browser

   http://localhost:5173
   

---

Project Structure

ZexHub/
├── src/
│   ├── components/          # React components (lowercase)
│   │   ├── common/          # Shared components (SEO, etc.)
│   │   ├── editor/          # Template editor components
│   │   ├── forms/           # Dynamic form system
│   │   ├── layout/          # Header, Footer
│   │   ├── showcase/        # Showcase card & code block
│   │   │   └── previews/    # Live component previews
│   │   ├── templates/       # Template gallery
│   │   ├── tools/           # CSS generator tools
│   │   └── ui-library/      # UI component library
│   ├── context/             # React Context (Auth, Templates)
│   ├── data/                # Static data & configs
│   │   ├── components/      # UI library data
│   │   ├── productivity/    # Tools data
│   │   └── showcase/        # Showcase components data
│   ├── hooks/               # Custom React hooks
│   ├── lib/                 # Utilities (cn helper, etc.)
│   ├── pages/               # Route pages
│   ├── services/            # API & business logic
│   │   ├── export/          # ZIP & deployment
│   │   ├── github/          # GitHub API integration
│   │   └── template/        # Template processing
│   ├── App.jsx              # Main app component
│   ├── main.jsx             # App entry point
│   └── index.css            # Global styles
├── public/                  # Static assets
├── .env.example             # Environment variables template
├── tailwind.config.js       # Tailwind CSS configuration
├── vite.config.js           # Vite configuration
├── package.json             # Dependencies & scripts
└── README.md                # You are here

---

Tech Stack

Core

• React 18.3 - UI library
• Vite 5.4 - Build tool & dev server
• React Router 6 - Client-side routing
• Zustand - State management

Styling

• Tailwind CSS 3.4 - Utility-first CSS framework
• Framer Motion - Animation library
• shadcn/ui - Component system

APIs & Integrations

• GitHub API - OAuth & repository management
• Octokit - GitHub REST API client
• JSZip - Archive creation for downloads

Animation & Effects

• GSAP - Advanced animations
• Framer Motion - React animations

Developer Experience

• ESLint - Code linting
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixes

---

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build locally
npm run lint	Run ESLint

---

Deployment

Build for Production

npm run build

The optimized production build will be in the dist/ folder.

Deploy to Vercel

Deploy to Netlify

Manual Deployment

1. Build the project: npm run build
2. Upload the dist/ folder to your hosting provider
3. Configure environment variables on your hosting platform

---

Contributing

We welcome contributions from the community! Here's how you can help:

Ways to Contribute

• Report bugs - Open an issue
• Suggest features - Open a feature request
• Improve documentation - Submit PRs for README or docs
• Add components - Create new showcase components
• Fix issues - Check out good first issues
• Add templates - Contribute new portfolio templates

Development Workflow

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Commit with conventional commits

   git commit -m "feat: add amazing feature"

5. Push to your fork

   git push origin feature/amazing-feature

6. Open a Pull Request

See CONTRIBUTING.md for detailed guidelines.

---

Adding New Components

Showcase Components

To add a new interactive component to the Showcase:

1. Create the component file

   src/Components/showcase/previews/MyComponent.jsx

2. Register in the registry

   // src/Components/showcase/previews/registry.js
   import MyComponent from './MyComponent';
   
   const previewRegistry = {
     'my-component': MyComponent,
     // ... other components
   };

3. Add data entry

   // src/data/showcase/components.js
   {
     id: 'my-component',
     title: 'My Component',
     description: 'An awesome new component',
     category: 'creative',
     framework: 'react-framer',
     tags: ['animation', 'interactive'],
     dependencies: ['framer-motion'],
     code: {
       jsx: `// Your component code here`,
       css: null,
       html: null
     }
   }

See CONTRIBUTING.md for more details.

---

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Author

Abdullah Mukadam

• GitHub: @AbdullahMukadam
• Twitter: @abd_mukadam

---

Acknowledgments

• Tailwind CSS - For the amazing utility-first framework
• Framer Motion - For smooth animations
• GSAP - For advanced animation capabilities
• shadcn/ui - For the beautiful component system
• Vercel - For hosting and inspiration
• The open-source community - For inspiration and tools

---

Project Stats

---

Roadmap

• More Templates - Add 10+ new portfolio templates
• Three.js Showcase - Interactive 3D components
• Animation Library - Pre-built animation presets
• CLI Tool - Command-line interface for quick setup
• VS Code Extension - Component snippets
• Dark/Light Mode - Theme switching
• Component Playground - Live code editor
• Export to CodePen - Share components easily
• Template Marketplace - Community-submitted templates
• API Documentation - Full API reference

---

If you find this project helpful, please give it a star!

Made with ❤️ by Abdullah Mukadam