Have you ever wanted to upload a video presentation/teaser of your app online but it looks too plain. Maybe you just wanted to add a gradient or throw in some background music. The only way is to install expensive or resource-heavy overkill video editors, or rely on some sort of online editor that asks you for a premium plan to export without a watermark.

Well, no more!

Introducing Mockoops 📱

Mockoops is an online mockup-tool which allows you to just drag-drop your screen recordings, choose a template, throw in some background music, all previewing everything right in your browser.

Demo 🥳

Here's an introductory video

Walkthrough 🚶

Here's how you'll create a video from scratch.

Useful Links ⚙️:

Here's what Mockoops calls home:

🌐 Website: https://mockoops.mohitya.dev

🐱 Code: https://github.com/Just-Moh-it/Mockoops

Current Templates 🌈

Mockoops comes with a bunch of templates right out of the box! They are very responsive, customisable and diversified for each of your motion-graphics video need. Some of them are here:

📐 Angled Presentation

This template is idea for long-form content to make it more appealing (and possibly less boring too!). Here's a quick Showdown

⚡️ Quick Teaser

This one is great for quick teasers that start out by build anticipation in the begenning, revealing only certain part of the input video at first, and slowly reveal the entire thing.

Here's me, using it for Pckd's reveal

💻 Laptop Zoom

This one is for the more lo-fi people out there. This template lets you present your video on a moving MacBook screen on a beautiful workstation background. This could be used with non-screen recorded stuff as well!

📚 Text Reveal

This one is for short announcements or reveals. Most suitably when you just have one screen for an app and you want to tease the coming soon status!

Or it could even be used for things like the release of a new version of a product. The possibility with this one are endless

🎭 Rotate Title

This one is well suited for use-cases where you need to present some text before a video, while not having to setup any fancy stuff

With this, the templates end for now. I have a lot in mind as to what to add next. But considering the tight schedule for this hackathon, I'll have to keep that for later.

Features 🏆

Mockoops comes packed with awesome features you're gonna love

⚡️ Distributed Rendering Using Serverless (Remotion Lambda)

This portion is explained in later sections

Blazing fast exports

Preview videos right in the browser, then export with a single click

🧩 Responsive Video Templates

Unlike any other video ediors like After Effects, or Jitter, Mockoops has responsive video templates so that you could export videos with any dimension you'd want.

🫡 PWA Support

Mockoops even works in offline environments (preview mode).

🍰 Keyboard Shortcuts

Since the app was created with user-friendliness in mind, keyboard shortcuts were on the priority when assigning actions to buttons. Here's how power-users could utilize shortcuts to render video without touching their mouse.

How it works ⚙️

Mockoops uses Remotion for the rendering.

Here's what remotion is in 100 seconds

tl;dr It's basically a way to create videos programatically with React. It allows developers to create responsive and absolutely positioned

Tech Stack:

I used my go-to tech stack for this one. Since Linode could run any technology you'd want, you're free to choose. I went with:

• NextJS - Because it's one of the best frontend JS Frameworks
• Remotion - For the video and rendering
• Linode S3 Storage - For quickly storing uploaded video files in storage buckets
• Sass - For making the app look beautiful
• MongoDB (w/ Linode) - For caching renders with the same input params
• React Recoil - For app-wide state management
• React Hot Toast - For the notifications
• React Confetti - For the joyous animations
• React Dropzone - For handling advanced drag-drop animations

The birth of an idea

The app idea The app idea actually came out of the need for creating/building presentable screen-recordings, for announcing my new projects on twitter.

Apps that do the beautifying and presentation part exist for Images (like pika.style), but none for videos. So, it was obvious I had to fill the void.

Design:

As every other developer who tries to design, I'm not too good with designing things on my own. I usually browse websites like Dribbble to get inspiration for User Interfaces.

I also usually have the plan in mind on how the app flow would be like. This makes the process much more simpler, and I could concentrate on one part at a time.

(Detailed description... soon)

Code Quality

Care has been heavily focused on in this project. Unlike most hackathon submissions, I plan to use it very frequently, and so, the code was written with maintainability in mind.

(Detailed Description coming soon)

The GitHub commit messages are a joy to read as well, in case you're wondering

Linode's Role

Linode played a major role in most aspects of the application. Here's how.

How Mockoops achieved blazing-fast Renders ⚡️

Usually, video processing happens through an API on the same server as the backend. In the traditional way, it would apply to Linode, by having a virtual machine, which runs the NextJS server through an Nginx proxy, with API endpoints to render and get progress.

