Introduction

Thank you for purchasing Mizzle theme! Before proceeding with the theme installation, It is recommended that you follow the steps listed in this guide. We have covered all kinds of necessary information, and provide you with all the guidelines and details that you will need to use Mizzle theme. If you can't find the answer you're looking for, We encourage you to reach to us through Email

Directory structure

Once you have downloaded the package after theme extracting, you will see the following files & folder structure:

• public

  Contains publicly accessible assets eg. favicon or robots

• src

  Whole Theme's code, along with its assets and dummy data

  assets

  All assets files, like CSS, Images, JS, SCSS, and plugins used in the theme

  scss

  .scss files, used in theme

  • images

    All images are used in .html files.

  • data

    Static and common data used throughout the Theme

  components

  Folder contains commonly used components throughout the Theme

  helpers

  Folder contains fake backend related helpers and functions

  hooks

  Folder contains custom written hooks

  layouts

  Folder contains common layouts for different sections of the theme, eg. auth and admin

  pages

  Folder contains all the pages of the theme, structured in a easy to understand format

  routes

  Folder contains routes created with react-router-dom for SPA

  states

  Folder contains globals states for the Theme, created with createContext

  types

  Folder contains some globally used typings for typescript (Only included in TS version)

  utils

  Folder contains some custom utilities for doing minor tasks

• .eslintrc.cjs

  Contains rules for ESLint. ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code

  .gitignore

  Contains list of files or directories which are not supposed to be included in git commit

  .prettierrc

  Contains Prettier's configuration for code formatting. It enforces a consistent style by parsing your code and re-printing it with its own rules.

  bun.lockb

  bun Lock dependencies to a specific version number to avoid possible version mismatch.

  index.html

  Entry point for your Reactjs Theme

  package.json

  List of dependencies and npm information

  tsconfig.json (incase of JS version jsconfig.json)

  Contains the configuration for how the typescript is supposed to work/behave for your current project

  package-lock.json

  npm Lock dependencies to a specific version number to avoid possible version mismatch.

  yarn.lock

  yarn Lock dependencies to a specific version number to avoid possible version mismatch.

  README.MD

  Default readme created by Vite after running npm create vite code

  vite.config.ts

  Configuration file for Vite, you can configure your development server or build from this file