RRAT Stack (React-Redux-Antd & Tailwind)

A modern, powerful frontend stack combining React, Redux, Ant Design, and Tailwind CSS for building scalable and beautiful web applications.

🚀 Features

• React 18+ - Latest React features including Concurrent Mode
• Redux Toolkit - Modern state management with simplified setup
• Ant Design 5 - Enterprise-grade UI components
• Tailwind CSS 3 - Utility-first CSS framework
• Vite - Lightning fast build tool
• ESLint & Prettier - Code quality and formatting
• Responsive Design - Mobile-first approach
• Dark Mode Support - Built-in theme switching
• Performance Optimized - Best practices for optimal performance

🎯 Key Components Showcase

App Page

import { HashRouter as Router, Routes, Route } from "react-router-dom";
import { Suspense } from "react";
import routes from "./routes";
import MainLayout from "./layout/MainLayout";
import ErrorBoundary from "./pages/ErrorBoundary";
import Login from "./pages/Login";
import PrivateRoute from "./auth/PrivateRoute";
import { Spin } from "antd";
import { Provider } from "react-redux";
import store from "./app/store";

const App = () => (
  <Provider store={store}>
    <ErrorBoundary>
      <Router>
        <Suspense fallback={<Spin size="large"></Spin>}>
          <Routes>
            <Route path="/login" element={<Login />} />
            {routes.map(({ path, component: Component }, index) => (
              <Route
                key={index}
                path={path}
                element={
                  <PrivateRoute>
                    <MainLayout>
                      <Component />
                    </MainLayout>
                  </PrivateRoute>
                }
              />
            ))}
          </Routes>
        </Suspense>
      </Router>
    </ErrorBoundary>
  </Provider>
);

export default App;

Features:

• Full Application Error Boundary Handle
• Suspense for heavy Component
• Auth Provider bu using Redux store
• Dynamic Routes
• Private Routes
• Responsive design with Layout

🛠 Installation

# Clone the repository
git clone https://github.com/yourusername/RRAT_Stack.git

# Navigate to project directory
cd RRAT_Stack

# Install dependencies
npm install

# Start development server
npm run dev

📦 Project Structure

RRAT_Stack/
├── src/
│   ├── apiEndPoints/    # Reusable components
│   ├── app/             # Redux store
│   ├── assets/          # assets files
│   ├── auth/            # authentication
│   ├── components/      # Reusable components
│   ├── features/        # Redux slice
│   ├── layout/          # Main Layout
│   ├── lib/             # API Client Axois
│   └── menuItems/       # Menus Items
│   ├── pages/           # Route Page
│   ├── routes/          # Route Define
│   ├── serviecs/        # api services
│   ├── utils/           # Utility functions
├── public/              # Static assets
|   ├── config           # Configuration for project environment and others
└── tests/               # Test files

🔧 Configuration

Vite & Tailwind CSS

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    extensions: [".js", ".jsx"],
  },
  build: {
    outDir: "build",
  },
  base:
    config.ENVIRONMENT === "prod"
      ? config.BASE_PATH_PROD
      : config.BASE_PATH_DEV,
});

Redux Store Setup

// store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => 
    getDefaultMiddleware().concat(/* your middlewares */)
});

🎨 Styling Guide

Combining Tailwind with Ant Design

// Example component using both Tailwind and Ant Design
const CustomCard = () => (
  <Card className="hover:shadow-lg transition-shadow duration-300">
    <div className="space-y-4">
      <h2 className="text-2xl font-bold text-gray-800">
        Title
      </h2>
      <Button type="primary" className="w-full">
        Action
      </Button>
    </div>
  </Card>
);

📱 Responsive Design

Built-in responsive breakpoints:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

🚀 Performance Optimizations

• Code splitting with React.lazy()
• Image optimization
• Tree-shaking enabled
• Debounced and throttled events
• Memoized components
• Virtual scrolling for large lists

📈 Best Practices

1. Use TypeScript for type safety
2. Implement proper error boundaries
3. Follow Redux best practices
4. Write unit tests for components
5. Use proper semantic HTML
6. Optimize bundle size
7. Follow accessibility guidelines

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

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

🙏 Acknowledgments

• React Team
• Redux Team
• Ant Design Team
• Tailwind CSS Team
• All contributors

---

Made with ❤️ by [Prodip]