TestimonialGen

Dynamic Digital graphic testimony Generator in NextJs.

Tech Stack

• NextJS
• ReactJS
• Canvas API

Why?

It all start with an email from our college's placement cell - Training and Placement Cell BKBIET. So I though why not create an web app that automates the testimony generation.

About

Fig.1 - Testimony Template example

Instead of editing the template in photoshop or any other editing software one can simply fill a form and ***voila!*** you get your digital testimony ready to download in seconds.

• Step 1:

  • Visit the site: https://testimonial-gen.vercel.app/

    

• Step 2:

  • Click on create now:

  • Fill the form.

  

• Step 3:

  • Click Generate and done.

Approach

Creating dynamic templates in html/css/js is easy but you can't download it as an image or treat them like the same. I wanted something that can be used for creating graphics and can be treated as an image so the user can be able to download it once the image generation is done.

• So how I did it and what I used?

  • While reading Eloquent Javascript I go to know about a graphic web API (in-browser features that provide some extra functionalities are sometimes referred as APIs) Canvas.

    <canvas id="canvas"></canvas>

  • The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing. (credit: MDN web docs)

  • Using this Canvas API and React context API for state management I rendered all the info - gathered from the form the user filled - onto the image rendered on a canvas component, And Done!! dynamically generated graphic Achieved! 👍.

---

There you go, your testimony is generate in matter of seconds isn't it great? If you liked it do give a star✨, it cheers me up. 😃