After all you learned so far, you now will learn how to build real-time applications, and rule the world!
This is a team exercise which means you work together on one repository. (Of course you will all fork it if the work is done so you’ve got your own copy in your own portfolio ;)). During this course we will use readme driven development (RDD) which is a way of organising your work. Use this - relatively simple - assignment to get a grip on the way you set up a project in this course.
Start out by forking this repository to one of your github accounts. Add all your team members as collaborator so you can work together.
Read this article about RDD if you haven’t already and look at these notes about RDD and some of the examples in this gist. Discuss findings, insights and/or allergies you encounter in with team. As you will be using markdown a lot when writing readme files you might want to freshen your knowledge by scanning mastering markdown.
Write your README.md and get started on your project. As a team you will discuss details, make sketches, make decisions, divide tasks etc. Write all of this down so everyone has an idea of what to work on.
Note: keep your documentation up-to-date while working on your project!
Note: Keep a teams meeting open in your squad channel while you work so we can find you and invite us into your meeting when you need help.
Maybe you already have a preferred code-style, maybe you want to try something else. Discuss the style you will use during this project and write up a few basic rules in a section in your readme. You can look at some of the style guides below but keep in mind that these are very extensive, for this project (and your own sanity), please keep it simple.
Set up at least an npm script. You will probably want some integrations with your editor. Use Nodemon or similar to allow instant reloading while developing.
Styleguides: w3schools.com .js conventions, Google JavaScript Style Guide, Airbnb JavaScript Style Guide Linters/auto-formatting: xo, standard, prettier, eslint, vscode marketplace
Set-up Express for static file serving or templating (optional). Implement your team page so that it will be served through express.
Set-up socket.io. Create a basic real-time app using sockets. Bare minimum is a successful message from client to server and from server to all connected clients (“round trip”). You can use the live coded example or the chat demo from socket.io to get started.
Get your app running on Heroku! First install the Heroku CLI if you didn’t already. Add a link to your live demo and a screenshot showing of your team page including the new chat functionality at the top of your readme.
Note: Don’t 😱 if this doesn’t work out: there’s plenty time to deploy in week 2 or week 3. But it may be advantageous to deploy now so you can make sure all team members understand how to do this.
Try to add an extra feature from the list below to your basic chat app. Do this one step at a time, each time discussing with your team what feature would be nice and how you would go about implementing it. Ask for help if you need it! Note: Update your readme vigourously ;)
- Add support for nicknames.
- Broadcast a message to connected users when someone connects or disconnects.
- Don’t send the same message to the user that sent it. Instead, append the message directly as soon as he/she presses enter.
- Add “{user} is typing” functionality.
- Show who’s online.
- Add private messaging.
Review the project as a team, create issues for everything that needs extra attention if you would have more time. Update README.md to reflect the latest changes, take new screenshots, link to all team members etc. Finally, have all team members fork this repo so you each have a copy in your own Github account - it’s your technical portfolio.
This individual exercise is not alltogether different from assignment 1 - the one you did as a team.. remember? It even bears the same name! For assignment 2 (this one) you will collect all of your experience and go full-out on a unique realtime app. Again you will use readme driven development (RDD). Use this assignment to start your adventure towards comprehension of the realtime universe.
You have probably forked your team project at the end of last assignment. Create a new branch called ‘team-page’ and switch back to the main branch. By branching out we’ve created a snapshot of this repository at this point, you can always find the code by switching to the ‘team-page’ branch. You will be working on this project by yourself so there is no need to add collaborators to Github.
Think up unique features that will make your chat much more interesting. What is unique? Not unique are storing nicknames, showing who’s online or any of the other feature requests listed at the bottom of the socket.io tutorial. Unique is using D3 to structure text into SVG art, using words to fight each other in a text based game, additional features you can earn if you stay in chat long enough. It doesn’t even have to be a chat app, just use the socket.io framework.
Think of something that matches your skill level. If you have trouble understanding the basics of socket.io, focus on the basics (and talk to us if you need help).
Write your README.md, use the resources below and make it so!
You’ve probably read all these before in assignment 1:
- article about RDD
- notes about RDD
- some RDD examples
- mastering markdown.
- npm script
- w3schools.com .js conventions
- Google JavaScript Style Guide
- Airbnb JavaScript Style Guide
- xo
- standard
- prettier
- eslint
- vscode marketplace
- Express
- Socket.io
- Live coded example
- Chat demo from socket.io
- Heroku
- Heroku CLI
Again, try to add extra features from the list below to your basic chat app. Do this one step at a time. Ask for help if you need it! Note:Again, update your readme zealously :P
- Add support for nicknames.
- Broadcast a message to connected users when someone connects or disconnects.
- Don’t send the same message to the user that sent it. Instead, append the message directly as soon as he/she presses enter.
- Add “{user} is typing” functionality.
- Show who’s online.
- Add private messaging.
Extra challenge: Start working on your final app. Look at the exercises from week 2, pick an API and think of a strong concept. Start working on that instead of a barebone app.
Extra challenge: Instead of socket.io, use the native server-sent-events! It works very well although sending messages from client to server is trickier.