Customer Relationship Management
Tags: redishackathon
Published: 2022-08-29 20:00:00

## Overview of My Submission

## STACKER

Is a software that helps businesses to easily track communications between customer service agents and clients.It uses ``REDIS`` to store data(issues submitted by clients). It is integrated with a chat developed using ``socketIO``. This Project comes with a`` python(Flask) API `` and a ``Vue,Vite Application``.The user interface was built using ``tailwindCss``.

### Basic Functionality:

1. As a client, you create an account or register.
2. Access the dashboard
3. Create an Issue(the issue will be added to a queue)
4. On the customer service agent side.
5. Login to the system.
6. You will see a dashboard with a list of Issues to be attended.
7. Those that are already being attended by other agents, will be indicated in red.
8. Attend an issue with a green background.
9. To attend an issue, click go to chat. It will redirect you to a chat where you can communicate with a client.
10. The client will be notified when the issue is being attended.
11. If an issue has been completed, it is CLOSED.
12. If it is under investigation, it is ARCHIVED.
13. Otherwise, it is left OPEN / in PROGRESS.
14. On the dashboard, the client and the customer service agent will be able to see their issues -open,closed and archived.


### Why this?:

We want to provide a simple way  for customer representative agents to handle multiple clients at the same time seemlessly, using a chat and a queuing system.


### Where we used redis.
#### ((as a primary database using ``RedisJson`` Module through ``Redis OM Python``))

-  Storage of chat information - messages
-  Storage of Issues
-  Storage of user data

## Submission Category:

Wacky Wildcards

## Overview video (Optional)

{% embed https://youtu.be/jEBKR6g7VHs %}

## Link to Code

{% embed https://github.com/emacliam/REDIS-HACKERTHON---CRM %}

## Languages Used:

``Javascript(Vue,js)``  ``html``  ``Tailwindcss``   ``Python``

## Screen screenshots

### Landing Page


![Customer Relationship Management Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msyi0g9wvf5oskmz6vxy.png)

### Dashboard Page


![Customer Relationship Management Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80sglronmn9jo2d0v2da.png)

### Chat Page


![Customer Relationship Management Chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5mr6ecgik2fva7i7p3j.png)


## How it works

### How the data is stored:

Data is stored using ``RedisJSON`` module in DB and ``RedisOM Python`` as a client library

- Store (Add):
          `` model_instance = ModelName(key1=value1, key2=value2, ..., keyN=valueN) ``
          `` model_instance.save() ``

## Code Example:Database Schema

### Issues

```python
class Issue(EmbeddedJsonModel, JsonModel):
    subject: Optional[Optional[str]] = Field(index=True)
    description: Optional[str] = Field(index=True)
    issue_status: Optional[str] = Field(index=True)
    sender: Optional[str] = Field(index=True)
    created_at: Optional[str] = Field(index=True)
    record_status: Optional[str] = Field(index=True)
```

### Messages

```python
class Message(JsonModel):
    issue: Optional[Optional[str]] = Field(index=True)
    sender: Optional[str] = Field(index=True)
    sender_data: User
    issue_data: Issue
    message_body: Optional[str] = Field(index=True)
```
### User

```python
class User(EmbeddedJsonModel, JsonModel):
    first_name: Optional[str] = Field(index=True)
    last_name: Optional[str] = Field(index=True)
    role: Optional[str] = Field(index=True)
    created_at: Optional[str] = Field(index=True)
    record_status: Optional[str] = Field(index=True)
```

### How the data is accessed:

- Get:
         `` model_instance = ModelName.find((ModelName.field1=="value1")&(ModelName.field2=="value2")) `` - to filterby field1's and field2's values.

- Update:
        ``model_instance = ModelName().get(model_instance_id)``
        ``model_instance.field1 = new_value1``
        ``model_instance.field2 = new_value2``
        ``model_instance.fieldN = new_valueN``
        ``model_instance.save()``

## Code Example: How to access/get user data
```python
def get_users():
    try:
        users = User.find(User.record_status=="ALIVE").all()
        users_list = []

        for user in users:
            user_dict = {}

            for x in user:
                user_dict[x[0]] = x[1]

            users_list.append(user_dict)

        return jsonify({
            "status_code": "200",
            "status": "success",
            "message": "users_retrieved_ok",
            "data": users_list
        })

    except:
        traceback.print_exc()
        return jsonify({
            "status_code": "500",
            "status": "error",
            "message": "failed_to_retrieve_users",
            "data": [],
        })

```

## How to run it locally?

### Backend
* Prerequisites:
``Python 3.8.2``
* Local Installation Steps:

```
- clone repo
- access folder titled "CRM BACKEND"
- add ".env" file in the root directory of the project and add the line:
        -> "REDIS_OM_URL=[URL_TO_REDIS_CLOUD]"
- create and activate virtual environment in the root directory using the command (on Windows 10 cmd):
        -> "python -m venv [ENVIRONMENT_NAME]"
        -> "[ENVIRONMENT_NAME]\scripts\activate"
-install project packages in the active environment using the command (on Windows 10 cmd):
        -> "pip install -r requirements.txt"
    -run flask API using the command (on Windows 10 cmd):
        -> "flask run"
    -it should give an output like:
        * Debug mode: on
        * Running on localhost:[PORT_NUMBER]
        * Restarting with stat
        * Debugger is active!
        * Debugger PIN: [DEBUGGER_PIN]
```

### Frontend
* Prerequisites:
``Node.js >= 14``
* Local Installation Steps:

```
- clone repo
- access folder titled "CRM FRONTEND"
- run "YARN INSTALL"
- In the project folder, there is a file "config.js".change url to your backends server url.
- run "YARN DEV" to run the project
- To expose host on a network run with --host flag eg:"YARN DEV --host"
```

### Prerequisites

``Node.js >= 14`` `` Python 3.8.2`` ``Redis Cloud Account``

### Additional Resources / Info
Architecture

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5prah8dlc25yfpvivub.png)

Model


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl0smi6gjiwwkbcow2ws.png)



### Collaborators
Role: Python Developer
*On this Project, he developed a python Api using flask*

{% embed https://dev.to/valentinesean22 %}



Me
Role: Front End Developer
*On this project, i developed a vue.js application*


## Deployment

We recommend running this project Locally following the steps above

### License
```
APACHE
```