https://github.com/react-declarative/cra-template-appwrite

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

appwrite baas backend backend-as-a-service create-react-app declarative declarative-programming dependency-injection docker firebase fp javascript mobx oop react self-hosted selfhosted serverless typescript web-tools

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/react-declarative/cra-template-appwrite
• Owner: react-declarative
• License: mit
• Created: 2022-12-31T19:56:05.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-30T10:31:02.000Z (7 months ago)
• Last Synced: 2024-09-27T06:41:29.836Z (3 months ago)
• Topics: appwrite, baas, backend, backend-as-a-service, create-react-app, declarative, declarative-programming, dependency-injection, docker, firebase, fp, javascript, mobx, oop, react, self-hosted, selfhosted, serverless, typescript, web-tools
• Language: TypeScript
• Homepage:
• Size: 4.16 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⚛️ cra-template-appwrite

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

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

![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-appwrite .

```

or

```bash

npx create-react-app . --template=appwrite

```

## 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. [appwrite](https://www.npmjs.com/package/appwrite)

7. [local-web-server](https://www.npmjs.com/package/local-web-server)

## 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;

```