As a student or a professional, all of us must have been in a situation where we must make presentations. We all know that making an engaging and captivating presentation slide is arduous and tedious.

Imagine, what if you have an application to reduce these intricate tasks of moving shapes from your agenda? Imagine, an application where you can simply type your ideas without being disquieted about the design.

Thus, the idea of Fiat Lux was envisioned.

What it does

Fiat Lux is an intuitive web application that enables users to easily generate complex diagrams in a PowerPoint slide without having to concern about the design.

How we built it

Initially, we questioned the aspects of slide making that is time consuming. Through personal experiences, we concluded that most of our time is allocated in making coherent shapes and icons to generate a high impact visualisation.

To build the web application, we use React as a primary UI framework, with Next.js as a boilerplate and Chakra UI as the main UI libraries. The web application is hosted in Vercel, enabling fast infrastructure setup and CI/CD (best of all, it’s free!). This includes hosting all the business logic inside the serverless function.

To generate the PowerPoint slides, we use PptxGenJS as the main API. To store the generated PPTX files, we are using Firebase Cloud Storage. For hosting list of supported icons, we are storing all the images inside Cloudinary.

Challenges we ran into

Decision to generate Google Slides or PowerPoint (PPTX).

Google Slides provides an official API. However, majority of the people utilizes Microsoft Powerpoint more compared to Google Slides. Furthermore, we need to develop Google authentication inside our app, which will be an additional strain to the development process within the time scope.

PowerPoint (PPTX) is a format which is more versatile as it can be opened using many tools e.g. Microsoft Power Point, OpenOffice, etc. However, PptxGenJS itself is not an official API, which results in several limitations (for example: does not support SmartArt or other advanced features).

Embed a live preview of PPTX on the web.

We are unable to find a web viewer such as ViewerJS or embed it inside an iframe like Google Slides. As a temporary workaround, we created a workflow where newly generated PPTX will be stored in a cloud storage, so people can simply download it into their personal computer.

The logic behind the dynamic change of the format of the slides (Ex: if the table is too large, then how do we cater that? Divide into multiple slides?)

In order to create a visually impactful slide while minimizing user involvement, we had to design various heuristics to accommodate situations that may cause an overflow in the slide. An example is when the row of the table is bigger compared to the size of the slide, we will have to divide the table into different slides.

An intuitive UI that is user-friendly while making sure of its feasibility within the time constraint

One of the issues of creating a visually pleasing slide was the high involvement of human intervention. In this application, we would like to minimize the human intervention by creating an interface where the user can input all the required information in a platform.

Each element is hard-coded to generate slides that are aesthetically pleasing (in terms of symmetry, and positioning)

With the intuitive design we have implemented, there are various options that requires different positioning and placements of the shapes and icons. As a result, we had to hard code each element differently depending on the option that was chosen by the user.

One of our members who resided overseas have internet connection problems, making it harder to communicate with the rest of the team.

With the COVID-19 restrictions, we had to conduct this hackathon in a remote environment. The medium of conversation with one of our members (our CTO) who resides overseas was through online conference. However, due to the poor internet connection we had a challenge to continuously communicate with him. Sadly he was not able to be present with us.

Accomplishments that we're proud of

We managed to reduce the time needed to create a chevron slide by 75% compared to using PowerPoint’s SmartArt, while keeping the visual as aesthetically pleasing.

Even compared to creating a Gantt chart using templates, our app can still make the process 67% faster.

In addition, making it slide without wanting to kill each other.

What we learned

For some of our team members, it was their first time working with the technology that we use in our stack such as React, JavaScript, even video editing.

The importance of a good pitch. No matter how good our product is, ultimately it is the pitch that convinces people about the value of our product.

It is important to maintain a seamless communication with every member of the team. As previously mentioned, we encountered communication challenges due to poor connection that tested our teamwork and group cohesion.

What's next for Fiat Lux

We have created a roadmap to develop Fiat Lux into the next level.

Quick Fixes:

  • Fixing minor bugs

Long term plans:

  • Adding more slide types and colour schemes
  • Cater to various target audience (ex: Primary School Students)
  • Allow designers to contribute to the designs
  • Optimise for the more platforms (ex: iPad, tablets, and mobile)
  • Generate more complex heuristics (ex: Sketch-to-PPTX)

We won't let this project slide away.

Built With

Share this project: