Re4cto - React Chat Client 💬

React.js + Vite + TypeScript + React Bootstrap = Re4cto

What is Re4cto?

Re4cto is React based chat client with the combination of four popular development technologies; React, Vite, TypeScript, Bootstrap.

Re4cto features:

• Uses functional programming as recommended by the current React documentation.
• Uses custom fetch hook with error provider for fetch requests so fetch errors handled with simple bootstrap toast element.
• Authentication for fetch hooks is based on Bearer token stored in the browser's local storage but can be converted to cookie based.
• Uses Server Send Events(SSE) mechanism to retrieve messages so it can give live updates to users like WebSockets without backend server changes needed.
• Includes a Dockerfile to build for SaaS platforms.

Build demo is available on: https://src.1b4.dev/re4cto/ or on GitHub Pages

username:react (or) docker password:react (or) reacton12

⚠️ Important Note: This app does not contains backend, so you need to connect or create backend to use Re4cto.

Getting Started 🚀

Prerequisites

• Node.js (v20+ recommended)
• npm/yarn
• Docker (optional for containerization)

Installation

1. Clone the repository

   git clone https://github.com/1b4dev/Re4cto.git
   
   cd Re4cto

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   You can simply edit .env file to connect your backend. If you don't have backend, you can use the currently connected backend for testing and development purposes. Please don't forget the edit fetch links on api request according to your backend.

   # Edit .env file to point to your backend API
   VITE_API_URL=https://kern.1b4.dev/re4cto/api/

4. Run the app

   npm run dev
   # or
   yarn dev

Configuration ⚙️

To connect your own backend:

1. Update VITE_API_URL in .env
2. Modify API endpoints
3. Adjust authentication method in .env if you want to use cookie based auth

   src/page/components/hooks/useApi.tsx 
   # Switch between token/cookie auth basically supported in API calls. You also need to adjust Login.tsx and other token releated files if you want to use cookie method.

Build & Deployment 🛠️

Please note that when you building Re4cto you need to adjust app base because of how Vite works. Currently app base set to yourdomainname.tld/re4cto/

# Create production build
    npm run build

# Deploy
    npm run deploy

# Docker build
    docker build -t re4cto .

Contribution

Contributions are welcome! Please follow these steps:

• Fork the repository

• Create your feature branch

  git checkout -b feature/new

• Commit your changes

  git commit -m 'Commit new feature'

• Push to the branch

  git push origin feature/new

• Open a Pull Request

License 📄

Apache 2.0 Licence - See the LICENSE file for details