Real-Time Web, a course of the minor Web Design & Development. It is a minor of the third year from the study CMD.
| 🚀 Purpose | 😍 Concept | 🤓 TechStuff | 💄 CodeStyle | 🔢 Data | ⚙️ Installation | 📁 Sources | 👮 License |
During this course you will learn how to build a real-time application. You will learn techniques to setup an open connection between the client and the server. This will enable you to send data in real-time both ways, at the same time.
The course Real-Time Web is about learning how to build a real-time application. Real-Time Web is part of the half year minor programme about Web Design and Development in Amsterdam. Bachelor Communication and Multimedia Design, Amsterdam University of Applied Science.
This is the solution for cooking together in times of Corona 🍴.
This application is an app where you can cook with each other on distance (each person from his/her own house). You start the application where you can register in a room. Then you can search on recipes by entering some food ingredients that you have in your house. You can like the recipes to your liked recipes of the room. After that you (first joined user) can pick one recipe of the liked ones and that recipe you all are going to make. Also you follow the instructions of the recipe while enjoying good music.
Login
- Create nickname
- Choose room
App
- You can search through recipes by entering a ingredient
- You can chat with each other to talk about which recipe you are going to chose
- You can add a recipe to the 5 liked recipes of the room
- The first joined user can choose which recipe of the 5 likes ones wins
- You all are going to the detailpage of the won recipe and then all of you are going to make the recipe
- You can get an embedded YouTube video of how to make the recipe. Otherwise when the video isn't available, you get a link where you are redirected to YouTube with automatically the recipe title as query is passed with.
joinSucces & userJoined: Sending alerts from who is joining and succesfull joining
Sending alerts to all users and specific user by joining. Also alerts for chosing winning recipe.
chatMessage : Chat with each other
Messages are emitted to all clients in the room
inputQuery: Recipe search on ingredient query
Query and data response are emitted to the user
likedRecipe: Like a recipe that adds that recipe to the "5 liked recipes of the room"
The recipe is added to the array of the room
wonRecipe: Go to detail page when recipe is chosen (won)
All clients will be redirected to the detail page (with the recipe data included) when a recipe is chosen by the first joined user
I was thinking about whether to use the timer for when the recipe is ready or the real-time instruction checklist. So I was testing it myself and I discussed it with other students, and I came to the conclusion that I'm going to use both. In this app I am only going to build the timer, but the backlog has instruction checklist ready.
This app is built, using:
Embedded JavaScript templates
Fast, unopinionated, minimalist web framework for node.
nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
Socket io enables real-time bidirectional event-based communication
Fetch data from an API on a regular way
I prefer to work with these dev-rules for myself:
- Use of semicolon at the end of the line
- Indent spaces: 2
- Code comments
- Param explanation of functions
- Inline code comments after variable declaration
- Naming of variables and functions has to be descriptive
- ES6 modules
The data model on the server can be manipulated by the user. Such as the likedRecipes, users, chat, likedRecipeLimit and wonRecipe. The rooms are hardcoded, so there is already a state defined called roomsState where the data can be manipulated by the joined clients.
{
room1: {
id: 1,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room2: {
id: 2,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room3: {
id: 3,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room4: {
id: 4,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room5: {
id: 5,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room6: {
id: 6,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room7: {
id: 7,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room8: {
id: 8,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room9: {
id: 9,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
room10: {
id: 10,
likedRecipes: [],
users: [],
chat: [],
likedRecipeLimit: false,
wonRecipe: [],
},
};
You can get the data by entering a query after the url.
Developer test API-KEY = 1.
Here is a list of how you handle the URL of the API.
Search meal by name - www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata
List all meals by first letter - www.themealdb.com/api/json/v1/1/search.php?f=a
Lookup full meal details by id - www.themealdb.com/api/json/v1/1/lookup.php?i=52772
The data variables I used, are:
idMealstrMealstrCategorystrIngredientstrInstructionsstrMealThumbstrYoutube
{
idMeal: "52779",
strMeal: "Cream Cheese Tart",
strDrinkAlternate: null,
strCategory: "Starter",
strArea: "Unknown",
strInstructions: "Crust: make a dough from 250g flour (I like mixing different flours like plain and wholegrain spelt flour), 125g butter, 1 egg and a pinch of salt, press it into a tart form and place it in the fridge. Filling: stir 300g cream cheese and 100ml milk until smooth, add in 3 eggs, 100g grated parmesan cheese and season with salt, pepper and nutmeg. Take the crust out of the fridge and prick the bottom with a fork. Pour in the filling and bake at 175 degrees C for about 25 minutes. Cover the tart with some aluminium foil after half the time. In the mean time, slice about 350g mini tomatoes. In a small pan heat 3tbsp olive oil, 3tbsp white vinegar, 1 tbsp honey, salt and pepper and combine well. Pour over the tomato slices and mix well. With a spoon, place the tomato slices on the tart, avoiding too much liquid on it. Decorate with basil leaves and enjoy",
strMealThumb: "https://www.themealdb.com/images/media/meals/wurrux1468416624.jpg",
strTags: "Tart,Savory",
strYoutube: "https://www.youtube.com/watch?v=UhQPwO4uymo",
strIngredient1: "Flour",
strIngredient2: "Butter",
strIngredient3: "Egg",
strIngredient4: "Salt",
strMeasure1: "250g",
strMeasure2: "125g",
strMeasure3: "1",
strMeasure4: "Pinch",
strSource: "https://www.instagram.com/p/BHyuMZ1hZX0",
strImageSource: null,
strCreativeCommonsConfirmed: null,
dateModified: null
},With map
{
id: "52779",
title: "Cream Cheese Tart",
category: "Starter",
ingredients: ["Flour", "Butter", "Egg", "Salt"],
instructions: [
'Crust: make a dough from 250g flour (I like mixing different flours like plain and wholegrain spelt flour), 125g butter, 1 egg and a pinch of salt, press it into a tart form and place it in the fridge.',
'Filling: stir 300g cream cheese and 100ml milk until smooth, add in 3 eggs, 100g grated parmesan cheese and season with salt, pepper and nutmeg.',
'Take the crust out of the fridge and prick the bottom with a fork.',
'Pour in the filling and bake at 175 degrees C for about 25 minutes.',
'Cover the tart with some aluminium foil after half the time.',
'In the mean time, slice about 350g mini tomatoes.',
'In a small pan heat 3tbsp olive oil, 3tbsp white vinegar, 1 tbsp honey, salt and pepper and combine well.',
'Pour over the tomato slices and mix well.',
'With a spoon, place the tomato slices on the tart, avoiding too much liquid on it.',
'Decorate with basil leaves and enjoy'
],
preview: "https://www.themealdb.com/images/media/meals/wurrux1468416624.jpg",
video: "https://www.youtube.com/watch?v=UhQPwO4uymo",
},I have rendered data from the recipes clientside so that the server is not overloaded by the serverside rendering.
The API recipes data will be fetched from the server in stead of the client. So is the client computer not overloaded with fetching data.
- Clone the repository:
git clone https://github.com/ralfz123/real-time-web-2021.git
- Install dependencies
npm install
- To run the app
npm run start
- To run the app in developer mode (with nodemon)
npm run dev
- Go to localhost in the browser and voilà ✨
http://localhost:5000/
See Backlog for much more ideas and features there can be built in the application ⭐
Credits to Justus && Lukas van Driel for giving interesting lectures about Real Time Webapps and how to deal with it.
-
Stackoverflow (n.d.). Searching for answers on dev questions - Stackoverflow. Retrieved 6 April 2021 from https://www.stackoverflow.com
-
npm (n.d.). Package manager with many packages - npm. Retrieved 6 April 2021 from https://www.npmjs.com
-
Node.js (n.d.). A Runtime engine server for Chrome V8 - Node.js. Retrieved 6 April 2021 from https://nodejs.org
-
Express (n.d.). Framework for Node.js - Express. Retrieved 6 April 2021 from https://expressjs.com/
-
socket.io (n.d.). Communication tool between Browser and Server - socket.io. Retrieved 18 April 2021 from https://socket.io/
This project from Ralf has a MIT © License
