Guillermo de la Puente

Frontend Engineering Portfolio

High quality web applications and experiments

2014 - 2022

SplashSplash logo

Event marketing platform for virtual, in-person, and hybrid event programs

screenshot
laptop frame
screenshot
phone frame

As an all-in-one platform, Splash has built-in website editor for event pages, form editor, tickets and registration platform, CRM, integrations, email builder and sender for transactional and marketing, and in-app integrations with virtual event providers.

During my years as software engineer and later as an engineering manager, I worked in all kinds of projects and with many types of technologies: frontend, backend, databases, queues, platform tooling, design system... Through this experience, I learned the fundamentals and pitfalls of building SaaS platforms for enterprise users, and it shaped the way I approach projects to this day.

My main contributions as an engineer were the stabilization and evolution of the website editor, modernization of frontend and backend codebases, implementation of the registration confirmations module, implementation of Splash's "growth machine" combining registrations and sign-ups, and the implementation of tooling and processes for improving developer-experience.

  • React
  • Backbone.js
  • Vanilla JavaScript
  • CakePHP
  • Symfony (PHP)
  • AWS
  • MySQL
Go to Splash

2020

alacartadigitalalacartadigital logo

Online restaurant menu platform with QR code integration

screenshot
laptop frame
screenshot
phone frame

Developed during the first weeks of the pandemic, alacartadigital brought a solution to restaurants that quickly needed to digitalize their menu and make it accessible via QR codes. We needed to provide a super intuitive interface, but customizable enough to solve various use cases and capable of using the same branding as its restaurant.

Alongside Cristian C and Kelvin S, we built a Next.js application that optimized ease of use and page speed. It included brand customization of colors and typography with live preview, an integrated QR code generator, paid subscriptions, and enough admin controls so that the founders wouldn't depend on developers to operate the platform.

The project has become a successful company powering hundreds of thousands of menus in Spain and Latin America.

  • React
  • Next.js
  • Firebase Firestore
  • Firebase Functions
  • ActiveCampaign
  • Stripe
Go to alacartadigital

2022

Afterafter logo

Collaborate with family and friends to create beautiful, emotional memorials for your loved ones in minutes

screenshot
laptop frame
screenshot
phone frame

After is an online memorials platform. Its frontend not only needs to be easy to use and fast, but it needs to be smooth and delightful enough to evoke nostalgia and positive feelings.

I took on the project to stabilize the product, since at that time it had a lot of issues, and to increase user adoption.

  • Fix all outstanding issues
  • Improve the user experience
  • Simplify user flows to prevent users dropping off and boost sign-ups
  • Implement email nurture sequences to encourage users to come back
  • Implement SEO on all pages and monitor it via Google Search Console
  • Migrate the codebase to TypeScript to eliminate type issues and deliver more quickly with confidence
  • React
  • Next.js
  • TypeScript
  • Sendinblue
  • AWS
  • Node.js
  • Koa
  • Objection.js
Go to After

Personal Projects

Startups, experiments and educational pet projects

2020 - 2021

QuatroQuatro logo

A Task Manager that prioritizes your day for you

(Startup)

screenshot
laptop frame

With 2 other non-technical cofounders, we built Quatro as a web application for managing tasks and scheduling them. It included a drag and drop task list, calendar display, repeating tasks, an integration with Google Calendar, desktop notifications, plenty of keyboard shortcuts, and a native desktop app using ToDesktop.

The project is currently abandoned. Its code is open sourced for others to learn from.

  • React
  • Firebase Firestore
  • Firebase Hosting
  • Firebase Functions
  • Google Calendar API
  • Mailgun
  • ActiveCampaign
  • ToDesktop
Source codePromotional VideoTechnical Docs

2021

KikiriCoinKikiriCoin logo

KikiriCoin (KIKI)

(Personal Project)

screenshot
laptop frame
screenshot
phone frame

KikiriCoin (KIKI) is an ERC-20 token deployed on the Polygon blockchain network. Its implementation is open source and meant to be educational and fun

With this pet project, I learned the basics of smart contracts, the solidity programming language, and web3. The website offers a faucet that, once connected to a wallet, can dispense KIKI tokens.

  • Web3
  • Solidity
  • Polygon
  • React
  • Next.js
  • Cypress
Go to KikiriCoin

2022

TravelmapTravelmap logo

A beautiful map of the countries you have visited

(Personal Project)

screenshot
phone frame

Travelmap was a pet project to learn Auth0 for user authentication, Planetscale as distributed database, Mapbox for map visualization and interactions, and the UI component library Grommet.

The UI includes interesting effects made with SVG filters, and it includes light and dark mode.

  • React
  • Next.js
  • Mapbox
  • Planetscale
  • Auth0
  • Cloudinary
Go to Travelmap

2022

Notion-powered blogThis website's logo

Blog using Notion as the CMS

(Personal Project)

screenshot
laptop frame
screenshot
phone frame

Notion is a project management and note-taking software platform. Since they launched their API, it can be used as a database for rich text documents, and so it's a backend for a blog.

Leveraging Next.js Static-Site-Generation, the site retrieves all blog posts at build time and prepares the blog summary and each blog post page. Combined with Next.js prefetching, they load instantly. The sitemap is also automatically generated.

My custom renderer renders each Notion block using Chakra UI components, the library of choice here, and compensates the limitations that the Notion API has.

  • Next.js
  • Notion
Go to BlogSource Code

2022

depor.traveldepor.travel

Travel and sport. Two passions, one portal

(Startup)

screenshot
laptop frame
screenshot
phone frame

depor.travel is an aggregator of sport trips around the world. We started focused on users in Spain.

The project started with a static squeeze page to capture emails of interested users, built with Next.js and deployed in Vercel to take advantage of their free tier, and capturing data via Google Sheets with a custom Apps Script API.

The initial prototype to test product-market fit was built with Webflow. Combining it with Attributes for advanced filtering, it included all functionality necessary for an MVP. I'm an advocate for not over-engineering solutions or building complex codebases when implementing prototypes.

  • Next.js
  • next-i18n
  • Google Sheets
  • Webflow
Go to depor.travelSqueeze Page Source Code