React-JGest Template

This is a React template optimized for rapid development, including Material UI, state management with Zustand, and pre-configured API services. It is designed to be used as a solid foundation for new projects.

🚀 Project Configuration

1. Configure the API

To allow the project to communicate with your backend, you must configure the base URL in the .env file. You must also configure the proxy in the vite.config.ts file.

VITE_APP_API_URL='https://your-api.com/api'

2. Installation and Usage

npx create-jgest-react-template ProjectName
cd ProjectName
npm install
npm run dev

🏗️ Folder Structure

Within template/src, the structure is organized by responsibilities:

• src/components: Reusable visual components.
  • main/: Specific components for the main layout.
  • shared/: Cross-cutting components (filters, modals, etc.).
• src/hooks: Reusable logic and custom hooks.
  • api/: Hooks for making HTTP requests.
  • shared/: General utility hooks.
• src/providers: Context providers (Notifications, Themes, etc.).
• src/services: Service layer for external communication.
• src/store: Global state management (Zustand).
• src/pages & src/modules: Views and modular logic per route.

⚓ Hooks

🌐 API Hooks

Location: src/hooks/api/

Our hooks (useApiGet, useApiPost, useApiPut, useApiPatch, useApiDelete) facilitate reactive interaction with endpoints.

Implementation Example (useApiGet):

import useApiGet from './hooks/api/useApiGet';

const MyComponent = () => {
    const { response, loading, error, fetchData } = useApiGet<User[]>('/users');

    useEffect(() => {
        fetchData();
    }, [fetchData]);

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error}</p>;

    return (
        <ul>
            {response?.map(user => <li key={user.id}>{user.name}</li>)}
        </ul>
    );
};

🛠️ Shared Hooks

Location: src/hooks/shared/

• useFilter: Utility for filtering arrays (equalTo, moreThan, lessThanIndex, etc.).
• useNotification: Access to the global notification system.
• useSetTimezone: Date formatting to the local timezone (Europe/Madrid).

useFilter Example:

const { equalTo, inRange } = useFilter();
const filteredData = equalTo({ dataArray: items, key:'price', filterBy: 'active' });
const filteredRangeData = inRange({ dataArray: items, key:'price', filterMin: 1, filterMax: 100 });

🧩 Featured Components

SelectMultiple

Location: src/components/shared/Filters/SelectMultiple.tsx

An advanced multi-select integrated with Formik and Material UI, displaying selections as removable Chips.

Implementation Example:

<SelectMultiple
    name="selectedUsers"
    label="Users"
    formik={formik}
    options={users}
    getOptionValue={(u) => u.id}
    getOptionLabel={(u) => u.name}
    loading={loading}
/>

MyModal & MyPopover

Location: src/components/shared/Overscreens/

Base components for overlays with consistent styles (background blur, smooth transitions).

MyModal Example:

<MyModal onClose={handleClose} minWidth={600}>
    <h2>Modal Title</h2>
    <p>Important content here.</p>
</MyModal>

🔌 Services

We offer two approaches for interacting with APIs, designed for different use cases.

1. ApiServiceSimple (Global Context)

It is a single instance (singleton) called api. Ideal for quick and global requests where specific configuration per endpoint is not required.

Implementation:

import { api } from './services/ApiServiceSimple';

const data = await api.get<MyType>('/users');

2. ApiServiceExtensible (Modular Context)

It is a base class that you can extend or instantiate. Ideal for creating specific services for a module that requires its own header configuration, credential handling, or custom response parsing.

Implementation:

import { ApiService } from './services/ApiServiceExtensible/ApiService-Class';

// Direct instantiation with specific configuration
const userService = new ApiService<User>('/users', true);
const users = await userService.get();

⚖️ Functional Differences

• Singleton (api): Direct and simple access. Uses the default Axios configuration. Perfect for 80% of common calls.
• Extensible Class (ApiService): Allows for Object-Oriented Programming. You can create a UserApiService extends ApiService class and override methods like parseResponse to transform data before it reaches the component, or manage different base URLs and credentials independently.

Contact

For any questions or suggestions: [email protected]