However, this approach would be highly inefficient and non-scalable in case 50 people render at the same time. Though the server would be able to serve the frontend, the backend would not be able to handle this rendering workload.

This is where serverless comes into play. By leveraging the power of serverless, Mockoops could have a thousand concurrent users, all rendering at the same time while not having to compromise on any part of the application performance.

This is especially useful for maintaining the super-fast response times of Mockoops, while not having to deplete the monthly transfer costs. This also makes Mockoops compatible with the micro-services architecture, where the frontend is one service, the backend another, and the rendering engine to complete the architecture.

🏕 Quick deployment of VM nodes

With Linode, I was able to get Mockoops from development to production within minutes. I even setup an Nginx Proxy Pass and added an SSL certificate. Though it's not as easy as something like vercel, etc. and there's a learning curve, once you get the hang of linux commands, it's much better since you have all the control you could have over deployments.

Domain management using Linode 🚦

Linode also allows for easy domain management for free (until you have at least one VM). Unlike the registrar's nameservers, updates propagated through the DNS instantly as soon as they were edited from the console.

DDoS Mitigation

I probably don't need this very often, but with this project, it was crucial. Since the rendering infrastructure was open to anyone, and engineering a protection system to prevent repetetive renders was not possible, the application was vulnerable to DDoS exploits.

I know this is thinking too far, but one of my friends actually got DDoS'ed very recently on a hackathon submission. His project was down for a very long time and his hosting bills probably touched the clouds.

This is where Linode's built-in DDoS protection comes into play. It automatically notifies when repetitive queries are being sent to the same service and if it detects some level of exploitation. Though it's not perfect, I could enjoy peace of mind at no extra cost.

💭 What I learnt during this hackathon

Learning is the main driving factor behind hackathons! Mockoops has been lesser of a web application and more of a teacher to me. To sum it here, here's what I learned:

Optimization: Long-term Caching 😎

Through a limited pre-alpha testing I did with some people for this app, I found out that most just pressed render on the video templates without changing any parameter. This meant that most of the renders were exactly the same.

This was a huge opportunity to save cloud costs. I just needed a way to identify each render uniquely. This was done through non-cryptographic hashing.

If you don't know already, a hashing function is a function which takes in an input of arbitrary length, and produces a fixed-size output based on the input. Even when the input is slightly changed, the resulatant output string is totally different. Hashing is used mainly for securing password storage, along with salting, etc.

Hashing was particularly useful for my use-case, since the input props to the video could be given as the input to a hashing function (SHA-256 in this case), and it would produce a hash which would act like an ID for the video. If the hash of two video requests is same, it means the same is exact video is being requested. Therefore, it is very efficient to serve the already-rendered video.

Using this method, I was able to decrease the render requests by a large factor, while also making the user interface better. In hindsight, it was well worth the 3 days setting up rendering infrastructure took me.

Serverless Computing 🥂

I was always fascinated by serverless and the JAM stack, but this project took it to another level. Using Remotion Lambda, I was able to deploy pre-built functions across different regions around the globe, and scale on demand.

With serverless functions, serverless sites was another thing I never though of, which came out to be a crucial requirement to access the serverless functions through an API. It taught me about scaling massively, the cold-start problem, caching, cache-invalidation, and a lot more.

Video Rendering 🎬

Setting up the rendering process was a nightmare. Since the videos are rendered on a serverless architecture, the initial setup was much more complicated that normal server renders. Also, Mockoops needed to show a progress bar for each render for a better User Experience.

I first though about client side rendering. However, it was not feasible since browser has to process the video in real time and if there are some interruptions, they are recorded as well, and the final video is not as smooth. It also takes twice the length of video to render, which is not ideal for a good user experience.

Therefore, I had to resort to client side rendering, as the remotion community had too. This meant hosting the infrastructure to render and store videos, which in itself was a challenge, but Linode user-friendliness made the process less painful and more of a joy.

It also taught me about FFMpeg and how it works behind the scenes. Remotion Lambda opens up the video in a Chromium browser controlled using puppeteer. It goes through each frame and dleays the renders until a video/image has loaded. It then takes a screenshot of the window.

This happens for all frames in the video. Finally, they are attached together using FFMpeg, which is an awesome tool I didn't know of before.

I learned how to convert a video from mp4 to gif without having to rely on online solutions

