Overview of Project

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 apython(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)

Link to Code

https://github.com/emacliam/REDIS-HACKERTHON---CRM

Languages Used:

Javascript(Vue,js) html Tailwindcss Python

Screen screenshots

Landing Page

Dashboard Page

Chat Page

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

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

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

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

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

Deployment

We recommend running this project Locally following the steps above

License

APACHE

More Information about Redis Stack

Here some resources to help you quickly get started using Redis Stack. If you still have questions, feel free to ask them in the Redis Discord or on Twitter.

Getting Started

1. Sign up for a free Redis Cloud account using this link and use the Redis Stack database in the cloud.
2. Based on the language/framework you want to use, you will find the following client libraries:
   • Redis OM .NET (C#)
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Node (JS)
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Python
     • Watch this getting started video
     • Follow this getting started guide
   • Redis OM Spring (Java)
     • Watch this getting started video
     • Follow this getting started guide

The above videos and guides should be enough to get you started in your desired language/framework. From there you can expand and develop your app. Use the resources below to help guide you further:

1. Developer Hub - The main developer page for Redis, where you can find information on building using Redis with sample projects, guides, and tutorials.
2. Redis Stack getting started page - Lists all the Redis Stack features. From there you can find relevant docs and tutorials for all the capabilities of Redis Stack.
3. Redis Rediscover - Provides use-cases for Redis as well as real-world examples and educational material
4. RedisInsight - Desktop GUI tool - Use this to connect to Redis to visually see the data. It also has a CLI inside it that lets you send Redis CLI commands. It also has a profiler so you can see commands that are run on your Redis instance in real-time
5. Youtube Videos
   • Official Redis Youtube channel
   • Redis Stack videos - Help you get started modeling data, using Redis OM, and exploring Redis Stack
   • Redis Stack Real-Time Stock App from Ahmad Bazzi
   • Build a Fullstack Next.js app with Fireship.io
   • Microservices with Redis Course by Scalable Scripts on freeCodeCamp