Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 months ago
JSON representation

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

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.