@engingokmen/chat-cra
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

React chat application

This is a simple chat application that can send and receive messages via its interface. It also provides some special features like image display, combo box selection, and auto-complete.

Demo

Go to demo

What this app does

  1. gets messages and displays on the screen
  2. sends new message
  3. displays image
  4. displays a combo box with options
  5. auto-complete from a default list

How to run

  1. Clone the repository
  2. Install dependencies with npm install
  3. Run npm start to start the development server
  4. Open http://localhost:3000 to view it in the browser.

Wireframe of the app

Go to wireframe

Core functionality

  • Chat interface

    • sends and receieves messages
  • Messages inside a scrollable area

  • Text input area

Special features

  • Image display

  • Combo box selection

    • "/select"
    • displays a combobox with at least 5 options
    • selected option is sent as a message
  • Auto-complete

    • A list of at least 20 common chat phrases or words
    • As the user types, suggest completions from this list. One example is "hel"
  • Responsive layout

    • mobile and desktop
    • CSS flexbox for layout management

Technologies

  • React with typescript which is suitable to create a reusable chat app interface for the client side.
  • State management could be handled by React context and reducer for this project.
  • Styled-components is used for styling which is one of the most popular CSS-in-JS libraries in the Github community. Styled-components Github
    • It isolates component styles. So makes it easier to maintain and debug.

Readme

Keywords

none

Package Sidebar

Install

npm i @engingokmen/chat-cra

Weekly Downloads

0

Version

0.1.4

License

none

Unpacked Size

790 kB

Total Files

15

Last publish

Collaborators

  • engingokmen