Swappy.one: Swap your Twitter image based on interest/season temporarily or forever

Swappy.one

Swappy.one: Swap your Twitter image based on interest/season temporarily or forever

Simple & Fun project for Supabase Holiday Hackdays!
Swap your Twitter image based on interest/season temporarily or forever!

Swappy.one: Swap your Twitter image based on interest/season temporarily or forever

🚀 Features

  • 🎉 Add badges/frame to your Twitter profile
  • 🤩 Share templates with your friends to enjoy this festive season
  • 🔒 Only update your profile image
  • 🤚 Customize the placement of element yourself

📇 About The Project

This project is inspired by Facebook’s Temporary Profile Picture, as well as the Twitter Space’s logo when someone is joining a Space. Thus, I’ve created this apps to swap your plain Twitter picture to fit the season/event/anything that you want your follower to notice!

After a certain amount of period (you can configure on the app), it will automatically swap back (hence, Swappy) to your original image. And you can revisit the app when you feel like putting on another badges in the future.

Author: @zernonia

🔨 Built With

⚡ Supabase Service

  • Supabase Database
  • Supabase Auth (Twitter)
  • Supabase Storage
  • Postgres Function

Postgres SQL

  1. Store user’s history

    create or replace function public.handle_new_user_image()
    returns trigger as $$
    begin
      insert into public.user_history (user_id, template, new_image_key)
      values (new.id, new.template, new.new_image_key);
      return new;
    end;
    $$ language plpgsql security definer;
    
    create trigger on_new_user_image
      after insert or update of update_on on public.user
      for each row execute procedure public.handle_new_user_image();
  2. Invoke Vercel serverless function

    create or replace function change_back_image_vercel_webhook (input_id uuid)
      returns integer
      language plpgsql
      as
      $$
        begin
          return (select
            net.http_post(
                url:='https://swappy.one/api/user/change_back_image',
                body:=(
                  select json_build_object(
                    'id', a.id,
                    'old_image_key', a.old_image_key,
                    'token', a.oauth_token,
                    'secret', a.oauth_token_secret
                    ) as body
                  from (select a.id, a.old_image_key, b.oauth_token , b.oauth_token_secret
                    from public.user a inner join public.user_token b on a.id = b.user_id where a.id = input_id) a
                )::jsonb
            ) as request_id);
        end;
      $$
  3. Function to query all the rows that need to change back their image, and loop through each row and call the change_back_image_vercel_webhook

    create or replace function check_date_and_change_back()
      returns table (request_id int)
      language plpgsql
      as
      $$
        declare
          r record;
        begin
          for r in (
            select * from public.user
            where now() > change_back_date and changed_back = false
          ) loop
              request_id := change_back_image_vercel_webhook(r.id);
              return next;
            end loop;
        end;
      $$;
  4. CRON job to start the function #3 every hour.

    create extension if not exists pg_cron;
    grant usage on schema cron to postgres;
    grant all privileges on all tables in schema cron to postgres;
    
    select
      cron.schedule(
        'change_back_user_old_image',
        '0 */1 * * *', -- “At minute 0 past every 1th hour.”  https://crontab.guru/#0_*/1_*_*_*
        $$
          select check_date_and_change_back()
        $$
      );

🌎 Local Development

Prerequisites

Yarn

npm install --global yarn

Development

  1. Clone the repo

    git clone https://github.com/zernonia/swappy-one.git
  2. Install NPM packages

    yarn install
  3. Create .env

     VITE_SUPABASE_URL=
     VITE_SUPABASE_ANON_KEY=
     VITE_SUPABASE_SERVICE_KEY=
     VITE_TWITTER_CONSUMER_KEY=
     VITE_TWITTER_CONSUMER_SECRET=
     TWITTER_ACCESS_TOKEN_KEY=
     TWITTER_ACCESS_TOKEN_SECRET=
     VITE_TWITTER_BEARER_TOKEN=
  4. Run Development instance

    vercel dev

➕ Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

🙏 Acknowledgement

  1. Fundamental for this Visualization (Generate database types from OpenAPI specification)
  2. Guide to Construct Dynamic SVG Connector (Connecting Table using SVG)
  3. Icones – icon gallery

📜 License

Not Associated with Supabase.

Distributed under the MIT License. See LICENSE for more information.

📧 Contact

Zernonia – @zernoniazernonia@gmail.com

Also, if you like my work, please buy me a coffee ☕😳


Swappy.one: Swap your Twitter image based on interest/season temporarily or forever

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram

Why do People Say: "Developers are Lazy"?
The saying “work smart, not hard” is applicable for programmers.
.
https://hackernoon.com/why-do-people-say-developers-are-lazy

.
Author: Aga Wozniak
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

Mitigating the DDOS Threats Facing Banks and Fintechs
As much as digitization and cyber simplified banking, the Fintech sector has left digital payment activity exposed to malicious and suspicious activity.
.
https://hackernoon.com/mitigating-the-ddos-threats-facing-banks-and-fintechs

.
Author: Josh Horowitz
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

24 Best JavaScript Blogs and Websites
In this overview, we have compiled a list of popular sites, as well as JS blogs that are worth reading and keeping in your bookmarks.
.
https://hackernoon.com/24-best-javascript-blogs-and-websites

.
Author: natashatsybliyenko
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

The Projects Working to Lower Ethereum Gas Fees
As more investors try their hand at DeFi, gas fees are shooting over the roof, making engaging with decentralized apps uneconomical for most users.
.
https://hackernoon.com/ethereum-gas-fees-are-there-any-projects-working-to-optimize-eth-gas-fees

.
Author: CryptoVirally SLR
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

On the Edge of a New Year: IT Predictions for 2022
The single biggest cause of network errors are people.
.
https://hackernoon.com/an-interview-with-uplogix-ceo-lisa-frankovitch

.
Author: Mignonette Garnier
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

How to Modernize IBM i Applications
If you’re like most IBM i users, you know how much value your IBM i data and applications bring to your business. Your end-users, however, may not. In today’s world of rich user experience, fast-paced application development, and constantly evolving customer expectations, IBM i applications are unde…
.
https://hackernoon.com/how-to-modernize-ibm-i-applications

.
Author: Lansa
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...