After all you learned so far, you now will learn how to build real-time applications, and rule the world!
Fork this repo This week you’re going to recreate this basic chat app with the addition of at least one new feature. Write down what your project’s all about in the readme of the project. Next week you’ll start a new project so a basic readme for this week will do.
Resources: readme driven development, mastering markdown Note: keep the docs up-to-date while working on your project.
Maybe you already have a preferred code-style, maybe you want to try something else. Set up at least an npm script, and probably also some integration with your editor. Use Nodemon or similar to allow instant reloading while developing.
Resources: xo, standard, prettier, eslint
Set-up Express (or similar) for static file serving / templating
Resources: express api
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 client (“round trip”) as well as one additional chat feature YOU HAVE COME UP WITH. Here is an example I made that slowly fades out words commonly used by the people writing the chat messages forcing them to use new words. Creating a unique feature often means storing some information about users serverside in-memory. Ask us if you have any questions about how to achieve that.
Examples that are not unique: Storing nicknames, showing who’s online or any of the other feature requests listed at the bottom of the socket.io tutorial.
Examples that are unique: Using D3 to structure texts 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).
Extra challenge: Start working on the 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.
*Resources: socket.io
Get your app running on the web! Put a link to your live demo at the top of your readme. Include a screenshot in the repo showing of the unique feature you built.
Resources:* now, heroku, digitalocean.
Note: Don’t 😱 if this doesn’t work out this week: there’s plenty time to do it in week 2 or week 3. But it may be advantageous if you get around to deploying now