Ordering & Loyalty Apps for Restaurants

Client:

5Loyalty

Tech used: React.js, Redux, Redux-Saga, Ionic, Django, Django REST Framework, PostgreSQL, Redis, Heroku, Firebase

Visit project

5loyalty gives restaurants the digital tools and data to better understand and segments their customers, run effective trackable marketing campaigns and attract new customers. Customers are kept happy through exciting loyalty promotions, instant in-app ordering, table reservations and direct feedback. This Pure project is one example.

The project

5Loyalty platform is a SAAS platform I have developed in-house alongside the UK team. The challenge was, that designers were developing animated infographics using Tumult Hype. These consisted of a HTML document and an embedded script file, that was bundled and uploaded to an SFTP server. The overall content structure would always be the same, but there are various different types of content that are collated for a given report. Each report has an intro screen, displaying an animation and the title of the report, followed by a table of contents. This is followed up by articles and infographics, sorted in a predefined order. The aspiration of Raconteur Insights was that this would feel like a print publication with the added benefit of dynamic animations. The design team consisting of print designers and one UX designer had very specific expectations that needed to be met.

The first approach

Since this was a greenfield project, none of the systems design decisions have been made, so I started from scratch.

What we knew:

We wanted to build a custom publishing platform. The technology stack should be based on Django, Ionic/React Animations are done by the design team in Tumult Hype

What we had to work out:

Is Django the right framework for this SAAS implementation? What are the business requirements for test coverage and maintainability? How do we bring our Hype animations into a React app? How do we host the app?Based on these questions I started a week-long spike into how best to structure the app. First I was looking at the Nest.js and Django. At the time Nest.js did not have good support for SAAS. After initial trials and weighing up pros and cons we decided to go down the structure of SAAS using Django. The next question to answer: what about Hype animations? I had been thinking of the best way to bring these into our app since the very beginning and after some investigation I noticed, that the HTML structure is always the same, just the script would be different for each animation. Therefore the component structure was quite straight forward

export default function HypeAnimation({ animationName, slug }: IProps) {
  // When mounted, get the container and create a script element with the link to the SFTP hosted hype file
  useEffect(() => {
    const container: HTMLElement = document.getElementById(`${animationName}_hype_container`);
    const script = document.createElement("script");

    script.src = `https://${process.env.SFTP_PATH}/${slug}/${animationName}/${animationName}.hyperesources/${animationName}_hype_generated_script.js`;
    script.async = true;

    container.appendChild(script);
  }, [])

  // Return a div with the correct structure for the hype animation
  return (
    <div
      id={`${animationName}_hype_container`}
      className="HYPE_document"
    />
  );
}

This way we would be able to insert any amount of animated infographics with the least amount of effort and impact on performance.

What are my key learnings?

Running a business and building a SaaS solution with limited resources is hard. However, I have gained valuable experience managing software engineers and also managing the expectations of stakeholders. The leadership experience I have gained with 5Loyalty has been valuable in my further career in senior and lead engineering roles I have since worked in. The experience of working with Django/React has also taught me a lot about best practices and the value of high-quality code. Without this experience, I would not have learned Django/React as early as I did, which has given me a significant benefit.