Let's Loud

2020/08
logo

Background

Friend of mine started a business with a focus on event organisation, audio and video production and PR for artists and asked me to create a website and a logo. So I did. Let'sLoud was one of my first "bigger" projects I've worked on where I've had complete freedom with the design and technologies used. I could've used WordPress but wanted to try something on my own, plus I wouldn't learn anything from it. Although I'm not a big fan of PHP, I've already had some experience with it (for example my old personal website and some other smaller projects), and the web hosting is pretty cheap, so PHP was an obvious choice.

Development

Structure

Whole project can be divided into following parts:

  • App
    • MVC - Contains actual business logic (Models, Controllers) and Twig templates (Views) of both the public page and administration
  • Core
    • Libraries - Contains main code related to routing, error handling, rendering, administration login, bolierplate code, ...
  • Data
    • SQL - Development related data, for example SQL scripts for building the database
  • www
    • Publicly available files - JS, LESS and CSS stylesheets, logos, ...

Front-End

I've decided to divide the website into three parts: single main page, references page and administration. Bootstrap came handy to make things easier. I've used fullPage.js for the main page to achieve the single-page scrolling impression and particles.js for the neat "yellow floating squares" effect and some CSS animations for the text to fade in smoothly. On the reference page, the content for each artist (group, event) is loaded from the server using AJAX after selecting an artist from the list on the side. Smooth scrolling over the list is possible thanks to the slick library. The administration is a basic bootstrap-ish login form and an interface to add, delete, sort and edit artists and their videos with help form the Sortable library.

Back-End

The server side is based around this a MVC framework I re-wrote in PHP 7.x and a MySQL database.

Technologies

General

  • MySQL - the database

MySQL To make everything sound even cooler my first choice was MongoDB, but since the relational database is a better choice for this project, I stuck to MySQL which I already have more experience with. However, the whole structure of this project takes in mind possible usage of other types of databases.

Back-End

  • PHP 7 - well, it's PHP
  • php-mvc - MVC framework the whole page is built on

PHP 7 Well, it's PHP. What else do you want to know! php-mvc MVC was a new thing for me at that time, so I've implemented the framework according to this Udemy course and rewrote it with strict typing and PHP 7

Front-End

  • LESS - CSS extension language
  • fullPage.js - Full screen pages fast and simple
  • particles.js - A lightweight JavaScript library for creating particles
  • slick - The last carousel you'll ever need
  • Sortable - Library for reorderable drag-and-drop lists

LESS Pure CSS is not fun to work with. Let's use LESS. fullPage.js Library for the single scrolling page effect. particles.js Library for cool javascript particles animations. slick Library implementing the carousel effect. Sortable Library to make drag-and-drop sortable lists.

Screenshots

Installation and requirements

Rquirements:

  • PHP 7.2
  • MySQL server