Skip to content

Latest commit

 

History

History
102 lines (83 loc) · 4.56 KB

README.md

File metadata and controls

102 lines (83 loc) · 4.56 KB

Thunderboom - TWY 🎵

TWY is an upcoming music artist, created by Thunderboom Records to make people enjoy ai-generated music. This project is made for her fans, making them able to contact TWY and talk to her.

Click here for the live demo

Table of Contents 🧭

  1. Goal
  2. Getting started
  3. Wishlist
  4. Practises
  5. Packages

Goal 💪🏻

The goal of this project is to make fans able to communicate with TWY. The interaction should flow easily and naturally. Because of our short time-span, the project is not focused on building an entire chatbot with a huge personality. Instead, we want to focus on user interface and experience.

Getting started ✨

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Technical requirements

To run this project you'll need Git, Nodejs and any code editor

📥 Installing

1. Clone this repository 👯

Before we can get started, we'll need to clone this repository. We can do this by typing the following line of code in the terminal:

git clone https://github.com/HappyPantss/TWY.git

2. Install the packages 💻

First we need to install the used NPM packages.

npm install

3. Start developer environment 🎬

Now we can run our application, by running the following line of code in your terminal:

npm run dev

4. Navigate to localhost 🌐

Congratulations! If everything works, you should be able to see the application running in your browser. Please note that the port won't always be the same number.

http://localhost:3000

Feature wishlist / backlog 👑

Below is a list of features we'd love to add to this application. The features are split up using the MoSCoW method.

M - Must haves These features are requirements for the end product

  • User can input a message
  • TWY responds with a (semi-)reaction
  • Project is responsive

S - Should haves These features are wanted, but not necessary for a usable product

  • Futuristic styling
  • Audio visualization

C - Could haves These features can be added if there is enough time to do so

  • Personality traits
  • AI-generated face

W - Would haves These features can be added in the future

  • Dataset containing enough data to give good reactions

Design patterns and Best Practices 👩🏻‍💻

Code standards are important when working on any project; your code stays consistent and is readable for everyone. I defined code standards for HTML, CSS and JS while working on this project.

Javascript code standards

  • Variables & functions are written in camelCase
  • Promises are handled with async functions using await
  • I don't use var, only const or let
  • I put spaces around operators ( = + - * / ) and after commas (exception for for loops)
  • I use indentation with TAB
  • I always end a statement with a semi-colon;
  • Functions have their opening bracket on the same line as the name, with 1 space in between
  • I use ES6 syntax where possible

CSS code standards

  • I try to avoid !important as much as possible
  • Layout/general styling is always above more specific styling
  • Selectors are not unnecessary long nor short
  • I use CSS3 syntax where possible
  • I avoid old display properties like float
  • CSS Selectors must have a space between the name and bracket

HTML code standards

  • I only use IDs when the element is present once on a page and it's necessary for styling or Javascript
  • I always write semantic HTML according to W3C Validator
  • Divs are only used when necessary for styling purposes
  • Classes allow easy re-usage
  • Indentation is always clear

Packages used 📦

  • Nodemon - Used for auto refreshing the server

License 🔐

This project is licensed under the MIT license by © HappyPantss, 2021. See the LISENCE.md file for details.