WidgetHub

WidgetHub is a React-based web application that serves as a curated collection of small, interactive projects and reusable UI components. It features a robust search functionality and category-based filtering to help users easily discover and explore components Built with modern web technologies, WidgetHub emphasizes reusability, interactivity, and a sleek user interface.

Perfect for:
• Learning React by example
• Finding reusable UI components
• Portfolio showcase
• Inspiration for your own projects

You can explore widgets like Accordions, Counters, Dice Rollers, Password Managers, and many more , all searchable and categorized for easy access.

Features

Search Bar – Quickly locate specific components or projects using keyword search. Category Filters – Organize and filter projects by categories (e.g., Games, UI Components, Utility Tools). Grid Layout – Displays projects in a card-based grid that adapts to different screen sizes. Dynamic Routing – Each project opens in its dedicated page for an immersive experience. Smooth Animations – Integrated with Framer Motion for fluid transitions and enhanced user engagement. Modern UI – Glassmorphism-inspired styling with CSS & SCSS.

🔗 Live Demo

Check out the live version: WidgetHub

Tech Stack

• Frontend: React.js
• Routing: React Router
• Styling: CSS and SCSS (for modular, customizable styles with Glassmorphism effects).
• Animations: Framer Motion
• State Management: useState, useEffect
• Build Tool: Vite

Project Structure

WidgetHub/
│── src/
│   ├── assets/    
│   │    ├── components-images/    # preview images for homepage cards
│   │    └── styles/               # global styles / design system
│   │
│   ├── components/                # individual widget components
│   │     └── Component/           # example: each widget in its folder
│   │          ├── Component.jsx
│   │          ├── Component.css
│   │          └── Component.js    #(optional)  
│   │
│   ├── constants/ 
│   │     ├── data.js/             # images data
│   │     └── projects.js/         # Widget metadata (title, category, route, etc.)
│   │
│   ├── project-component/         # main showcase / project components
│   ├── pages/       
│   ├── App.js                     # root component + routing 
│   └── main.js 
│    
│── package.json                   # Dependencies & Scripts
└── README.md                      # Project Documentation

Quick Start (Just want to see it running locally?)

# 1. Clone the project
git clone https://github.com/72umesh/WidgetHub.git

# 2. Go inside the folder
cd WidgetHub

# 3. Install dependencies
npm install

# 4. Start development server
npm run dev

# 5. Open in browser → usually http://localhost:5173

Adding a New Project

Adding a new widget is very simple and follows the same pattern as existing ones.

1. Create a folder for your widget: Inside: src/components/YourWidgetName/

src/components/CoolNewButton/
├── CoolNewButton.jsx
├── CoolNewButton.module.css     # or .scss
└── index.js                     # (optional) export

2. Register the new widget in the central projects file: Inside: src/constants/projects.js

export const projects = [
  // ... other existing projects ...
  {
    name: "Cool New Button", 
    preview: images.coolnewbutton,
    description: "A cool new button",
    category: "Utility Tools",
    route: "/cool-new-button",
  },
  // ...
];

3. Add a preview image:

• Create a nice screenshot of your component (recommended size: 3:2 ratio)
• Save it in: src/assets/components-images/
  • Example: src/assets/components-images/cool-new-button.png

4. Connect the preview image: In src/constants/projects.js, import and assign the image directly:

import coolnewbutton from '../../assets/components-images/cool-new-button.png';

 const images = [
  //... otherimages
   coolnewbutton
  //
];

5. Add the route: Open src/App.js

<Route
  path="/cool-new-button"
  element={
    <ProjectPage>
      <CoolNewButton />  # Add your Component
    </ProjectPage>
  }
/>

📜 License

This project is open-source under the MIT License.

🤝 Contributing

Contributions are welcome! Feel free to fork the repo and submit a pull request.

🌟 Show Your Support

If you find WidgetHub useful, give it a ⭐ on GitHub and share it with your network!

Made with ❤️ by Umesh

📬 Connect with Me

💼 Portfolio: https://umeshpalportfolio.vercel.app/

📧 Email: umeshpal8141@gmail.com