saulprl's portfolio

CSI PRO Post Generator

Web application for the creation of posters and banners with predefined guidelines.

Tech stack

React

TypeScript

Next.js

Period

August 2023 - Present

Links

Repository

Project Background

CSI PRO Post Generator is a web application created to aid CSI PRO's marketing team in the creation of posters with predefined design guidelines. This tool had already been developed by a previous CSI PRO generation, but we decided to remake it from scratch given the significant changes made to the laboratory's branding.

Features

  • Creation of posters with predefined design guidelines
  • Template selection
  • Addition of custom assets
  • High quality downloads for created images

How it works

Although Post Generator was developed with Next.js, it mostly behaves as a client-side application.

First, the user must select one of the available templates, which were created translating the marketing team's designs to HTML code. After selecting a template, the user will be presented with a preview that displays the poster's current state, and a form to populate the template. Additionally, the user can upload custom assets and add them to the poster before proceeding with its download.

The poster's output resolution depends on the original template, usually being 1080x1080.

Gallery

Cover image for CSI PRO Post Generator project card
CSI PRO Post Generator's main screen on mobile
CSI PRO Post Generator's template selection on mobile
CSI PRO Post Generator's Poster on mobile
CSI PRO Post Generator's Poster 2.0 on mobile
CSI PRO Post Generator's template selection on desktop
CSI PRO Post Generator's Poster on desktop
CSI PRO Post Generator's Poster 2.0 on desktop
Slide 0 of 0