https://github.com/nata-kostina/chat-window

This is a simple SPA that displays a chat window. The user can send the message. The app simulates someone else's messages every 8 seconds.
https://github.com/nata-kostina/chat-window

context-api framer-motion react sass typescript

Last synced: 6 days ago
JSON representation

This is a simple SPA that displays a chat window. The user can send the message. The app simulates someone else's messages every 8 seconds.

• Host: GitHub
• URL: https://github.com/nata-kostina/chat-window
• Owner: nata-kostina
• Created: 2023-08-07T14:40:36.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-08-07T16:14:42.000Z (over 1 year ago)
• Last Synced: 2023-08-07T17:14:16.765Z (over 1 year ago)
• Topics: context-api, framer-motion, react, sass, typescript
• Language: TypeScript
• Homepage:
• Size: 1.73 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 💬 Chat Window

This is a simple SPA that displays a chat window. The user can send the message. The app simulates someone else's messages every 8 seconds.

## Demo

Here you can see the app: [https://chat-window-by-natallia.netlify.app/](https://chat-window-by-natallia.netlify.app/)

## Features

- send messages (by typing Enter and by clicking Send button);

- add emoji to message;

- delete message;

- copy message text to clipboard;

- react on messages (❤️, 👍, 👎);

- simulation of someone else's typing;

- scroll to bottom;

- responsive design (mobile-first approach);

- animations;

- sounds;

- error handling;

## Built With  

- [Typescript](https://www.typescriptlang.org/) - a strongly typed programming language that builds on JavaScript.

- [React](https://reactjs.org/) - a JavaScript library for building user interfaces.

- [Framer Motion](https://www.framer.com/motion/) - animation library.

- [SASS](https://sass-lang.com/) - a CSS pre-processor.

## Screenshots





## Getting Started

To clone and run this application, you'll need [Git](https://git-scm.com/) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com/)) installed on your computer. From your command line:

```

# Clone this repository

$ git clone https://github.com/nata-kostina/chat-window.git

# Install dependencies

$ npm install

  

# Run the app

$ npm run start

# Build the app

$ npm run build

```

The app will be run at [http://localhost:3000/](http://localhost:3000/)

## Contacts

- Email: [email protected]

- LinkedIn: [https://www.linkedin.com/in/nata-kostsina/](https://www.linkedin.com/in/nata-kostsina/)

- Telegram: @kostinata