https://blog.ultirequiem.com/sergif Menu [svg]Eliaz BobadillaEliaz Bobadilla UltiRequiem's Blog UltiRequiem's Blog HomeBadges [svg]Sergif: Record GIFs with your Webcam Sergif: Record GIFs with your Webcam Sergif: Record GIFs with your Webcam ...and share them with your friends! [svg]Eliaz Bobadilla's photoEliaz Bobadilla's photo Eliaz Bobadilla *Feb 25, 2022* 4 min read Table of contents * Hey everyone * Introduction * Tech stack used [?] * Struggles * Linting & Code Quality * Marketing Sergif * Final notes Hey everyone This is UltiRequiem here. I'm a 15-year-old, Peruvian , full-stack and system developer, and I have the intention to become a successful developer. Today, I'm presenting Sergif, a website, which works on mobile and computer, to record GIFs, store them and share them with friends! Introduction Some weeks ago I wanted to record a GIF from my phone, but I didn't have enough mobile data to install any app, so I decided to search for a website that could do it. To my surprise I didn't find any that works correctly on mobile, the first one just glitched my phone, the second one I thought worked but didn't give any option to share or export the GIF Then 2 weeks ago, I read about this hackathon, so I decided this would be the perfect opportunity to do it! [giphy] Tech stack used [?] * TypeScript - JavaScript with Types * Kumeru - Low Level JavaScript Component Framework * Netfun - Helper to easily build Netilfy Function Handlers * RecordRTC - To get User Camera Input * Tailwind CSS - The most popular CSS utility-first framework! * GitHub - To Host the code and Continuous Integration * Netlify - To deploy the project * Netlify Fucntions - As Backend * Tixte File Storage API - Home to your best moments I decided to use Tixte because I met one of the co-founders at the buildergroop, a very active community of young builders Struggles First of all, JamStack, do not misunderstand me, now I love JamStack, but only 6 days ago I didn't know anything about it! I had to learn about Netlify Functions, which are really cool, I even made a package simplifying their use, keep reading to know about it Later, while developing this application I had to build 3 npm packages, external to Sergif, they are * @ultirequiem/tixte There were already 2 Tixte API Wrappers, but any of them was working correctly or had bad type annotations. I even made a PR to one of them, but I'm not gonna wait until is merged! * netfun A wrapper around Netlify Funtions, it exposes a simple API, sane defaults, and reduces a lot the boiler template. It reduced almost half of my backend code! * kumeru While I started building Sergif with vanilla TypeScript, I decided to create some utils to avoid repeating so much code, at the end, my utils were really cool, at least for me, so I think is a good idea to move it to an external package! Thanks that I move this to their own packages Sergif codebase is a lot smaller and maintainable These 3 packages are undocumented yet, but will do the docs in the next few days! Linting & Code Quality I'm using TypeScript for type-safety, ESLint for extra rules, and to keep the code consistent and formatted across the project Prettier. Marketing Sergif First I released Segif on Product Hunt, this is my first time publishing something there, upvotes are highly appreciated [?] Sergif - Record GIFs with your Webcam and share it with your friends | Product Hunt I also make a little Youtube Video Then I made a Tweet Furthermore I made some posts on Reddit I weirdly enter Instagram and I have like 3 followers there, but anyways I made a post there too! Final notes Sergif is an open-source project, the source code is at its GitHub Repository, and it's licensed under the MIT License. I'm so glad I had this chance to participate in this Hackathon, this being the first one I ever participated in, and the next one being the buildergroop's one Doing this project has motivated me to continue blogging on Hasnode and to continue deploying my projects on Netlify! Even before this project, I had already used Netlify, I even bought my domain there, some applications I deployed there are Copero, a service similar to Pastebin [?], or UltiTodo, a simple todo list with local storage , between others! Connect with me on Twitter, Linkedin and GitHub! Visit my portfolio to see more projects of mine! [svg]Post reactionPost reaction3 [svg]Post reactionPost reaction3 [svg]Post reactionPost reaction3 [svg]Post reactionPost reaction3 [svg]Post reactionPost reaction2 [svg]Post reactionPost reaction2 [svg]Post reactionPost reaction2 [svg]Post reactionPost reaction2 [svg]Post reactionPost reaction2 [svg]Post reactionPost reaction2 2 Share this (c)2022 UltiRequiem's Blog. Archive*Privacy policy*Terms Publish with Hashnode Powered by Hashnode - a blogging community for software developers.