Bright_project NPM

`bright_project`

bright_project is a CLI tool to quickly set up a new Vite project with React, Tailwind CSS, React Router DOM, TanStack Query, and a basic folder structure. This tool helps you kickstart your project with a predefined configuration and structure.

Features

Vite: Modern build tool with fast performance.
React: A popular JavaScript library for building user interfaces.
Tailwind CSS: Utility-first CSS framework for custom designs.
React Router DOM: Declarative routing for React applications.
TanStack Query: Powerful data fetching and state management library.
Basic Folder Structure: Includes context, routing, and layout setup.
Meta Handler: Handles meta information for the project.

Installation

To use bright_project, you need to have Node.js and npm installed. You can then install the package globally using npm:

npm install -g bright_project

Usage

Once installed, you can create a new project by running the following command:

bright_project <project-name>

Replace <project-name> with your desired project name. This will generate a new Vite project with the specified configuration and folder structure.

Project Structure

The generated project will include the following folder structure:

src/
  components/
    nav&sidenav/
      HomeNav.jsx
    footer/
      HomeFooter.jsx
  context/
    MainContext.jsx
  hooks/
    ScrollToTop.js
  layouts/
    HomeLayout.jsx
  pages/
    home/
      pages/
        about/
          About.jsx
        home/
          Home.jsx
  routers/
    Router.jsx
    HomeRoute.jsx
  App.jsx
  index.jsx
  index.css

Files Overview

App.jsx: Main application component where routing is provided.
index.jsx: Entry point for the React application, includes context and query client setup.
MainContext.jsx: Context provider for managing global state.
Router.jsx: Configures routing using React Router DOM.
HomeRoute.jsx: Defines routes for the home section.
HomeLayout.jsx: Layout component including navigation and footer.
ScrollToTop.js: Hook to scroll to the top on route changes.
HomeNav.jsx: Navigation component.
HomeFooter.jsx: Footer component.
Home.jsx: Home page component.
About.jsx: About page component.