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:

1npm install -g bright_project

Usage

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

1bright_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.

Contributing

If you have suggestions or improvements for bright_project, feel free to open an issue or submit a pull request on GitHub.

License

bright_project is licensed under the MIT License.

Author

Mahadi Hasan

LinkedIn | GitHub