---

🌐 Live Demo

Frontend: https://veltrix-ui.vercel.app
Backend API: https://veltrix-ui-backend.onrender.com

---

✨ Features

• 🎨 Component Library — Browse a growing collection of handcrafted React UI components
• 👁️ Live Preview — See every component rendered live via a custom Babel JSX compiler in an adaptive-height iframe
• 📋 One-Click Copy — Instantly copy the JSX code for any component
• ❤️ Favourites — Favourite components locally, no account required
• 🆕 New Badge — Components uploaded in the last 7 days are highlighted with a "New" badge
• 📈 View Counts — See how many times each component has been viewed
• 🔍 Search & Filter — Search by name or filter by category tags
• 📊 Sort — Sort components by Newest or Most Viewed
• 🔐 Secure Admin Panel — A hidden admin panel for managing components (protected by JWT auth)
• 📱 Responsive — Fully responsive design for desktop and mobile

---

🛠️ Tech Stack

Frontend

Backend

---

📁 Project Structure

Veltrix-UI/
├── src/                          # Frontend (React)
│   ├── components/
│   │   ├── CardComponent.jsx     # Component card with live preview
│   │   ├── LivePreview.jsx       # Custom Babel + ESM iframe compiler
│   │   ├── Sidebar.jsx           # Navigation sidebar
│   │   ├── MobileSideBar.jsx     # Mobile navigation
│   │   ├── DependenciesDropdown.jsx
│   │   └── Footer.jsx
│   ├── context/
│   │   ├── AuthContext.jsx       # JWT auth state management
│   │   └── ComponentsContext.jsx # Global components state
│   ├── pages/
│   │   ├── HomePage.jsx          # Landing page
│   │   ├── ComponentsPage.jsx    # Browse all components
│   │   ├── ComponentDetailPage.jsx # Single component view
│   │   ├── AdminPage.jsx         # Secret admin panel (/veltrix-admin)
│   │   └── NotFound.jsx          # 404 page
│   └── utils/
│       ├── api.js                # Axios instance
│       ├── cn.js                 # classnames utility
│       └── constants.js          # Routes & social links
│
└── server/                       # Backend (Node.js)
    └── src/
        ├── config/db.js          # MongoDB connection
        ├── controller/
        │   ├── auth.controller.js
        │   └── component.controller.js
        ├── middleware/
        │   └── auth.middleware.js # JWT protect middleware
        ├── models/
        │   ├── User.models.js
        │   └── Component.models.js
        ├── routes/
        │   ├── auth.routes.js
        │   └── component.routes.js
        └── index.js              # Express app entry point

---

🚀 Getting Started (Local Development)

Prerequisites

• Node.js 18+
• MongoDB installed locally OR a MongoDB Atlas URI

1. Clone the repository

git clone https://github.com/AwadhDhoot23/Veltrix-UI.git
cd Veltrix-UI

2. Install Frontend Dependencies

npm install

3. Set up the Backend

cd server
npm install

Create a .env file inside the server/ folder:

MONGO_URI=mongodb://127.0.0.1:27017/veltrix-ui
JWT_SECRET=your_secret_key_here
PORT=5000
CLIENT_URL=http://localhost:5173

4. Run the App

In one terminal (backend):

cd server
node src/index.js

In another terminal (frontend):

npm run dev

Open http://localhost:5173 in your browser.

---

🔐 Admin Panel

The admin panel is hidden at a secret URL. It is not linked anywhere in the public UI.

• URL: /veltrix-admin
• Access: Log in with your admin account credentials
• Features: Create, edit, and delete components using a Monaco code editor

---

📡 API Endpoints

Public

Auth

Admin (Protected — requires JWT)

---

🌍 Deployment

Environment Variables for Deployment

Vercel (Frontend):

VITE_API_URL=https://your-render-backend.onrender.com/api

Render (Backend):

MONGO_URI=mongodb+srv://...your atlas connection string...
JWT_SECRET=your_production_secret_key
CLIENT_URL=https://your-vercel-app.vercel.app
PORT=5000

---

📸 Screenshots

---

🤝 Contributing

This is a curated library — components are reviewed and uploaded by the admin to maintain quality. If you'd like to suggest a component, open an issue!

---

📄 License

MIT License — feel free to use components in your own projects.

---