From 7b3107eb77c344bf3cfb604f70023278ebffc7ba Mon Sep 17 00:00:00 2001 From: Florin Pop Date: Tue, 26 Mar 2019 08:12:05 +0200 Subject: [PATCH] new project: Chat App --- Projects/Chat-App.md | 38 ++++++++++++++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 39 insertions(+) create mode 100644 Projects/Chat-App.md diff --git a/Projects/Chat-App.md b/Projects/Chat-App.md new file mode 100644 index 00000000..88895fd4 --- /dev/null +++ b/Projects/Chat-App.md @@ -0,0 +1,38 @@ +# Chat App + +**Tier:** 3-Advanced + +Real-time chat interface where multiple users can interact with each other by sending messages. + +As a MVP(Minimum Viable Product) you can focus on building the Chat interface. Real-time functionality can be added later (the bonus features). + +## User Stories + +- [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application +- [ ] User can see an `input field` where he can type a new message +- [ ] By pressing the `enter` key or by clicking on the `send` button the text will be displayed in the `chat box` alongside his username (e.g. `John Doe: Hello World!`) + +## Bonus features + +- [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets) +- [ ] When a new User joins the chat, a message is displayed to all the existing Users +- [ ] Messages are saved in a database +- [ ] User can send images, videos and links which will be displayed properly +- [ ] User can select and send an emoji +- [ ] Users can chat in private +- [ ] Users can join `channels` on specific topics + +## Project Board + +You can track your progress by cloning this [TBD](url-goes-here) + +## Useful links and resources + +- [Socket.io](https://socket.io) +- [How to build a React.js chat app in 10 minutes - article](https://medium.freecodecamp.org/how-to-build-a-react-js-chat-app-in-10-minutes-c9233794642b) +- [Build a chat application like Slack - React / JavaScript Tutorial - Youtube](https://www.youtube.com/watch?v=a-JKj7m2LIo) +- [Socket.io Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE) + +## Example projects + +- [Chatty2](https://web-chatty.herokuapp.com/) diff --git a/README.md b/README.md index 61bd65a7..fba40ffb 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ required to complete them. | Name | Description | Tier | | -------------------------------------------------------------- | ---------------------------------------------------- | ---------- | | [Battleship Game Engine](./Projects/Battleship-Game-Engine.md) | Create a callable engine to play the Battleship game | 3-Advanced | +| [Chat App](./Projects/Chat-App.md) | Real-time chat interface | 3-Advanced | | [GitHub Timeline](./Projects/GitHub-Timeline-App.md) | Generate a timeline of a users GitHub Repos | 3-Advanced | | [Kudos Slackbot](./Projects/Kudos-Slackbot.md) | Give recognition to a deserving peer | 3-Advanced | | [Slack Archiver](./Projects/Slack-Archiver.md) | Archive Slack Messages | 3-Advanced |