Skip to main content

Β· 3 min read
Nehal Sharma

Abandoning the comfortable familiarity of Google and changing your default search engine to Felvin can be a big leap to take for some. That's why I made a browser extension to make the switch much more smooth for anyone curious about Felvin! The Felvin Instant Apps Browser Extension allows you to benefit from the full range of Instant Apps right inside the Google Search Page, without needing to change search engines, if you're not yet ready to take the leap.

Add it to your browser (Chrome/Edge) here!

Screenshot

A Bumpier Development Journey Than Expected...#

At a basic level, the extension aimed to import the Felvin apps package, choose the best match out of these apps for the query searched, and inject the instant app into the search page. Sounds pretty easy at first, but the fact that the apps are React components, and that there's no standard way to make extensions using anything other than plain JavaScript was a challenge. Adding to the complexity, web standards for extensions evolve continuously, which renders most blogs on creating React extensions outdated.

However, figuring out how to make React work for an extension and writing the Webpack config (to bundle the extension code) from scratch, was what made the process so much fun!

The content script of the extension, which runs whenever you're on a Google search page, is what does all the instant app magic: It runs the searched query through the list of the imported Instant Apps until it finds a match, and then renders it onto the page into a div injected at the top of the search results.

Webpack Woes... Or Wonders?! ✨#

Dealing with Webpack initially seemed daunting, well... it still does! But the more I research on and use it, the more comfortable I get with it, and appreciate it as a development tool. I read a lot of its documentation and several blogs on configuring it for React, without create-react-app, which would have been overkill for this extension, and my first draft of the config seemed to work well. However, on importing the apps package, I started getting a strange error about the content script not being ASCII encoded. After some more searching around, I realised I'd also need to configure the default code minimizer used by Webpack, which I did. Now it worked just fine!

Styled Components To The Rescue! πŸ’…#

Care had to be taken to ensure that the extension doesn't break or interrupt any of the original functionality of the page. This is where the usage of styled-components for the apps came in handy, since the app styles didn't "leak" out. I kept the additional CSS to a minimum, just enough so that the injected content is boxed in a suitably sized space which does not hide behind or cover the original content.

Original Is Still The Best!#

Of course, we believe that Felvin Instant Apps work the best in their own natural habitat, aka Felvin Search, and so there's an ever-present link to the exact same query searched on Felvin. Whenever curiosity strikes, you can simple click on "Search on Felvin instead" and seamlessly switch from Google to Felvin.

Β· 2 min read
Rajiv Harlalka

Good search results are one of the most basic tasks that a search engine performs. Google is famous for this ability and hence is the most used search engine. But it is afterall the world of technology where things dont stay constant forever. As technology evolves , new and better alternatives emerge.

Felvin is such of this kind. Felvin aims to put a cherry on top of what most search engines provide. Providing a better search experience is what Felvin looks forward to.

Topic of Work and Motivation behind it#

Looking for code syntax, implemenations and snippets are the daily needs of any developer. This becomes tedious a lot when this simple task requires the user to jump between sites to find relevant data. Making an instant app for Reference Implementation of Code Snippets was the topic that I took up as my project.

Implementation of my work#

There exists various open source project where algorithms in various languages have been compiled. Two of them were Rosetta code and The Algorithm. Their code snippets was kept in well maintained directory structure which I used to compile a single json using a js script. After the json was made , much of the task was done. A simple API service which took the query string and parsing the algorithm and language was enough to look for the specific code snippet. This code snippet was sent over over to the React app where the input was passed down to the Monaco editor component which rendered on the user's screen.

Sample Search Query

Demo: GIF

The extra edge#

Since the Monaco editor is itself used by vscode, it provides code completion for the languages which would help users to write code πŸŽ‰

Β· 3 min read
Nehal Sharma

Until now, there was no obvious and easy way to appreciate the variety and ever growing number of the open source Instant Apps Felvin has to offer. I understood how important an Instant Apps' Marketplace, a place where you could view and try out all the available apps in a swift and easy manner, would be, and hence this is the problem I sought to fix during my internship with Felvin!

The Actual Issue#

To put it less glamorously, creating an autogenerated and always updated marketplace boiled down to this: Fix the bundling of the apps npm package and fix those import errors that sometimes showed up, sometimes didn't.

Figuring out the Root of the Problem:#

Taking the most obvious first step, I searched the error, and as expected, multiple ways showed up which worked differently for different projects. And no amount of searching could explain the reason this error occurred only sometimes. I then turned to experimentation, and spent a lot of time importing the apps package in different environments, while also reading about how bundling works and the intricacies of imports and exports. I tried importing apps individually too, where I saw another new error pop up! Though it was admittedly frustrating to spend days documenting the cases imports worked and the cases they didn't, without any measurable outcome, this method did pay off and granted me a moment of near enlightenment when I observed a pattern and realized that the apps package import only failed in node / server side environments! The new error too, I noticed, only cropped up when the app imported had any asynchronous functionality.

