Sergif: Record GIFs with your Webcam 🥳

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!

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 🏹🙇‍♀️

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 of my projects!

Do you want to chat with me? Join my Discord Server!

EDIT: I GET A JOB OFFER (on marker.io) BECAUSE THIS