React Project Startup Script

Welcome to the React Project Startup Script! This script offers a streamlined setup for initiating a new React project with essential dependencies and configurations. Designed to enhance productivity, this script equips you with commonly used tools, enabling swift development from the get-go.

Overview

This script is meticulously crafted to simplify the process of launching a new React project. By providing pre-configured settings and incorporating fundamental dependencies, it aims to expedite project initiation. Notable inclusions are React Router DOM for seamless routing, Tailwind CSS for efficient styling, Axios for versatile HTTP requests, and React Query for streamlined data fetching, among others.

Getting Started

Windows :

1. Ensure Node.js is installed on your system.

   • If not installed, download and install it from here.

2. Clone or download this repository:

   git clone https://github.com/SazidulAlam47/react-project-startup.git

3. Copy the create_react_project_windows.cmd script to your desired directory where you intend to create your React project.

4. Execute the script:

   • Double-click create_react_project_windows.cmd.
   • Enter your desired project name when prompted and press Enter.

5. Sit back and relax:

   • The script will automate the setup process for you.
   • Upon completion, VS Code will launch, allowing you to start development.

Linux :

1. Ensure npm is installed on your system.

   • If not installed, install npm using the following command:

     sudo apt install npm -y

2. Clone or download this repository:

   git clone https://github.com/SazidulAlam47/react-project-startup.git

3. Copy the create_react_project_linux.sh script to your desired directory where you intend to create your React project.

4. Execute the script:

   • Open your terminal in the same directory.

   • Run the following commands:

     chmod +x create_react_project_linux.sh

     ./create_react_project_linux.sh

   • Enter your desired project name when prompted and press Enter.

5. Sit back and relax:

   • The script will automate the setup process for you.
   • Upon completion, VS Code will launch, allowing you to start development.

Mac :

1. Ensure Node.js is installed on your system.

   • If not installed, download and install it from here.

2. Clone or download this repository:

   git clone https://github.com/SazidulAlam47/react-project-startup.git

3. Copy the create_react_project_mac.sh script to your desired directory where you intend to create your React project.

4. Execute the script:

   • Open your terminal in the same directory.

   • Run the following command:

     bash create_react_project_mac.sh

   • Enter your desired project name when prompted and press Enter.

5. Sit back and relax:

   • The script will automate the setup process for you, ensuring a hassle-free experience.
   • Once the setup is complete, the development server will automatically launch.
   • You can then open the project in your preferred code editor and begin your work seamlessly.

Dependencies Installed

• React Router DOM
• Tailwind CSS
• DaisyUI
• PropTypes
• React Icons
• React Helmet Async
• Axios
• React Query
• SweetAlert2
• React Toastify
• React Hot Toast

These dependencies are carefully selected to provide a robust foundation for your React project, enhancing functionality and facilitating smooth development.

Project Structure

The script adheres to a structured layout commonly observed in React applications, facilitating organization and maintainability:

• src: Houses the core source code of the application.

  • components: Contains reusable UI components.
  • pages: Houses individual pages or views of the application.
  • hooks: Stores custom React hooks.
  • layouts: Hosts layout components responsible for structuring the UI.
  • firebase: Holds Firebase configuration and utilities.
  • providers: Houses context providers for state management.
  • shared: Contains shared utilities and helper functions.
  • utils: Houses general-purpose utility functions.
  • routes: Stores routing configurations and private routes.

This structured approach fosters clarity and scalability, ensuring a smooth development experience throughout your project's lifecycle.

Note: Feel free to edit the source code according to your need.