scwilkinson / twitter-search

Instantly search across your entire Twitter history with a beautiful UI powered by Algolia.

Home Page:https://twitter-search.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Twitter Search

Instantly search across your entire Twitter history with a beautiful UI powered by Algolia. (link)

Build Status JavaScript Style Guide

Screenshot of search UI

Features

  • πŸ’― Open source
  • πŸ™ˆ Hosted version provided by Saasify
  • πŸ™‰ Self-hosted version is easy to set up
  • 🐳 Built using Algolia, Twitter API, and ZEIT
  • πŸ’ͺ Scales pretty nicely via serverless magics
  • πŸ€– Includes an auto-generated OpenAPI spec
  • πŸ‘ Super simple -- Algolia and Saasify do all the hard work for us

Saasify

This entire product was built and launched in around 8 hours.

The only reason it was possible to build a production-quality SaaS MVP this quickly was because Saasify handled all of the tedious parts, including:

  • User accounts
  • Stripe billing
  • Auto-generated marketing site
  • API authentication
  • Twitter OAuth
  • Rate limiting
  • Caching
  • Legal docs
  • Monitoring
  • Lots of glue and book-keeping

All of this functionality and most of the UI was auto-generated from this simple saasify.json config file.

The key to Saasify's power is that it handles all of this SaaS boilerplate for you, allowing you to focus solely on your product's unique value proposition.

Implementation

Twitter Search's unique value prop comes in the form of two pieces: a REST API that handles the core functionality (src/) and a webapp for the UI (web/).

The REST API is written in TypeScript using Koa and tsoa. Each API endpoint receives some custom headers from Saasify's API proxy that let it know everything about the authenticated user making the request.

These headers include:

  • x-saasify-user - String ID of the authenticated user making the API call.
  • x-saasify-plan - String slug of the pricing plan this user is subscribed to.
  • Additional headers specific to Twitter OAuth

The embedded webapp can be viewed from the dashboard and is a standard Create React App written in JavaScript. It's embedded in an iframe within Saasify's auto-generated host SPA which informs the webapp of the details for the authenticated user via a small JS script called saasify-sdk.

The React webapp also uses Chakra UI as a beautiful and lightweight component library.

Of course, this product's core feature set wouldn't be possible without Algolia powering the search and ZEIT hosting the serverless API and embedded static webapp.

Looking to the future

The way this product was built may sound a bit complicated and it's definitely not as simple as we'd like at the moment. Even so, we hope it provides a good example of Saasify's potential to help developers quickly get their ideas off the ground.

Our team is working very hard to improve the developer experience that Saasify provides, and we hope to make this type of integration much simpler in the coming months. Feel free to follow our progress via our open source repo.

Some of the related roadmap items that I'm particularly excited about include:

  • A visual template editor that mirrors the Saasify CLI's functionality.
  • The ability to eject from our hosted SaaS boilerplate and fully customize your product.
  • Breaking out the current monolithic React frontend into embeddable blocks that you can use with any website or framework.
  • Continuing to build a strong community of successful Indie SaaS makers who have used Saasify to get their ideas to market.

If you want to learn more about how Saasify works and experiment with rapidly launching your own SaaS products, check out our docs and feel free to get in touch.

License

MIT Β© Saasify

About

Instantly search across your entire Twitter history with a beautiful UI powered by Algolia.

https://twitter-search.io


Languages

Language:TypeScript 55.2%Language:JavaScript 32.5%Language:CSS 9.4%Language:HTML 2.8%