React Router + Redux Template

A modern, responsive web application template built with React Router v7, Redux Toolkit, and Tailwind CSS. This template demonstrates best practices for state management, routing, and responsive design in a React application.

🚀 Features

• React Router v7 - Latest routing solution with file-based routing
• Redux Toolkit - Simplified Redux for predictable state management
• Tailwind CSS v4 - Utility-first CSS framework with dark mode support
• TypeScript - Full type safety throughout the application
• Responsive Design - Mobile-first approach with responsive breakpoints
• Dark Mode - Automatic dark mode support based on system preferences
• Vite - Fast build tool and development server
• Docker - Containerization support for easy deployment

📁 Project Structure

react-router-redux/
├── app/
│   ├── components/          # Reusable UI components
│   │   └── Counter.tsx      # Example counter component
│   ├── hooks/              # Custom React hooks
│   │   └── useRedux.ts     # Redux hooks with proper typing
│   ├── routes/             # Route components (file-based routing)
│   │   └── home.tsx        # Home page route
│   ├── store/              # Redux store configuration
│   │   ├── index.ts        # Store setup and types
│   │   └── slices/         # Redux slices
│   │       └── counterSlice.ts
│   ├── welcome/            # Welcome page assets
│   ├── app.css            # Global styles with Tailwind
│   ├── root.tsx           # Root app component with providers
│   └── routes.ts          # Route configuration
├── public/                 # Static assets
├── Dockerfile             # Docker configuration
├── package.json           # Dependencies and scripts
├── react-router.config.ts # React Router configuration
├── tsconfig.json          # TypeScript configuration
└── vite.config.ts         # Vite configuration

🛠 How This Template Works

1. React Router v7 Architecture

React Router v7 introduces file-based routing where route components are automatically discovered from the app/routes/ directory:

• app/routes/home.tsx → / route
• app/routes/about.tsx → /about route (if created)
• app/routes/users/$userId.tsx → /users/:userId dynamic route

Each route file can export:

• default - The route component
• meta - Page metadata (title, description)
• loader - Server-side data loading
• action - Form submission handling

2. Redux Store Architecture

The Redux store is configured using Redux Toolkit for simplified state management:

// app/store/index.ts
export const store = configureStore({
  reducer: {
    counter: counterReducer,
    // Add more slices here
  },
});

Slices contain all related logic for a feature:

// app/store/slices/counterSlice.ts
const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

3. Component Architecture

Components follow these patterns:

Functional Components with Hooks:

const Counter = () => {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();
  // Component logic
};

Responsive Design with Tailwind:

• Mobile-first approach using sm:, md:, lg: prefixes
• Dark mode support with dark: prefix
• Utility classes for consistent spacing and typography

4. State Management Flow

1. Component dispatches an action
2. Redux slice processes the action and updates state
3. useSelector hook triggers re-render with new state
4. Component reflects the updated state

User Interaction → Action Dispatch → Reducer → State Update → UI Re-render

5. Responsive Design Strategy

The template uses a mobile-first responsive design:

• Base styles: Mobile (< 640px)
• sm: Small tablets (≥ 640px)
• md: Tablets (≥ 768px)
• lg: Desktop (≥ 1024px)
• xl: Large desktop (≥ 1280px)

Example responsive patterns:

<div className="flex flex-col sm:flex-row gap-4">
  {/* Stacks vertically on mobile, horizontally on tablet+ */}
</div>

<h1 className="text-3xl sm:text-4xl lg:text-5xl">
  {/* Progressive text sizing */}
</h1>

🚦 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone <repository-url>
   cd react-router-redux

2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Open your browser: Navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build production-ready application
• npm run start - Start production server
• npm run typecheck - Run TypeScript type checking

🐳 Docker Support

Build and run the application in a container:

# Build the Docker image
docker build -t react-router-redux .

# Run the container
docker run -p 3000:3000 react-router-redux

🎨 Customization

Adding New Routes

1. Create a new file in app/routes/:

   // app/routes/about.tsx
   export default function About() {
     return <div>About Page</div>;
   }

2. The route is automatically available at /about

Adding New Redux Slices

1. Create a slice file:

   // app/store/slices/userSlice.ts
   const userSlice = createSlice({
     name: "user",
     initialState: { name: "", email: "" },
     reducers: {
       setUser: (state, action) => {
         state.name = action.payload.name;
         state.email = action.payload.email;
       },
     },
   });

2. Add to store:

   // app/store/index.ts
   export const store = configureStore({
     reducer: {
       counter: counterReducer,
       user: userReducer, // Add here
     },
   });

Styling with Tailwind

Customize the design system in app/app.css:

@theme {
  --color-primary: #3b82f6;
  --font-sans: "Inter", ui-sans-serif, system-ui;
}

🧪 Testing Strategy

While not included in this template, recommended testing approaches:

• Unit Tests: Jest + React Testing Library
• Integration Tests: Test Redux actions and selectors
• E2E Tests: Playwright or Cypress for user flows

📦 Deployment

Static Deployment (Netlify, Vercel)

npm run build
# Deploy the `build/client` directory

Server Deployment (Node.js)

npm run build
npm run start

Docker Deployment

docker build -t react-router-redux .
docker run -p 3000:3000 react-router-redux

The containerized application can be deployed to any platform that supports Docker, including:

• AWS ECS
• Google Cloud Run
• Azure Container Apps
• Digital Ocean App Platform
• Fly.io
• Railway

🔧 Configuration

Environment Variables

Create .env file for environment-specific settings:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=My App

Access in code:

const apiUrl = import.meta.env.VITE_API_URL;

TypeScript Configuration

The tsconfig.json includes path mapping for clean imports:

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

This allows imports like:

import Counter from "~/components/Counter";
import { store } from "~/store";

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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 Router for the excellent routing solution
• Redux Toolkit for simplified state management
• Tailwind CSS for the utility-first CSS framework
• Vite for the fast build tool

---

Happy coding! 🎉