Socket.io party chat
Team name: dispensable-flicker
http://jsdev.learnersguild.org/goals/378-Socket-Party_Chat.html
Type the following in your terminal
git clone https://github.com/TrevorJamesH/dispensable-chat.git trevorSocketcd trevorSocketnpm run init-db- Get the Secret code from our team via Slack
echo "The secret code you got from us" > .envnpm start- Open Google chrome to
localhost:3000 - Say "WOW this is amazing!"
- Give us 100% on the project in slack by typing
/review #dispensable-flicker 100 - Give us high-gives too.
Our own added spec. (Gives us credit/points for it? I heard it's a guild wide spec now)
- No linting errors. You can run eslint with
npm run lint.
- App has a landing page (on route
/) where a user can either log in of sign up. - App has a home page (on route
/home) where the user can see a list of chatrooms they have subscribed to along with a feed of all the conversation for currently selected room. - Uses Socket.io to make a socket.
- Uses ajax/fetch calls to communicate with API endpoints.
- Backend view rendering ( via pug or HTML ) is separated from API and socket actions.
- Uses Javascript and/or jQuery for dymanic DOM mode creation and manipulation.
- Repo includes a README.md with spec list and it is checked off with completed specs.
- All dependancies are properly declared in a
package.json - Variables, functions, files, etc. have appropriate and meaningful names.
- Functions are small and serve a single purpose.
- The artifact produced is properly licensed, preferably with the MIT license.
- View has a
log-inbutton. - View has a
sign-upbutton. - When
log-inbutton is clicked, bothlog-inandsign-upbutton are hidden and alog-in formtakes their place on the screen. - Same as above for
signup, but instead of alog-in formwe see asign-up form. - On either form clicking a
cancelbutton removes the form from view, and we again get a view with the two buttons. - On
log-in form, clicking submit will check to see if the user exists and authenticate the entered password with the user's stored password. - On
sign-up form, clicking submit adds them to the database and logs them in. - On log-in, after the user is authenticated, a session is set.
- Closing the page and reopening it will redirect user to
/home - Session persists until
logoutor after 30 minutes pass.
- User can make a new chatroom by clicking a
+button. - User can search on a search bar that auto-completes with all of the chatrooms in the database that match the entered string.
- User can see a
chatroom listof all of the chatrooms they have subscribed too. -
<div class='messages [other classes] >'exists as a container to where messages for a current chatroom are displayed. - When a chatroom in
chatroom listis clicked, the<div class='messages [other classes] >displays a list of all the current messages in that chatroom. - User can unsubscribe from a chatroom and it is deleted from their
chatroom list. -
messages divhas a textarea where you can enter a message. - User can send a message by clicking a send button and/or pressing the enter keyboard key.
- Messages are displayed in descending chronological order. ( oldest on top of history )
- User's sent messages are displayed on the right side, all other messages on the left side.
- Anytime a message is sent, anyone in the chatroom can see the new message almost immediately. ( You can do this by logging in as a different user on a new browser window )