Making of CardGen

In this article, I will be sharing my experience in the Developstar Winter Internship Program 2022-23 conducted by IEEE Bombay Section along with Alhansat , I would also like to thank Hannan Satopay sir for using his valuable time to conduct this internship.

Onboarding

The program was fully remote and open to all. Google form to enroll for the program was opened in late November 2022. Groups of 10 were formed at random, such that people of different backgrounds were together.

Sessions

Basics of Figma, Svelte, Firebase and Node.js were taught in sessions conducted over zoom. Recordings of these were made available. After which, projects were assigned to each group. For which we had to make a mockup and then implement it in svelte.

Business Card Maker

Our group (group 80) was assigned the project - Business Card Maker. A sample was also provided for taking inspiration (https://www.brandcrowd.com/business-card-maker). After making the mockup in Figma, we proceeded to implement it.

Target Audience

We decided to cater the app to such a user, who is not as skilled at designing. Such a user may select one of the ready made templates, quickly make changes and have a usable digital business card.

Implementation using Svelte

We started off with basic Svelte and Typescript template using Vite. Work was distributed by pages. We kept usage of external packages to a minimum, only using packages for complicated entities.

Our app is implemented as a Single Page Application with lazy loading, so that our app loads really quick. I decided against using Server Side Rendering mainly because an adapter for Firebase hosting was not available.

Fabric.js was used to simplify our work on the design editor. It makes working with the canvas tag really easy. It works on an event based architecture. It provides functions for creating shapes, uploading images, adding text and exporting to SVG, PNG and JPEG.

Backend configuration

I worked on the backend aspects of our App. Authentication and cloud storage for designs using Firebase Auth and Cloud Firestore. Designs has user ID, JSON object generated by Fabric.js which contains all the details of the designs, SVG to provide previews wherever necessary, isDeleted and isTemplate fields to mark designs thusly.

Links

Github repository: https://github.com/kurayami07734/card-gen

Hosted on: https://card-gen-8fe01.web.app/

Conclusion

It was a great learning experience and enjoyed working on CardGen. I also learned to optimize the web app for various devices and internet speeds using Lighthouse.

I would like to extend my gratitude towards all the tools which I used in making of CardGen, especially 谷歌 (Search), Stack Overflow , Svelte, Fabric.js, Vite and Firebase.