Once I had figured out the cause of the errors, the rest was relatively smooth sailing. The new error was an easy fix, and I made a small tweak in the app's bundling to ensure it supported async functions. For the marketplace, we are using docusaurus for the entire Felvin Docs website, which is server side rendered by default. I searched for a way to have a part of it be client side rendered instead, and came upon the BrowserOnly component which allowed just that! Using that, the import worked and I was quickly able to modify the pre-existing but static marketplace with only a tenth of all apps, to instead use the imported data. There was already a GitHub Workflow ready to update the apps package to its latest version every midnight. So now, the client side rendering of the marketplace, along with the daily automated updates ensures that the marketplace is dynamic and updated, with a new Instant App showing up on the marketplace within 24 hours!

Felvin Instant Apps Marketplace

A Surprise Bonus#

Until I made the Marketplace self updating, I thought of extracting the data of all current Instant Apps to have a somewhat updated Marketplace in its lieu. While trying out ways to do so, I ended up making a temporary (or so I initially thought) Instant App to provide me the current data of all the apps in JSON format. Soon I realized that with some UI changes, this Instant App can be used as an alternative showcase for all Instant Apps! Now, anytime you search felvin something like "Felvin Instant Apps" or "what instant apps are available" a carousel showcasing all the Instant Apps will appear.

An Instant App of Instant Apps... isn't that so meta?!

Β· One min read
Sahil Shubham

We are resuming our weekly releases once again!

New#

  • We have 5 new apps this week - unit convertor, url encoder decoder, felvin apps markeplace app, what day and stopwatch. Checkout our instant-apps repository to see how these work.
  • Get back to search bar by pressing "/" to easily continue searching

Behind the Scenes#

  • We have been seeing new developers in our community with the help of Kharagpur Winter of Code (KWoC)
  • More updates concerning our package resturcting coming next week.

In the works#

  • Better styled components are coming soon, developers would have an easier time making a new app with our pre-made UI components
  • We are also working towards the merging of neera.ai functionality in our felvin search.

Team Updates#

  • Nehal and Rajiv have joined us interns for this winter. They are picking up things really quickly and rest of the team are amazed by their enthusiam towards work.

Β· 4 min read
Harsh Gupta

Last weekend at Felvin, we hosted an open source hackathon on instant apps. The purpose was twofold, one to give students a little nudge to create instant apps, two to stress test our instant apps system and see how easy it is for people to create instant apps. Happy to call the Hackathon a success on both fronts. Each participant created 4.5 instant apps on average in less than 48 hours. Either the participants were very motivated or we made it very easy for them to create the instant apps or both πŸ˜‰.

Here are our winners:

Nehal Sharma#

Bio#

πŸ‘‹ I am Nehal Sharma, a 2nd year student at IIIT Lucknow, studying Computer Science. I enjoy web development, and love contributing to open source. These days I'm engrossed in Hacktoberfest, and it's been both hectic and fun, and of course full of learning! Thanks to this project, I learnt how to write styled components, and brushed up my React skills this weekend.

GitHub: @N-Shar-ma

Apps Created#

Markdown to HTML#

Given Markdown generates corresponding HTML which has the same output as the inputted markdown, and lets the user easily copy he HTML

markdown-to-html

QR Code Generator#

Encode ANY string, be it a link or plain text, in a QR code

generate-qr

Website Finder#

Find the icon for any website

Trending on GitHub#

Get an overview of the top 8 trending repositories of the day without needing to go to GitHub's website

Merge PDFs#

Merge multiple PDFs into 1 PDF

Hello World in multiple languages#