🦸 Challenges and how I overcame them

This project was supposed to be an easy build, but oh boy, what an understatement!

Mockoops was no less that a roller-coaster. Though it taught me some valuable lessons.

Software Incompatibility ☹️

It was hard to make remotion compatible with the latest versions of NextJS, since react 18 made significant changes in the browser rendering process and also changed some things from the ground-up. Though remotion had been tested against React 18, I'm afraid not so with NextJS 12.

So, every now and then I was getting ambiguous error messages that I had no idea how to fix, and the solutions online seemed to make no difference. After much struggle and avoiding to downgrade my React and NextJS versions, I had to finally downgrade to React 17 and NextJS 11. It took me 2 days of debugging and finally having enough to make the switch.

Since downgrading, I haven't faced any silly error message and everything worked exactly like I wanted to.

Lesson learnt: Never hesitate to downgrade your tech stack versions if it is hampering too much with progress. The change would probably be very in-significant (unless ofcourse new features aren't a business requirement).

🤗 Run your own version of Mockoops!

Want to tinker with Mockoops? Want to add a template? To setup your own instance of Mockoops, read the docs over on the GitHub repo

🛣 Future Roadmap

Mockoops could be made better by:

• Adding more exciting templates (since I'd probably use this very frequently, I'll add a lot overtime)
• Dynamically uploading serverless functions when a template change is detected: Currently, all templates are uploaded to serverless environments, and different videos are altered based on different input requirements.
• Adding Cypress tests to validate if newly added templates survive edge cases (like rendering fallback if the video is removed)

😎 Summing it up

This is one of the longest blog posts I've written, since I wanted to summarize the entire process.

Mockoops has been a journey of creating a vision to reality. Though there were some bumps and even speed-breakers, I finally managed to get it through the tunne... Well the analogy went too literal. 😅

This was one of my first experiences launching a product (on product hunt as well, soon), and it sure was hell of a fun one!

🤗 Thank you!

If you've reached this far, I'm grateful that you read the article. I'm excited for the results and the prices (since I'm saving up for college). Till then, later!

HouseBid is an open source bidding platform, where property owners could list their properties, then allow interested customers to bid from the property.

The auctions are usual, the bidder with the highest bid will be automatically chosen as the winner, and will have to pay for the property at the end.

🚶‍♀️ App Walkthrough

What’s better than a demo? Here’s one just for you...

PS: This was my first ever time trying motion-design, would be flattered to hear any feedback :)

🏘 Home Page

🎧 Single Product Page

🙉 Listings Page

🎭 Activity Page

🤩 Some Features

I’ve put in extra effort to ensure the project is more than just a concept, and could even be used as a real application

🪄 Verification using Stripe

🧑‍💻 Bid Anonymously

📈 Specify Increments

💳 Seamless Wallet Integration

🌙 Dark Mode

🏷 List under several tags

📐 Tech Stack

I’ve created HouseBid using the following open-source technologies:

• Hausra + GraphQL: For the awesome and easy-to-implement backend
• NextJS: As the frontend of the app
• Vercel: Deployment solution for the app
• Sass: For styling the app
• Figma: For designing the app, and it’s user flow
• Oracle Cloud: For hosting the database and other crucial parts of the app

😈 Hasura's Role

After thinking about what to make for a hackathon, I decided to go with an app that demonstrates everything Hasura has to offer:

• 🪄 Reliable CRUD operations
• 🗝 Seamless 3rd Party Role-based Authorization
• 👑 Blazing fast live-updates through subscriptions

🛣 Roadmap

The application will be going to have a lot of features in the coming months, and the possibilities are virtually endless. That’s why I have a lot on the white board

👋 Conclusion

There’s a lot that got into the project, and I would love to have you review it.

Also, you know the drill. If you found this article helpful or the app awesome, do let me know in the comments, and I would love to hear the feedback.

Useful Links

• 😺 GitHub Repo - https://github.com/Just-Moh-it/HouseBid
• 🚀 Project Demo Link - https://house-bid.vercel.app

This month, I saw the Netlify-Hashnode hackathon 🤩 and immediately knew I found the excuse to spend my time bringing my prolonged idea to life.

What exactly is 🔗 Pckd?

Have you ever wanted to share a link with a long link with a friend, but it seems way too long to send through a message (maybe it's a base-64 image URI), so you might turn towards URL shorteners, nothing special?

But try to imagine, along with the shortening functionality, what if you could have a lot more. I mean, track all the clicks (or hits) on the URL that you shortened and get very-deep insights about the person who clicked it, like:

• Their 💻 device information, including model, operating system, etc.
• Their 👩‍💻 browser name and version
• Their 🌎 IP location, along with their ISP name, their city, rough coordinates, etc.

And much more! 🤯

And to add the cherry on the top, you could host it yourself on your custom domain! In fact, it was created to be self-hosted, for people on the self-hosted community

Doesn't that sound like the time to switch from Bitly and stop paying the premium, and stop being limited by 100 links/month?

Tech Stack

Pckd uses the following technologies:

• Netlify ✨ for hosting the app
• React JS ⚛️ - For the frontend of the app
• Apollo GraphQL Server v3 🕸️ - For querying the backend from the frontend efficiently
• GraphQL Template By Mohit 🧩 - Boilerplate Template used for initializing the backend
• Prisma 💿 - The ORM used for the app
• MySQL for the database
• Redux 🗺️ w/ Redux Toolkit - For handling states across the application
• React Hook Form 🎣 - For managing and validating forms and text inputs.
• Styled Components 💅 - For adding CSS to the application
• IP registry API 🌐 - For obtaining 🏛 ISP, geolocation, etc. information for the IP address

Creation process 👩‍🎨

The creation process was undoubtedly the most fun part of the project. I solved many new challenges, learnt a lot, and finally came up with an application I was proud of! Here is how I pulled it off...

Designing 🎨

Usually when I create a pet project, I just use the designing from the previous projects I was working on, since they won't get noticed anyway. But with this one, I wanted it to reach to the top of the list of open source URL shorteners. I had self-doubts about whether I would be able to reach the goal with my experience, but you are free to judge.

Inspiration ✨

So, I started by looking for inspiration. The best place for this was dribbble. I went to the inspiration tab. Many people would create the best design they could without any inspiration, but as Pablo Picasso (may have) said:

Good artists create, great artists steal

That's one way to put it, but the point is: with the amount of design experience and the height of the goals I had, I just wasn't going to be able to create a good-enough design overnight if I started from scratch. Hence, the searching.

After endless scrolling, similar-sounding keywords and hard-to-make choices, I decided to go with this design, because it just looked great for the purpose I was looking for. There were many fancy ones too, but they just weren't practical, or too flashy for the typical programmer that was going to host it (if Pckd was even going to be successful).

Customizing 🍕

The original design was good, but it wanted something more, like the colour customization, planning out exactly where everything would go, and creating an exact mock-up of how the app would look. I find this approach very useful, because you don't have to scratch your head over minor details that would otherwise go unnoticed while planning, and you have to go to the sketch board all over again.

Dashboard 💾

I went on to Dribbble to find some designs. I got some that caught my attention. After that, I went to Figma and started laying out the design

Here's how the final result looked like:

(I know they look totally different, or at least barely-related, but the inspiration image really helped with the design aspects, and most of the compliments I received are a result of that)

Other pages 🗞

As for the other pages, I created the homepage out of just my imagination. Here's how it looked:

And the signup pages:

The designs looked good in my opinion, and I was dead-set to implement the most design-accurate version of this with react and try to not mess up the margins or paddings somewhere. This marked the end of the designing and planning part of the app. Not bad, right?

Setting up the backend 🧩

For the backend, I started out by forking a backend template repo (made by me ;), because it contains a file-based structure, just like NextJS, but with backend. It also has authentication baked in, so we don't have to do the hassle of setting everything up.

The database schema 💾

OK, I want to have a hits table, a user table, and that's it. Oh! Forgot the pckd table, the main one! After all these conversations in my mind, I was ready with the following database schema

I created the database through the Prisma schema, and it ended up working great.

The file structure 📁

This is how the finished file structure looked like:

Adding a new route is just as easy as creating a new file in the directory, like for the user type, api/ping/user.graphql file needed to be created. This is how it looked like:

type User {
  id: ID!
  pckds: [pckd!]
  name: String!
  email: String!
  createdAt: String!
  updatedAt: String!
}

And For the resolving the users' pckd logic:

module.exports = {
  User: {
    pckds: async (parent, args, { prisma }) => {
      const pckds = await prisma.pckd.findMany({
        where: {
          userId: parent.id,
        },
      });
      return pckds;
    },
  },
};

As simple as creating an export file. You should definitely try this method of creating backends out. Little boilerplate, powerful APIs. 😃💪

Achieving this functionality ⛽

For combining the files to create a single instance of typeDef and resolvers, I used the following code

const path = require("path");
const { loadFilesSync } = require("@graphql-tools/load-files");
const { mergeTypeDefs, mergeResolvers } = require("@graphql-tools/merge");
const { makeExecutableSchema } = require("@graphql-tools/schema");

const typeDefs = loadFilesSync(path.join(__dirname, "/api/**/*.graphql"));
const resolvers = loadFilesSync(path.join(__dirname, "/api/**/*.js"));

const schemaWithResolvers = makeExecutableSchema({
  typeDefs: mergeTypeDefs(typeDefs),
  resolvers: mergeResolvers(resolvers),
});

module.exports = schemaWithResolvers;

This would combine all the files ending with the .js and .graphql extension from the api and it's sub-folder into a single typedef and resolvers variable.

Querying the backend 💬

For those who are new to GraphQL or haven't used apollo GraphQL before, Apollo provides a great interface for testing and creating queries, just like postman, but for Graphs, and much more powerful.

And creating APIs with GraphQL never gets easier

Setting up the frontend ⚛

For the frontend, I used React with the Create-react-app template, because it was easiest to work with, and I didn't use NextJS because the app didn't have much about SEO.

Along with react, I used Redux, and Apollo-graphql-client to query the backend, because the global state was shared across multiple components. Also, I wanted to learn Redux, and what other way to learn than to implement it yourself. (But it turned out to be an overkill 😅).

The typical React development pattern continues... At the end, we have a polished URL-shortener application that's fully customizable and ready to be deployed.

Hosting the app

For hosting the web app, I used netlify, as per the instructions. I created a netlify app from the dashbaoard, and the app was deployed in one click!

Deploying on Netlify was undoubtedly the easiest part of the project, period!

Try it yourself

Here are some useful links you would need:

• 🚀 Project Demo - https://pckd.mohityadav.codes/devto-demo
• 🐱 GitHub Repo - https://github.com/Just-Moh-it/pckd

I hope you liked the blog. If you did, please leave your thoughts in the comments. It would make my day.

Till then, happy 💻 coding! 🍿

I have a lot of VS Code extensions. Some are indispensable, some are good to have, and some become irrelevant because I'm no longer learning the language I downloaded it for.

In this blog post, I'm going to list my top 5 extensions that I think are underrated and unknown to most developers.😍

Top VS Code extensions of all time

Bonus: At the end, there is a bonus extension, so be sure to check it out.

Now, starting off with the 5th one,

5: Indent line (5k downloads)

This extension fixes all indentation issues with a single shortcut. What is better than seeing it for yourself? Here's a demo

But why need it when you have prettier? There's a reason. As far as I know, prettier does not format python code, but this extension supports many languages that prettier does not.

4: Polacode

Ever wanted to present your code to someone or some platform, but it looks ugly? A great alternative to Carbon, it automatically detects the language, highlighting, etc. and presents a picture-perfect version of your code.

Don't use it to share your company's code though :)

