/SpeakEasy

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.

Primary LanguageCSSMIT LicenseMIT

banner_speakeasy

Chatroom App

Voor het vak Realtime Web gaan we samen een basic Chatroom app maken. Deze app gaan we maken met Node.js, Express en Socket.io.

(description of our project)

Table of Contents

Taakverdeling

Voor dit project hebben we de taken verdeeld over de drie teamleden. Hieronder kan je zien welke taken we hebben bedacht en wie ze heeft gedaan.

Taak Wie?
Setup project Ine
Logo Pip
Readme Ine en Pip
Design Eva, Pip, Ine
CSS Eva

Schetsen

Wij hebben in Figma alle drie een eigen ontwerp gemaakt en vervolgens samengevoegd tot één ontwerp. Hieronder kan je de drie verschillende ontwerpen het uiteindelijke ontwerp bekijken.

Ontwerp 1 - Eva:

desgin1

Ontwerp 2 - Pip:

design2

Ontwerp 3 - Ine:

design3

Uiteindelijke ontwerp

Nadat we allemaal een ontwerp hadden gemaakt zijn we gaan kijken welke we het mooist vinden. Hieruit kwam dat we niet specifiek een konden kiezen, daarom hebben we de drie ontwerpen bij elkaar gevoegd. Zo hebben we van Eva de kleuren gekozen, van Pip de achtergrond en van Ine hebben we het input veld gepakt. Dit is het uiteindelijke ontwerp geworden.

finaldesign

Coding style

Om ervoor te zorgen dat onze code overzichtelijk en netjes is, hebben we een aantal regels opgesteld. Deze regels zijn:

Html

  • Schrijf semantische HTML en gebruik niet onnodige <div>'s
  • Schrijf comments waar nodig om de code te verduidelijken
  • Gebruik regelmatig formatters om de code op te schonen

CSS

  • Maak gebruik van CSS variabelen
  • Groepeer CSS met comments, alles van hetzelfde onderdeel bij elkaar
  • Gebruik relatieve eenheden voor afmetingen (Rem, em, %, etc.)

Javascript

  • Gebruik camelCase voor variabelen
  • Gebruik const en let in plaats van var
  • Schrijf comments waar nodig om de code te verduidelijken
  • Gebruik arrow functions

Installeren

Om deze app te gebruiken, moet je deze repository clonen. Je kunt dit doen door het volgende commando in je terminal te typen:

git clone https://github.com/Inevdhoven/chatroom

Na het clonen van de repo, moet je de dependencies installeren. Dit kun je doen door het volgende commando in je terminal te typen:

npm install

Zodra de dependencies zijn geïnstalleerd, kan je naar de projectmap gaan met dit commando:

cd chatroom

Vervolgens kun je de app starten met dit commando:

npm run start

Yes, je bent nu helemaal klaar! Ga naar http://localhost:4200/ en geniet van SpeakEasy!

Hoe gebruik je dit project?

Features

  • Verstuur berichten
  • Ontvang berichten van andere gebruikers

Makers

Deze Chatroom app is gemaakt door:

License

Copyright © 2023

Dit project is MIT licensed.