Pentafox Starter Kit

A modern, professional React starter template built with Vite, TypeScript, Mantine UI, React Router, Zustand, and React Query.

This template provides a solid foundation for building scalable web applications, featuring:

• Professional UI components and layouts
• Collapsible navigation with nested routes
• State management with Zustand
• Routing with React Router
• UI components with Mantine
• API integration with Axios and React Query

Features

• 🚀 Vite - Lightning fast build tool
• 🔍 TypeScript - Type safety and better developer experience
• 💅 Mantine UI - Beautiful, accessible components with professional styling
• 🔄 React Query - Efficient data fetching and caching
• 🧩 Zustand - Simple and scalable state management
• 🔀 React Router - Feature-rich client-side routing with nested routes
• 📱 Responsive Design - Works seamlessly on all devices
• 🔧 Professional Navbar - Collapsible navigation with nested routes
• 🔒 Authentication Structure - Ready for integration with your auth system
• 🔌 API Integration - Set up with Axios interceptors and error handling

Getting Started

Method 1: Using NPM (Preferred)

# Create a new Vite React project
npm create vite@latest my-app --template react-ts
cd my-app

# Install dependencies
npm install

# Install Pentafox starter kit
npm install pentafox-starter-kit

# Copy the template content to your project
cp -r node_modules/pentafox-starter-kit/template/* .
cp node_modules/pentafox-starter-kit/template/.* . 2>/dev/null || :

# Install the dependencies specified in the template
npm install

# Start the development server
npm run dev

Method 2: Using Git (Alternative)

# Clone the repository
git clone https://github.com/pentafox/pentafox-starter-kit.git my-app
cd my-app

# Remove the Git history
rm -rf .git

# Install dependencies
npm install

# Start the development server
npm run dev

Project Structure

src/
├── api/             # API integration layers with Axios
├── assets/          # Static assets like images
├── components/      # Reusable UI components
├── layout/          # Layout components
├── pages/           # Page components
│   ├── dashboard/   # Dashboard related pages
│   ├── profile/     # Profile related pages
│   ├── settings/    # Settings related pages
│   └── login/       # Authentication pages
├── Routes/          # Routing configuration
├── service/         # Service layers
├── store/           # Zustand store definitions
├── theme/           # Mantine theme configuration
├── App.tsx          # Main App component
└── main.tsx         # Application entry point

Customization

Theming

The template uses Mantine UI which supports extensive theming. Modify the theme configuration in src/theme/brandThemeDefault.ts.

Adding New Pages

1. Create a new page component in the src/pages directory
2. Add a route for your page in src/Routes/NavigationRoutes.tsx using React Router

Navigation

Modify the navigation structure by updating the mainNavItems array in src/components/Navigation/Navbar.tsx.

State Management

The template uses Zustand for state management. Add new stores in the src/store directory.

Development

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint the codebase
npm run lint

# Format the codebase
npm run format

Deployment

This template can be deployed to any static hosting service:

npm run build

Then deploy the dist directory to your hosting provider of choice (Vercel, Netlify, GitHub Pages, etc.).

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

See CONTRIBUTING.md for more details.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Vite
• React
• TypeScript
• Mantine UI
• React Query
• Zustand
• React Router