Project Details Banner

Links

Role

UI/UX Designer

Frontend Developer

Backend Developer

System Architect

Tools

Figma

Figma - Layout and interface design.

React

React - Canva app implementation.

MongoDB

MongoDB - Storage for repeatable pattern assets.

Pulumi

Pulumi - Infrastructure as code tool for managing GCP infrastructure.

Google Cloud

Google Cloud - Cloud provider platform.

Pattern Lib Project

The Canva Pattern Builder App is a tool designed to empower users to easily create stunning patterns directly within Canva. Leveraging designs from top-tier designers, the app offers a vast array of pattern options, enabling users to customize and integrate these patterns into their Canva projects seamlessly. The project required robust frontend and backend development, along with scalable infrastructure management to support the app's growing user base.

Rap Marathon Site Before

Sample patterns

Process

  • Pattern Design
  • Patten sourcing
    Collaborated with designers to source a variety of high-quality patterns. These patterns were then integrated into the app, offering users a rich selection to enhance their Canva projects.
  • Frontend Development
  • UI/UX Design
    Developed high-fidelity prototypes in Figma to visualize the final design. The interface was designed to be intuitive, allowing users to easily navigate through pattern options and customization features.
  • Implementation
    Built the user interface using React. Using the Canva SDK and design elements to create a seamless experience that feels native within Canva.
  • Backend Development
  • Database Management
    MongoDB to handle the storage of user data and patterns. Combined with migration scripts to add or remove pattern and font assets from the database.
  • REST API Development
    Developed REST APIs using Node & Express which run on app-engine to manage traffic to the database. The choice of app engine is to support scaling up or down based on request traffic.
  • Infrastructure as Code (IAC)
  • Pulumi Integration
    Used Pulumi for automating the deployment and management of cloud infrastructure, ensuring that the app was hosted in a scalable, secure, and cost-effective environment.
  • Continuous Deployment
    Implemented CI/CD pipelines through Github actions to automate testing and deployment processes, reducing downtime and ensuring that updates could be rolled out seamlessly.