React Redux Tailwind

nelsonvu
4

Download

React Redux Tailwind Project

This project is a React application using Redux for state management and Tailwind CSS for styling.

Getting Started
- Prerequisites
- Installation
Folder Structure
Redux Flow
Technologies Used
Contributing
- Submitting a Pull Request (PR)
- Commit Message Guidelines

Getting Started

Prerequisites

Before running the project, ensure you have the following software installed:

Node.js
npm

Installation

Follow these steps to install project dependencies:

# Install dependencies
npm install
# Generate css types
npm run generate-css-types
# Run project
npm run dev

Folder Structure

The project follows the following folder structure:

.
├── dist                                    # Compiled files
├── public                                  # Public assets and entry HTML file
├── src                                     # Source files
│   ├── assets                              # Project assets
│   ├── api                                 # API-related endpoints
│   ├── handlers                            # Controller layers
│   │   ├── *
│   │   │   ├── *.controller.ts             # API-related services
│   │   │   └── *.reducer.ts                # Redux reducers
│   ├── repositories                        # Repositories layers
│   ├── components                          # Reusable React components
│   ├── modules                             # Reusable React modules
│   ├── templates                           # Reusable React templates (use for pages rendering)
│   ├── pages                               # Top-level components representing different pages or views
│   ├── react-routes                        # React routes configuration
│   ├── redux                               # Redux store configuration
│   ├── helpers                             # Helpers functions
│   └── utils                               # Utilities functions
├── .env.example                            # Secret environment
└── README.md

Redux Flow

Technologies Used

The main technologies used in this project are:

ReactJS: JavaScript library for building user interfaces.
Redux: State management library for JavaScript apps.
Tailwind CSS: Utility-first CSS framework.

Contributing

Submitting a Pull Request (PR)

Make your changes in a new git branch
```
git checkout -b my-fix-branch dev
```

Follow these steps before committing your changes

# Verify linting issues
npm run lint
# Format code
npm run format:write

Commit Message Guidelines

Commit Message Format

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

Type
- build: Changes that affect the build system or external
- chore: Updating tasks etc; no production code change
- docs: Documentation only changes
- feat: A new feature
- fix: A bug fix
- perf: A code change that improves performance
- refactor: A code change that neither fixes a bug nor adds a feature
- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- test: Adding missing tests or correcting existing tests
Scope
- api: for changes made on api directory
- handler: for changes made on handlers directory
- repository: for changes made on repositories directory
- helper: for changes made on helpers, utils directory
- ui: for changes made on components, modules, templates, pages directory
- redux: for changes made on redux directory
- route: for changes made on react-routes directory
- other: for changes made on other directory

Top categories