Skip to content

Repository files navigation

Here’s the final version of your README with the repository URL added:


React + Vite + Redux + Mantine + Tailwind Project

This project is a React application powered by Vite, Redux Toolkit, Mantine UI components, and Tailwind CSS for rapid and modern UI development. Below is the tech stack, directory structure, and other essential details.

Table of Contents

  1. Project Overview
  2. Tech Stack
  3. Project Structure
  4. Installation
  5. Available Scripts
  6. Contributing
  7. License

Project Overview

This project is built with modern web technologies to ensure fast development and responsive design. The application integrates Mantine for UI components, Tailwind CSS for utility-first styling, Redux Toolkit for state management, and React Router DOM for navigation.


Tech Stack

  • React: A JavaScript library for building user interfaces.
  • Mantine: A React component library for building modern and responsive UIs.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • Redux Toolkit: A set of tools for efficient Redux development, including RTK Query for data fetching.
  • React Router DOM: Declarative routing for React applications.
  • Redux Persist: A library to persist and rehydrate the Redux store.
  • redux-persist-transform-encrypt: Provides encryption for Redux-persisted data.
  • Vite: A fast build tool and development server for modern web projects.

Plugins


Project Structure

The project follows a standard React + Redux architecture. Below is the folder structure:

├── node_modules/
├── public/
├── src/
│   ├── assets/               # Static assets like images
│   ├── hooks/                # Custom React hooks
│   ├── layout/               # Layout components
│   ├── pages/                # Page-specific components
│   ├── component/
│   │   ├── common/           # Common reusable components
│   │   ├── dashboards/       # Dashboard related components
│   ├── redux/                
│   │   ├── reducers/         # Redux reducers
│   │   └── store.jsx         # Redux store configuration
│   ├── routes/               # Route definitions and navigation logic
│   ├── service/              # External service integrations (API calls)
│   ├── theme/                # Theme configurations (e.g., Mantine)
│   ├── utils/                # Utility functions and helpers
│   ├── App.jsx               # Main App component
│   ├── index.css             # Global CSS styles
│   ├── main.jsx              # React entry point
├── .gitignore
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.js
└── README.md

Installation

Step 1: Clone the repository

git clone https://github.com/mrvasani48/react-mantine-tailwind-redux.git

Step 2: Navigate into the project folder

cd react-mantine-tailwind-redux

Step 3: Install dependencies

npm install

Step 4: Run the development server

npm run dev

The application will be available at http://localhost:3000 by default.


Available Scripts

npm run dev

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. Hot reloading is enabled.

npm run build

Builds the app for production in the dist folder. It optimizes the build for best performance.

npm run preview

Locally preview the production build.


Contributing

Feel free to submit pull requests to contribute to this project. Please adhere to the Code of Conduct and use ESLint for code formatting.


License

This project is licensed under the MIT License.


About

react+mantine-tailwind+redux

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages