Sergif: Record GIFs with your Webcam πŸ₯³

Sergif: Record GIFs with your Webcam πŸ₯³

...and share them with your friends! πŸ˜‰

Feb 25, 2022Β·

4 min read

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!


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 πŸ› οΈ

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

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