3: Toggle Quote

Ever typed a string with " and wanted to convert it to a template literal with ` or to '? Why move your cursor back and forth? Just press a simple keyboard shortcut to toggle through these quotes.

I hope you get the idea. This is pretty useful for me personally, since I mistakenly write the " and then remember to use `

2: Bracket Padder

A simple package that provides smart whitespace padding and closing of bracket pairs: () [] {}. Even though prettier does it automatically, it also supports languages like python, go, etc. which prettier does not support.

A must-have to increase readability.

1: Toggle Case

This is one of the most useful extensions on the list. The thing it does might sound very basic, but combined with VS Code's awesome features, it could save a lot of time.

It becomes awesome when dealing with multi-cursor text, where it could convert case for multiple instances to ones, saving a lot of time. It also converts text like foo bar to paths like foo/bar. A must-have for every programmer.

Bonus! Hot dog stand

Get the joke?.

OK, let's start the pitching.

Have you ever wanted to burn your eyeballs within seconds!? Well now, you can! With ho... Oh wait. No one in their healthy minds would want that!

Wrapping it up

Thanks for reading! If you are looking to take your VS Code experience to the next level, be sure to check out some of these extensions. Also, I'm going to post about a really cool project soon, so stay tuned.

You know the drill. If you found this post helpful, please share it with your friends and followers. And if you have any questions or comments, please feel free to leave them below.

Until then, happy coding!