https://github.com/vishal-katta/react-vite-redux-tailwind-template

A React frontend template created to easily get started with developing a Frontend Web App using react, vite, redux, tailwind
https://github.com/vishal-katta/react-vite-redux-tailwind-template

css frontend html5 mui react redux tailwindcss template vite

Last synced: 3 months ago
JSON representation

A React frontend template created to easily get started with developing a Frontend Web App using react, vite, redux, tailwind

• Host: GitHub
• URL: https://github.com/vishal-katta/react-vite-redux-tailwind-template
• Owner: vishal-katta
• License: mit
• Created: 2024-02-23T19:43:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-01T18:15:45.000Z (about 1 year ago)
• Last Synced: 2025-03-25T22:51:50.631Z (4 months ago)
• Topics: css, frontend, html5, mui, react, redux, tailwindcss, template, vite
• Language: JavaScript
• Homepage:
• Size: 428 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React-Vite-Redux-Tailwind Template



![GitHub release](https://img.shields.io/github/v/release/Vishal-Katta/react-vite-redux-tailwind-template)

[![Build Status](https://github.com/Vishal-Katta/react-vite-redux-tailwind-template/actions/workflows/build.yml/badge.svg)](https://github.com/Vishal-Katta/react-vite-redux-tailwind-template/actions/workflows/build.yml)

[![GitHub license](https://img.shields.io/github/license/Vishal-Katta/react-vite-redux-tailwind-template)](https://github.com/Vishal-Katta/react-vite-redux-tailwind-template)

---

[![GitHub issues](https://img.shields.io/github/issues/Vishal-Katta/react-vite-redux-tailwind-template)](https://github.com/Vishal-Katta/react-vite-redux-tailwind-template/issues)

[![GitHub forks](https://img.shields.io/github/forks/Vishal-Katta/react-vite-redux-tailwind-template)](https://github.com/Vishal-Katta/react-vite-redux-tailwind-template/network)

[![GitHub stars](https://img.shields.io/github/stars/Vishal-Katta/react-vite-redux-tailwind-template)](https://github.com/Vishal-Katta/react-vite-redux-tailwind-template/stargazers)

![GitHub contributors](https://img.shields.io/github/contributors/Vishal-Katta/react-vite-redux-tailwind-template)

[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=Vishal-Katta_react-vite-redux-tailwind-template&metric=bugs)](https://sonarcloud.io/dashboard?id=Vishal-Katta_react-vite-redux-tailwind-template)

[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=Vishal-Katta_react-vite-redux-tailwind-template&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=Vishal-Katta_react-vite-redux-tailwind-template)

[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=Vishal-Katta_react-vite-redux-tailwind-template&metric=security_rating)](https://sonarcloud.io/dashboard?id=Vishal-Katta_react-vite-redux-tailwind-template)

[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=Vishal-Katta_react-vite-redux-tailwind-template&metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=Vishal-Katta_react-vite-redux-tailwind-template)

![GitHub commits since latest release ](https://img.shields.io/github/commits-since/Vishal-Katta/react-vite-redux-tailwind-template/latest/main)



## Introduction

This project relies on several external libraries and frameworks to enhance development efficiency, improve UI/UX, and streamline state management.

![Project Stack](/public/ProjectStack.png)

You can checkout chrome's lighthouse report while running the build! 😏

## Installation

To clone the project, Run the following command in your terminal:

```bash

git clone https://github.com/Vishal-Katta/react-vite-redux-tailwind-template.git

```

## Running the Server

To start the development server, you can use npm scripts. Run the following command in your terminal:

```bash

cd react-vite-redux-tailwind-template

npm install

npm start

```

## Dependencies

A list of dependencies used in the project, along with brief explanations for each.

- ![React](https://img.shields.io/badge/React-_-61DAFB?logo=react)  

  React is a JavaScript library for building user interfaces, developed and maintained by Facebook.

- ![React DOM](https://img.shields.io/badge/React%20DOM-_-61DAFB?logo=react)  

  React DOM is the package responsible for rendering React components in the DOM.

- ![React Router DOM](https://img.shields.io/badge/React%20Router%20DOM-_-CA4245?logo=react-router)  

  React Router DOM provides declarative routing for React applications, enabling navigation between different components.

- ![Redux Toolkit](https://img.shields.io/badge/Redux%20Toolkit-_-purple?logo=redux)  

  Redux Toolkit is the official toolset for efficient Redux development, offering simplified Redux setup and improved developer experience.

- ![React Redux](https://img.shields.io/badge/React%20Redux-_-764ABC?logo=redux)  

  React Redux is the official React bindings for Redux, allowing React components to interact with the Redux store.

- ![Axios](https://img.shields.io/badge/Axios-_-blue?logo=axios)  

  Axios is a promise-based HTTP client for making HTTP requests from the browser.

- ![Material UI](https://img.shields.io/badge/Material%20UI-_-blue?logo=material-ui)  

  Material UI is a popular React UI framework that provides pre-designed React components following the Material Design guidelines.

- ![Tailwind CSS Forms](https://img.shields.io/badge/Tailwind%20CSS%20Forms-_-blue?logo=tailwind-css)  

  Tailwind CSS Forms provides styles and utilities for styling forms in Tailwind CSS.

- ![React Toastify](https://img.shields.io/badge/React%20Toastify-_-blue?logo=react)  

  React Toastify is a notification library for React applications, providing customizable toast notifications.

- ![Emotion](https://img.shields.io/badge/Emotion-_-purple?logo=emotion)  

  Emotion is a popular CSS-in-JS library for styling React components.

- ![Material UI Icons](https://img.shields.io/badge/Material%20UI%20Icons-_-orange?logo=material-ui)  

  Material UI Icons provides a collection of high-quality icons for use with Material-UI components.

- ![React Icons](https://img.shields.io/badge/React%20Icons-_-blue?logo=react)  

  React Icons provides a collection of popular icon libraries as React components for easy integration.

- ![Redux Logger](https://img.shields.io/badge/Redux%20Logger-_-764ABC?logo=redux)  

  Redux Logger is a middleware for Redux that logs actions and state changes, useful for debugging Redux applications.

- ![Redux Thunk](https://img.shields.io/badge/Redux%20Thunk-_-764ABC?logo=redux)  

  Redux Thunk is a Redux middleware that allows dispatching asynchronous actions, enabling more complex logic in Redux.

- ![Tailwind Scrollbar Hide](https://img.shields.io/badge/Tailwind%20Scrollbar%20Hide-_-blue?logo=tailwind-css)  

  Tailwind Scrollbar Hide is a utility for hiding scrollbars in Tailwind CSS, useful for customizing scrollbar appearance.