A React + Redux Toolkit + Saga template for modern Frontend projects, powered with TypeScript and styled using SCSS and Tailwind.

🚀 Getting Started

Run the following command

npx new-react-redux-ts-app

Give a name to your new app and start developing!

Run your app

pnpm dev

You should see the Default Home component.

https://github.com/user-attachments/assets/29225ead-ce0c-48cf-afb2-0aac3a1fdd54

⚠️⚠️⚠️ If the button click crashes the app

In order to use the API Call you need to create an ENV file in your root folder. (OTHERWISE THE BUTTON CLICK WILL CRASH)

.env.development   file content

# PLACEHOLDER API URL
VITE_API_URL=https://jsonplaceholder.typicode.com/

🧪 Running tests

pnpm test

pnpm test --coverage

All the test should be located inside src/ folder and have .test. in the extension name.

📁 Project Structure

src/
├── App.module.scss
├── App.tsx
├── index.css
├── main.tsx
├── setupTests.ts
├── vite-env.d.ts
├── __mocks__/
│   └── fileMock.js
├── assets/
│   └── img/
│       create-react-redux-ts-app-logo.png
├── design-system-ui/ # Button, Input, Dropdown, Checkbox, according to your Branding.
├── components/ # Components that would be implemented in views/ folder
├── hooks/ # Custom hooks
├── routes/ # Routes (Normally Components from views folder)
│   └── index.tsx
├── store/
│   ├── api.tsx # API Config including auth
│   ├── hooks.tsx # Store hooks useAppDispatch/useAppSelector
│   ├── index.ts
│   ├── selectors.ts # All selectors from redux store
│   ├── services/ # API Calls for respective slices
│   │   └── Users.tsx # API Calls for Users
│   ├── slices/ # Each slice has 4 files for the redux store
│   │   ├── counter/
│   │   │   ├── actions.tsx
│   │   │   ├── reducers.tsx
│   │   │   ├── sagas.tsx
│   │   │   └── types.tsx
│   │   └── users/
│   │       ├── actions.tsx
│   │       ├── reducers.tsx
│   │       ├── sagas.tsx
│   │       └── types.tsx
├── styles/
│   └── colors.scss # Color palette for your Branding
├── types/ # All custom types
│   ├── counter.d.ts
│   ├── index.tsx
│   ├── types.d.ts
│   └── users.d.ts
├── utils/ # Formatters, stateless functions, ex: formatDate.tsx
├── views/ # Views that would be integrated into the router
│   ├── Home.test.tsx # Unit testing always in the same folder as the Component/Function
│   └── Home.tsx

💻 Tech Stack

• Node 22.15.0
• pnpm 10.10.0
• Vite 6.3.5 + TypeScript 5.8.3
• Tailwind CSS 4.1.6
• Redux (Redux Toolkit 2.8.1)
• Sass 1.87.0
• Jest 29.7.0
• React Router 7.6.0
• Redux Saga 1.3.0
• Axios 1.9.0

📄 License

MIT License

Copyright (c) (2025) Alejandro De La Rocha

Permission is hereby granted, free of charge, to any person obtaining a copy