https://github.com/hxhippy/hxreact
HxReact - Hippy's Hardcore React Setup Script 🚀
https://github.com/hxhippy/hxreact
automated-setup beginner-friendly dev-tools frontend-dev hxreact nodejs open-source react-app-generator react-setup tailwindcss web-dev
Last synced: 26 days ago
JSON representation
HxReact - Hippy's Hardcore React Setup Script 🚀
- Host: GitHub
- URL: https://github.com/hxhippy/hxreact
- Owner: HxHippy
- License: apache-2.0
- Created: 2024-09-16T00:06:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-16T01:58:28.000Z (over 1 year ago)
- Last Synced: 2025-04-05T05:41:57.293Z (10 months ago)
- Topics: automated-setup, beginner-friendly, dev-tools, frontend-dev, hxreact, nodejs, open-source, react-app-generator, react-setup, tailwindcss, web-dev
- Language: Shell
- Homepage: https://hxhippy.com
- Size: 74.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# HxReact - Hippy's Hardcore React Setup Script 🚀
[](LICENSE)
[](https://twitter.com/HxHippy)
[](https://hxhippy.com)
[](https://travisasm.com)
[](https://www.buymeacoffee.com/hxhippy)
An **automated**, **interactive** script for setting up a customized **React** application with your preferred frameworks, libraries, and tools—all tailored to your experience level. **Boost your productivity** and jumpstart your React projects with ease!
---
## 🌟 Features
- **Interactive CLI**: Guides you through setting up a React project with options suitable for both beginners and advanced users.
- **Customizable Configuration**: Choose from popular frameworks like **Next.js**, **Remix**, **Gatsby**, **Vite**, or **Create React App**.
- **TypeScript Support**: Optionally include **TypeScript** for enhanced code quality and error checking.
- **UI Libraries**: Integrate UI frameworks like **Tailwind CSS**, **Chakra UI**, **Material-UI**, **Ant Design**, or **styled-components**.
- **State Management**: Select from **Redux Toolkit**, **Zustand**, **Jotai**, **Recoil**, **MobX**, **XState**, or none.
- **Database/ORM Integration**: Set up **Prisma**, **Firebase**, **Mongoose**, or **SQLite** as per your project needs.
- **GraphQL and Authentication**: Optionally configure **GraphQL** clients (**Apollo**, **Relay**, **urql**) and **authentication** providers (**Auth0**, **Firebase Auth**, **NextAuth.js**).
- **Testing Frameworks**: Include **Jest**, **Vitest**, or **Cypress** for robust testing.
- **Additional Tools**: Automatically installs helpful packages like **Axios**, **React Hook Form**, **Zod**, **React Query**, **Date-fns**, **React Icons**, and **Lodash**.
- **Development Enhancements**: Sets up **ESLint**, **Prettier**, **Husky**, and **lint-staged** for code quality and consistency.
- **Optional Add-ons**: Supports **Storybook**, **internationalization (i18n)** with **react-i18next**, **PWA** capabilities, and **CI/CD** with **GitHub Actions**.
---
## 🎯 Why Choose HxReact?
- **🚀 Rapid Setup**: Automate the tedious setup process and get straight to coding.
- **👩💻 Beginner-Friendly**: Provides detailed explanations and guides for newcomers.
- **🎛️ Highly Customizable**: Tailor your React project to your specific needs and preferences.
- **🔧 Best Practices**: Ensures best practices are followed with proper tooling and configurations.
- **💡 Stay Updated**: Always uses the latest versions of packages with `@latest`.
---
## 📥 Installation
```bash
# Clone the repository
git clone https://github.com/hxhippy/hxreact.git
# Navigate into the directory
cd hxreact-setup
# Make the script executable
chmod +x hxreact.sh
```
---
## 🛠️ Usage
```bash
# Run the script
./hxreact.sh
```
Follow the interactive prompts to set up your React application.
---
## 📖 Detailed Documentation
### Table of Contents
- [Features](#-features)
- [Why Choose HxReact?](#-why-choose-hxreact)
- [Installation](#-installation)
- [Usage](#-usage)
- [Options and Customizations](#-options-and-customizations)
- [Generated Project Structure](#-generated-project-structure)
- [Contributing](#-contributing)
- [License](#-license)
- [Connect with Us](#-connect-with-us)
- [Support Us](#-support-us)
- [Acknowledgements](#-acknowledgements)
---
## ⚙️ Options and Customizations
**HxReact** offers a plethora of options to customize your React setup:
- **Frameworks**: Next.js, Remix, Gatsby, Vite + React, Create React App.
- **TypeScript**: Option to include TypeScript support.
- **UI Libraries**: Tailwind CSS, Chakra UI, Material-UI, Ant Design, styled-components.
- **State Management**: Redux Toolkit, Zustand, Jotai, Recoil, MobX, XState.
- **Database/ORM**: Prisma, Firebase, Mongoose, SQLite.
- **GraphQL Clients**: Apollo Client, Relay, urql.
- **Authentication Providers**: Auth0, Firebase Authentication, NextAuth.js.
- **Testing Frameworks**: Jest + React Testing Library, Vitest, Cypress.
- **Additional Tools**: Axios, React Hook Form, Zod, React Query, Date-fns, React Icons, Lodash.
- **Development Tools**: ESLint, Prettier, Husky, lint-staged.
- **Optional Add-ons**: Storybook, react-i18next (i18n), PWA capabilities, GitHub Actions for CI/CD.
---
## 🗂️ Generated Project Structure
Your project will have a clean and organized structure:
```
your-project-name/
├── .github/workflows/
│ └── ci.yml # CI/CD configuration
├── node_modules/
├── public/
│ └── locales/ # i18n translations
├── src/
│ ├── components/
│ ├── styles/
│ │ └── globals.css
│ ├── App.js / App.tsx
│ ├── index.js / index.tsx
│ └── ...
├── .env
├── .gitignore
├── LICENSE
├── NOTICE
├── README.md
├── package.json
└── ...
```
---
## 🤝 Contributing
We welcome contributions from the community! Please read our [Contributing Guidelines](CONTRIBUTING.md) before submitting a pull request.
---
## 📄 License
This project is licensed under the **Apache License 2.0**. See the [LICENSE](LICENSE) file for details.
**Attribution Notice**: Users of this software must preserve the [NOTICE](NOTICE) file, which includes attribution to the original author and associated entities.
---
## 🌐 Connect with Us
- **Creator**: [@HxHippy on X (Twitter)](https://twitter.com/HxHippy)
- **Website**: [hxhippy.com](https://hxhippy.com)
- **Company**: [Kief Studio](https://kief.studio)
- **Affiliation**: Advisor of [TRaViS - Threat Reconnaissance and Vulnerability Intelligence System](https://travisasm.com)
---
## 💖 Support Us
If you find this project helpful, please consider supporting us:
- **Buy Me a Coffee**: [https://www.buymeacoffee.com/hxhippy](https://www.buymeacoffee.com/hxhippy)
- **Star this Repository**: ⭐️ at the top right corner of this page.
- **Share with Others**: Spread the word on social media and among your developer friends.
---
## 🔗 Affiliate Link to TRaViS
### Discover TRaViS - The Next-Gen EASM Tool
[](https://travisasm.com?ref=hxreact)
Ever heard of **TRaViS**? It's the **Threat Reconnaissance and Vulnerability Intelligence System**—a next-gen **External Attack Surface Management (EASM)** tool.
**Imagine having a personal security assistant watching over your projects, helping you find vulnerabilities before the bad guys do. Sounds cool, right?**
- **Check it out here**: [https://travisasm.com?ref=hxreact](https://travisasm.com?ref=hxreact)
- **Join the Affiliate Program**: Earn by sharing TRaViS with others! [https://travisasm.com/affiliate-marketing-program](https://travisasm.com/affiliate-marketing-program)
---
## 🙏 Acknowledgements
- **HxHippy**: For creating this comprehensive setup script.
- **Kief Studio**: Supporting company behind the development.
- **TRaViS**: For their cutting-edge security solutions.
- **Open-Source Community**: For the amazing tools and libraries utilized in this project.
---
## 📣 Spread the Word
If you like **HxReact**, please consider sharing it with others who might find it useful.
- **Tweet About It**: [Click here to share on X](https://twitter.com/intent/tweet?text=Check%20out%20HxReact%20-%20an%20awesome%20interactive%20script%20for%20setting%20up%20React%20projects!%20%23ReactJS%20%23JavaScript&url=https://github.com/hxhippy/hxreact)
- **Share on LinkedIn**: [Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https://github.com/hxhippy/hxreact-setup)
---
**Boost your React development workflow today with HxReact!**
---
*Feel free to open an issue or submit a pull request if you have any questions or suggestions.*
---
## 📝 Additional Notes
- **FAQ**: Frequently Asked Questions are answered in the [FAQ](FAQ.md) section.
---
## 📬 Contact
For any inquiries or feedback, you can reach out to:
- **Email**: [contact@hxhippy.com](mailto:contact@hxhippy.com)
- **X**: [@HxHippy](https://x.com/HxHippy)
---
## 🚀 Let's Build Something Amazing Together!
HxReact is designed to simplify and accelerate your React development process. Whether you're a beginner taking your first steps into the world of React or an experienced developer looking to streamline your workflow, HxReact has got you covered.
---
**Thank you for using HxReact! Happy Coding!** 🎉
---
*This README was generated with ❤️ by [HxHippy](https://hxhippy.com).*
---