GlitchWave open-source react project

GlitchWave demo screenshot

What is GlitchWave?

GlitchWave is an open-source frontend project. It makes our life easy to work on the admin panel. No more work from scratch. Work with premaid admin panel. Easy to customize, add, remove features.


  • Build with popular and latest technologys (ReactJs, React-router-dom, TailwindCss3).
  • All device responsive.
  • Minimal beautifyl UI. UX ready.
  • Optimized for performence.

Work with GlitchWave

Site configaration ./src/configs.json

proxy your backend server url. defaultProductImage will show if any product image not provided.

    "sitename": "GlitchWave",
    "description": "B2B eCommerce administration",
    "proxy": "",
    "defaultProductImage": "", 
    "userName": "Abu Raihan",
    "userAvatar": ""

Work with GlitchWave page ./src/pages/PageWrapper.tsx

 * Create a new component and wrap that with PageWrapper
 * It will autometacally import header, sidenav to your page
const MyNewPage: React.FC = () => {
  return (
        <h2>Hello world!</h2>
        <button>Click me</button>

Add page link to sidenav.

GlitchWave provide a context to work with sidenav links ./src/context/PageContext.tsx

import {PageListContext} from "../context/PageContext.tsx";
imort React, {useContext, useState} from "react";

const MyComponent: React.FC = () => {
  const {pageList, setPageList} = useContext(PageListContext);
  // Read all pages
  // Add new page
  useEffect(() => {
    setPageList((prevPages) => [...prevPages, {label: "My brand new page", slug: "/my-brand-new-page", icon: "page"}])
  }, [setPageList])
  return (
      {{label, slug, icon}, i) => <li key={i}>{label}</li>)}

Sort post by tag

GlitchWave provide a component to work with Tagged posts/contents. ./src/components/SortBYTag.tsx. Props

  • tags // Array [“Tag1”, “Tag2”]
  • defaultActiveIndex // Number 1/2

import SortByTag from "../components/SortByTag.tsx";

const MyComponent: React.FC = () => {
  return (
      <SortByTag tags={["All posts", "Trending posts", "New posts"]} />
      {/* Custom default active button */}
      <SortByTag tags={["All posts", "Trending posts", "New posts"]} defaultActiveIndex={2} />

Toggle button

GlitchWave provide a component to work with Toggle button. ./src/components/ToggleBtn.tsx. It takes three props

  • btnOnLabel
  • btnOffLabel
  • btnOnByDefault // Optional, default false

import ToggleBtn from "../components/SortByTag.tsx";

const MyComponent: React.FC = () => {
  return (
      <ToggleBtn btnOnLabel="On" btnOffLabel="Off" btnOnByDefault={true}  />

Collapsible section

GlitchWave provide a component to work with collapsible section. ./src/components/Collapse.tsx. It takes four props

  • name: String; // Name of the Collapseable section
  • btnLabel: String; // Label of clickable button to collapse
  • openByDefault?: boolean; // Optional, default false
  • children: React.ReactChild; // After click what content to show

import Collapse from "../components/Collapse.tsx";

const MyComponent: React.FC = () => {
  return (
      <Collapse name="My collapse" btnLabel="Toggle" openByDefault={true}>
        <div>Hello world!</div>