Algolia MVC example

This is a sample app including an autocomplete input and a simple form to add entities to an Algolia index. The PHP backend takes care of adding and removing entities.

This was done for a recruitment test, which I've failed, mainly because of the backend architecture's not being "MVC" enough and because it couldn't be easily tested (eg lousy dependency injection). The version submitted was 1.0.0. Time spent: 17h.

Most of the issues will be fixed, just for the sake of doing it properly. No libs will be used, unless really needed (eg phpunit). This will still be a POC and isn't meant to be used in production. If that had been the case, I would've used existing libraries and a basic framework such as Silex (no need to reinvent the wheel).

Demo

You can try it out here: https://algolia-mvc.shaun.fr/

Requirements

• Composer
• php >= 5.4
• Web server (I've been using Apache)

Install instructions

# clone the repo
git clone https://github.com/Chonne/algolia-mvc .

# get composer
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
php composer.phar install

# Add your Algolia credentials to the local config file `config/parameters.php`
cp config/parameters.php.dist config/parameters.php

Server configuration examples

Virtual host

Apache virtualhost configuration example. The paths are the default ones in a Debian based docker image:

# 100-algolia-mvc.conf
<VirtualHost *:80>
        DocumentRoot /var/www/html/web/
        ErrorLog /var/log/apache2/algolia-mvc.fr-error_log
        CustomLog /var/log/apache2/algolia-mvc.fr-access_log combined
        DirectoryIndex index.php

        <Directory "/var/www/html">
                AllowOverride None
                Require all denied
        </Directory>

        <Directory "/var/www/html/web">
                Options -Indexes
                Require all granted

                FallbackResource /index.php
        </Directory>
</VirtualHost>

If you're using a managed host that doesn't allow you to set your own virtual hosts, make sure your subdomain's root is the web folder and that it supports .htaccess files. A simple .htaccess file is provided in the web folder.

Dockerfile

Note that a virtualhost conf file should be available in the same folder for this to work.

See the docker compose file to launch it.

FROM php:5.6.30-apache

RUN apt-get update && apt-get install -y \
    git \
    unzip

RUN usermod -u 1000 www-data

COPY 100-algolia-mvc.conf /etc/apache2/sites-available/100-algolia-mvc.conf
RUN ln -s /etc/apache2/sites-available/100-algolia-mvc.conf /etc/apache2/sites-enabled/100-algolia-mvc.conf \
    && rm /etc/apache2/sites-enabled/000-default.conf

RUN mkdir /var/www/.composer && chown www-data:www-data /var/www/.composer

Docker compose

Not really necessary, as there's only one container, but allows anyone to configure the port and volume the way they like:

version: '2'
services:
  php-apache:
    build: ./php-apache
    image: php-apache

    # These values could also be in a docker-compose.override.yml file to ease sharing
    ports:
      - '50080:80'
    volumes:
      - ${HOME}/Projects/github-algolia-mvc:/var/www/html
      # Uncomment this if you want composer's cache to remain in your host
      # - ${HOME}/Projects/github-algolia-mvc/_composer:/var/www/.composer

To access the container as www-data and run local commands such as php composer.phar install:

# in `containers_php-apache_1`, replace "containers" with the name of the folder containing your `docker-compose.yml`file
$ docker exec --user www-data -i -t containers_php-apache_1 /bin/bash

To do

These are ideas I've had to improve the project, that either should've been done for the test itself or as general improvements because I tend to be a perfectionist.

general

• document the Rest API (RAML? Swagger?)
• create a docker container with the code?
• include docker related files to ease installation

backend

• unit tests
• better error handling, with proper exceptions and error codes (4xx instead of 5xx if it's the user's fault)
• validate json with schemas? Will require using an external lib
• use a Router class?
• build a Request class that will be passed to the controller and will prepare the parameters
• use a config parameter with the site's base url to allow usage in a subdirectory
• in debug mode: return more details in case of errors

frontend

• a bit more responsiveness
• addform could have both the current raw version for quick copy/pasting and a new multi inputs one
• add keyboard navigation for the results
• include algoliasearch js lib using npm or some other package manager?
• include fetch polyfill using npm or some other package manager?
• if more libs are used, perhaps use something like gulp to build stuff
• use scss?
• close addform when pressing "esc", if the textarea wasn't changed, otherwise ask for confirmation
• results: display more than 5?
• show the total number of results? Would be helpful when there aren't any, but not only
• divide the js code into separate modules
• use babel and newer javascript?