Check out what the hello world program looks like in over 650 languages (this is an app I've personally wanted to have since long)

hello-world-program

Harsh Mishra#

Bio#

Hey, I am Harsh Mishra, a Junior in ECE at IIT Dhanbad. I am a Machine Learning and an Open Source Enthusiast. This year I had my Google Summer of Code with AOSSIE organisation. I love to work on projects solving real-life problems. These days I am exploring Web Dev.

This hackathon has helped me brush up on my React Skills. I learned about many different modules, which I hadn't encountered till now. I also learned about styled-components too.

From my personal Experience, Creating Instant Apps was super cool and easy, and I'll be looking forward to contributing further.

GitHub: @MiHarsh

Apps Created#

Flip a coin#

An instant app that simulates flipping a coin and results in either Heads or Tails.

toss-coin

Unit Convertor#

Users will now be able to perform Unit conversions with the support of 45 different unit types. No longer need to search for other converters.

Photo Hosting#

A Photo hosting service Instant App that greatly facilitates everyday work with various types of graphics. It helps to create a URL for our images quickly to promote sharing them with other users easily.

upload-image

Image Cropper#

An Instant app for cropping images, enabling easy selection, cropping and downloading images.

crop-image

Rajiv Harlalka#

Bio#

Hola everyone πŸ˜ƒ! Rajiv(aka: Vijard πŸ§™πŸ»β€β™‚οΈ ) this side . I am a second year UG student at IIT Kharagpur , currently motivated more towards backend engineering and web development (πŸ•ΈοΈ <-- not this one ofc ) . Contributions to this project was start to my open-source journey and hoping to do more in the near future. Learnt a lot about UI styling and React during this hackathon as well as contributing in this project.

GitHub: @rajivharlalka

Apps Created#

Color Picker#

Color Picker, allows user to pick colors

color-picker

Crypto Prices#

See live prices of crypto currencies like Bitcoin and Etherium

crypto

Live Markdown Preview#

Live Markdown editor and preview

Image Compressor#

Compresses and image to save space, can be useful for Government forms which have limit on image sizes.

compress-image

Chirag Ghosh#

Bio#

Heya! Chirag here. I am a student interested in coding and trying to fit in the open-source world. I love web development ( frontend more ). Also, I love clicking photos.

GitHub: @chirag828049

Apps Created#

JWT Token decoder#

PR LinkThis instant app will help developers validate the JWT tokens. decode-jwt

Pokedex#

PR Link : Ofcourse the pokemon world is lovely. Fulfilling the love for pokemon is an instant app a.k.a mini pokedex.

pokemon-stats

The TV Shows app#

PR Link My friends suggest me various TV series all day. Getting info about them with just one click is kinda a necessity now. This app caters to that need. tv-shows-app

URL Shortener#

PRLink : No more lengthy urls. cut them short. (Bonus: Rickroll your friends using a different link. Satisfaction!). shorten-url


Curious? Checkout our instant-apps github repository to learn more about instant apps. Happy Hacking πŸ’»

Β· 2 min read
Harsh Gupta

Neera is now called Felvin! Felvin is the younger, stronger, smarter nephew of the wizard Merlin. Out on a quest to write his own story. Whatever you want, Felvin will find it for you.

Why change names?

We chose the name Neera because it means water. It allows you to be in "flow", it quenches your thirst for curiosity, It takes whatever shape you want to give it.

Back then we weren't aware of Neeva, like us they are trying to reimagine how we find information. They have been in the scene for a little longer, and this is what happens when you search for Neera using Google or Bing.

People were getting confused. Even friends thought perhaps we made a typo 😬. And then, another company pivoted, changed their business model and called themselves NIRA (https://nira.com/) πŸ™ˆ

We realized that continuing with the name "Neera" is only going to hurt us. Being water also means being willing to adapt according to the demands of the situation. So we decided to change the name.

Why Felvin?

We were looking for a name that is short, easy to remember and has a dotcom domain available. After a lot of work, we invented the name "Felvin". Felvin is short, and sweet, just six characters. It turns out the word is not new, but it is fairly unique and we were not only able to get a dotcom but a lot of its variations as well :P including felv.in

It has been little over a month since we decided on Felvin, and we have grown to really like it.

I hope Felvin is able to cast some magic on you, and the world. πŸͺ„βœ¨

Β· 2 min read
Harsh Gupta

Few weeks ago, I briefly talked about how Neera is β€œAmazon for Search”. [1]

I explained the concept more visually here:

https://drive.google.com/file/d/1dGIozwbDBo0aQyYfufrXBw9lDeMiH92B/view

The important point is that Amazon is a marketplace. It connects demand with supply, making it easier for seller to sell, buyer to buy. I bought a beautiful rug online, it came from Jalandhar to Bangalore. Pre Amazon (or Flipkart) era, I had no way to buy from that seller and that seller had no means to sell to me. [2]

Now, search is the window to the Internet. Search is the way we make sense of the explosion of information which has happened around us. You want to search all kind of things, from all kind of places. Unfortunately your present search experience is limited by what Google decides to do. It does a good job at web search, it has created specific search engines for few other things like image search, news search, Google Scholar and Google Patents. But, even with the amount of money and muscle Google has, they cannot solve search for everyone. The only way we can solve search for everyone is by allowing people to solve it for each other. I want to search on HackerNews, someone has created a search on HackerNews. You want a search on podcast, someone has created a search on podcasts. [3] And there are hundreds of other use cases. We want to be the place, where these search providers can find you, and through these awesome search providers, you can find whatever you want.