thefoodotbar / web-chat-frontend

Livechat

A browser extension that allows you to chat with people in your community browsing the same pages.

LiveChat

A browser extension that allows you to chat with people in your community browsing the same pages.
Explore the docs »

Project Setup · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgements

About The Project

Livechat is a browser extension and a chat application that enables community of enthusiasts discuss and share ideas on a topic. Every website or domain you visit in the browser has a unique chat room. You can discuss, share ideas, deliberate, simply talk to any one that visits the website.

It is a fullstack serverless application that uses React js and AWS services

Built With

This section lists any major frameworks and technologies were used in building LiveChat

• AWS AppSync
• Amazon DynamoDB
• Amazon Cognito
• React js
• CDK CLI

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

Thes are prerequisites to set up the project and get up and running locally.

• yarn
• Setup an AWS account.

Installation

Deploying the back end

1. Clone the back-end repo

git clone https://github.com/full-stack-serverless/cdk-appsync-chat.git

2. Change into the cdk-appsync-chat directory

3. Install dependencies in main folder:

npm install

# or

yarn

3. Deploy to AWS

cdk deploy

Once the project has been deployed, you'll be given the resources needed to configure the client-side React application.

Setting up the front end ( & installing the chrome extension)

1. Clone the client application

git clone [e-mail]:thefoodotbar/web-chat-frontend.git

2. Change into the client directory:

cd web-chat-frontend

3. Install the dependencies

yarn

4. create a file aws-exports.jsin the src directory

touch src/aws-exports.js

5. Update this file aws-exports.js with the outputs from deploying the backend after running cdk deploy

const config = {
  Auth: {
    region: '',
    userPoolId: '',
    userPoolWebClientId: '',
  },
  aws_appsync_graphqlEndpoint:
    '',
  aws_appsync_region: '',
  aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS',
};

export default config;

6. Run the application with the command

yarn watch

7. Now in the browser, open chrome and navigate to the extensions tab (chrome://extensions/)

8. On the extreme right, Turn on Developer mode

9. On the left, choose the Load unpacked and select the build folder from this project

10. In the browser, select this React Web Extension Boilerplate from the list of extensions. and chat away

Usage

Click on extensions and choose the chat extension. The chat up will popup.

Roadmap

See the open issues for features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contributors

• thefoodotbar

Made possible by