https://github.com/react-declarative/cra-template-firebase-crm

The most advanced CRM Boilerplate for React + Firebase. Contains snippets for automatic state management in a declarative style
https://github.com/react-declarative/cra-template-firebase-crm

boilerplate crm datagrid declarative-ui dependecy-injection firebase functional-programming material-ui mobx mui react

Last synced: about 1 month ago
JSON representation

The most advanced CRM Boilerplate for React + Firebase. Contains snippets for automatic state management in a declarative style

• Host: GitHub
• URL: https://github.com/react-declarative/cra-template-firebase-crm
• Owner: react-declarative
• License: mit
• Created: 2023-06-03T16:15:57.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-06-04T02:43:47.000Z (over 1 year ago)
• Last Synced: 2024-05-04T00:17:50.725Z (8 months ago)
• Topics: boilerplate, crm, datagrid, declarative-ui, dependecy-injection, firebase, functional-programming, material-ui, mobx, mui, react
• Language: TypeScript
• Homepage:
• Size: 1.88 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⚛️ cra-template-firebase-crm

> Contains the most advanced Firebase CRM starter kit which you ever seen!

[![npm](https://img.shields.io/npm/v/cra-template-firebase-crm.svg?style=flat-square)](https://npmjs.org/package/cra-template-firebase-crm)

![screenshot](./docs/screenshot.gif)

## Contribute

> [!IMPORTANT]

> Made by using [react-declarative](https://github.com/react-declarative/react-declarative) to solve your problems. **⭐Star** and **💻Fork** It on github will be appreciated

## Usage

```bash

yarn create react-app --template cra-template-firebase-crm .

```

or

```bash

npx create-react-app . --template=firebase-crm

```

## What's inside

1. [TypeScript](https://www.typescriptlang.org/)

2. [MUI](https://mui.com/)

3. [Mobx](https://mobx.js.org/)

4. [tss-react](https://www.tss-react.dev/)

5. [react-declarative](https://www.npmjs.com/package/react-declarative)

6. [firebase](https://www.npmjs.com/package/firebase)

## Code sample

```tsx

import { useState } from 'react';

import {

    FetchView,

    RecordView,

    ActionTrigger,

    useReloadTrigger,

    IActionTrigger,

} from 'react-declarative';

import ioc from '../../lib/ioc';

interface ITodoOnePageProps {

    id: string;

}

const actions: IActionTrigger[] = [

    {

        label: 'Mark as complete',

        action: 'complete-action',

    }

];

export const TodoOnePage = ({

    id,

}: ITodoOnePageProps) => {

    const { reloadTrigger, doReload } = useReloadTrigger();

    

    const [search, setSearch] = useState('');

    const state = async () => await ioc.todoDbService.findById(id);

    const handleAction = async (action: string) => {

        if (action === 'complete-action') {

            await ioc.todoDbService.update(id, {

                completed: true,

            });

            doReload();

        }

    };

    return (

        <>

            

            

                {(data) => (

                     setSearch(search)}

                        search={search}

                        data={data}

                    />

                )}

            

        >

    );

};

export default TodoOnePage;

```