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.