• Stars
    star
    201
  • Rank 194,491 (Top 4 %)
  • Language
    TypeScript
  • License
    Apache License 2.0
  • Created over 3 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

✂️ Layanan pemendek tautan yang mudah, gratis & tanpa iklan

ksana.in

ksana.in

✂️ Open source URL shortener, free to use and without ads

Deployment Website Up

Features

  • Fully open source
  • Mobile First UI (best view in your mobile device)
  • Full authentication flow
    • Login (with Email or third parties: Google, GitHub and Twitter)
    • Register manual using email
    • Forget Password and set new password
  • Simple hit stats on every short URL
  • Share the link using Native Share API for mobile device and fallback to WA, Twitter and Facebook share.
  • Copy the link using new Clipboard API, fallback to old school copy-to-clipboard mechanism

Screenshots

Homepage Homepage Homepage

Installation

Copy file .env.local.example to .env.local and change value with your own supabase url and anonymous key. You can get it after register and create your own project on Supabase.io.

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Creating table on Supabase

Go to the SQL tab and execute this query on the editor.

create table urls (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  real_url text check (char_length(real_url) > 1),
  slug text check (char_length(slug) > 1),
  hit integer default 0,
  is_dynamic smallint default 0,
  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null,
  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
);

Click RUN to execute the query

Creating triggers on Supabase

Go to the SQL tab and execute this query on the editor.

Add triggers for "updated_at" field, copy this code on the same SQL editor

create extension if not exists moddatetime schema extensions;

-- this trigger will set the "updated_at" column to the current timestamp for every update
create trigger handle_updated_at before update on public.urls
  for each row execute procedure moddatetime (updated_at);

Click RUN to execute the query

Creating View on Supabase

Go to the SQL tab and execute this query on the editor.

create view distinct_users as
    select distinct(user_id) from public.urls;

Click RUN to execute the query

Additional settings for Authentication

  • on Authentication setting, change Site URL to /callback. e.g: https://ksana.in/callback, for development just set it to http://localhost:3000/callback
  • To support Google Login, in Authentication setting page, set the Google Client ID and Google Secret
  • Increase JWT expiry time to 604800 for longer session. It's on on Authentication setting menu

Add environment variables on Vercel

You can found all required environment variables on .env.local.example

Register you own Splitbee

Ksana.in using Splitbee for Analytic, if you plan to deploy it by yourself, you might need to register your own Splitbee account.

Can I deploy to my own domain?

The code is open for learning purpose. But in case you didn't like the default domain (ksana.in), feel free to deploy to your own domain. Since Ksana.in is using a free plan from Supabase, it have many limitation in term of size. If you plan to use it in the bigger frequency, I suggest to deploy it with your own Supabase plan.

The Apps based on Ksana.in's codebase

Credits

Support me


Copyright ©️ 2021 by Irfan Maulana

More Repositories

1

hello-open-source

🖐️ A repository to learn about open source code contributions flow
JavaScript
586
star
2

bulma-admin-dashboard-template

🐝 Free admin dashboard template with bulma css
EJS
390
star
3

baca-quran.id

📖 Read Qur'an from Your Web Browser. No Ads, No Analytics, It's Totally Free.
TypeScript
385
star
4

auto-commit

🌳 Making green your Github stats, powered by Github Actions
301
star
5

vue-google-adsense

💰 Vue.js Google Adsense Component with InFeed and InArticle Ads support
Vue
257
star
6

vue-currency-filter

🍒 Lightweight vue currency filter based on accounting.js
TypeScript
247
star
7

vue2-simplert

⚠️ Vue 2 Simple Alert Component (SweetAlert Inspired)
JavaScript
214
star
8

graphql-pokeapi

🔴 The Unofficial GraphQL for PokeAPI
JavaScript
175
star
9

login-page-css

🔐 An Open Source Template for Login Page From Scratch Without Any CSS Framework
HTML
171
star
10

vue-select-image

✅ Vue 2.x component for selecting image from list
JavaScript
145
star
11

tanyaaja.in

❓Kumpulkan pertanyaan secara anonim dari siapa saja dengan mudah
TypeScript
132
star
12

nuxt-storage

🛢 Utilities for easy read and write browser's storage in Nuxt.js project
TypeScript
126
star
13

bulma-resume-template

💼 Free resume page template with bulma css
EJS
108
star
14

mazipan.space

👿 Codebase for mazipan.space. Next.js x Tailwind
JavaScript
98
star
15

pramuka-id

🌴 Kumpulan informasi digital mengenai berbagai materi pramuka, materi kenegaraan dan materi kecakapan umum
TypeScript
98
star
16

vue-ionicons

⛄️ Vue Icon Set Components from Ionic Team
CSS
96
star
17

awesome-js-dev-id

😎 Daftar para developer/programmer javascript terkece asal Indonesia
93
star
18

vue-tiny-lazyload-img

🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API
JavaScript
92
star
19

psi-gh-action

🐯 Github Action to generate web performance report for JAMStack using PageSpeedInsight
JavaScript
77
star
20

awesome-sde-id-medium

😎 Daftar akun Medium.com keren dari para pegiat software engineering di Indonesia
JavaScript
76
star
21

bem-kit

💄 CSS UI kit with BEM convention and SASS
SCSS
68
star
22

explore-github

🐙🔍 VueJS 2 Github Explorer Using API v3
Vue
56
star
23

webperf-ecommerce-id

⚡️ Web Perf Comparison for E-Commerce in Indonesia
TypeScript
40
star
24

cors-hijacker

💀 A bare-minimum solution to solve CORS problem via proxy API
TypeScript
39
star
25

ebook-belajar-frontend

WIP - 📚 Buku panduan untuk menyelami dunia pengembangan antarmuka website
JavaScript
39
star
26

vue-string-filter

✂️ Vue 2.x lightweight string manipulation filter
TypeScript
38
star
27

modernize-landing-page

How to creating landing page in modern frontend stack
HTML
36
star
28

blog-2.0

🗣 A personal blog by Irfan Maulana built with Nuxt.js
Vue
32
star
29

milligram-admin-dashboard-template

💦 Admin dashboard template built with milligram css
HTML
31
star
30

vue2-simplert-plugin

⚠️ Vue 2 Simple Alert Plugin (SweetAlert Inspired)
Vue
30
star
31

nodejs-simple-restfull-with-express

⚡ ExpressJS Rest API Sample
JavaScript
30
star
32

vue-doughnut-chart

🍩 Doughnut chart component for Vue.js, originally created by Greg Willson
Vue
29
star
33

bulma-dracula

😈 Bulma css with Dracula dark color themes
HTML
25
star
34

bootstrap4-admin-dashboard-template

🅱️ Bootstrap 4 admin dashboard template
HTML
25
star
35

react-testing-workshop

Code sample for showcasing basic React Testing Library
TypeScript
25
star
36

vue-wwwid

🐢️️️ PWA with Vue + Workbox for WWWID RSS Feed
JavaScript
23
star
37

RumahSakitJakarta

🏥 Daftar Rumah Sakit Umum, Khusus dan Puskesmas di Jakarta
Vue
22
star
38

react-simplert

NOT MAINTAINED ⚠️ ReactJS Simple Alert Component (SweetAlert Inspired)
JavaScript
22
star
39

talks

🎙️Public talks by @mazipan
JavaScript
20
star
40

chucknorris

🏋️ Chuck Norris Jokes Generator
Vue
20
star
41

ghibli-fans

🐰 Browse film, character, etc from Ghibli Studio
JavaScript
19
star
42

workbox-in-js-framework

🍳 Code sample for using Workbox in various JS framework
JavaScript
17
star
43

react-workshop

⚛️ A workshop to get started with React
JavaScript
17
star
44

lightweight-admin-template

🚀 Lightweight admin template for your web application
HTML
16
star
45

gdk-mws-2018-participants-code

🎥 Dokumentasi kode untuk Google Developer Kejar - Mobile Web Specialist 2018
HTML
16
star
46

eslint-formatter-html-extended

🌹 Beautiful ESLint HTML formatter extended from ESLint's official HTML formatter by JulianLaval combined with Stylish by Sindre Sorhus
HTML
14
star
47

ghibli-api

👽 The Unofficial Ghibli Studio API
TypeScript
14
star
48

webperf-psi

🚀 Easy to use, PSI API hit using Node.js to collect Web Performance Metrics
JavaScript
13
star
49

nuxt-blog

📝 Personal blog built with Nuxt.js and wordpress rest api
Vue
13
star
50

project-catalog

🎁 List of all Irfan Maulana's open source project and library
JavaScript
13
star
51

FireJak

🚒 Aplikasi Daftar Pos Pemadam Kebakaran di Jakarta
Vue
13
star
52

bumi-langit-scrapper

Scrapper website bumilangit.com
JavaScript
12
star
53

visit-me

🏖 Visit your web page easier using CLI, powered by Puppeteer and Node-Fetch
JavaScript
12
star
54

ghibli-reasonreact

👻 Ghibli studios's film explorer built with ReasonReact
Reason
12
star
55

papercss-admin-dashboard-template

📜 Free admin dashboard template built with PaperCSS
HTML
12
star
56

vue-complexify

👮 Vuejs porting library from jquery.complexify.js
HTML
12
star
57

sample-swagger-for-nodejs

📚 Sample of using swagger.io with Nodejs
JavaScript
12
star
58

journey-to-the-frontend-world

🌏 Introduction Frontend Stack
HTML
11
star
59

gridsome-blog

Blog with gridsome
Vue
11
star
60

cek-halal

🍔❓ Cek produk halal berdasarkan sertifikat dari MUI
JavaScript
11
star
61

vue-offcanvas-menu

💃 Showing off-canvas menu effects stylishly with Vue.js
JavaScript
10
star
62

nodejs-jakarta-api

Node.js wrapper for JakGo API (api.jakarta.go.id)
TypeScript
10
star
63

testing-vuenuxt-playground

🌻 Playground for setup example and get in action with Unit Test on Nuxt, Vue 2 and Vue 3
JavaScript
9
star
64

ng2-starwars

🌟 Star Wars API Implementation in Angular2
TypeScript
8
star
65

ghibli-svelte

👻 Ghibli studios's film explorer built with Svelte
CSS
7
star
66

ng2-simplert

⚠🅰 Angular 2 Simple Alert Component (SweetAlert Inspired)
TypeScript
7
star
67

mazipan

🧙‍♀️ A magic readme 🌟
7
star
68

webpack-training

🤼‍♂️ A webpack training repository
JavaScript
7
star
69

akamai-image-converter

🏞 Simple javascript util for Akamai image converter
JavaScript
7
star
70

museum-indonesia

Open source web apps for browse Museum in Indonesia
Vue
7
star
71

angularjs-basic-tutorial

❄️ Angularjs v.1.x Basic Tutorial
HTML
7
star
72

personal-nextjs-starter

❇️ My personal Next.js starter for future projects
TypeScript
6
star
73

vue-webpack-sample

🐣 Sample initialize Vue.js project using Vue-CLI webpack template
Vue
6
star
74

awesome-vue-list

😎 A curated list of awesome things related to Vue.js based on awesome-vue repository
JavaScript
6
star
75

gdk-mws-2018-challenge-01-ghibli-studio

👾 Google Developer Kejar Mobile Web Specialist 2018 - Challenge 01 - Playing with Ghibli Studio Public API
JavaScript
6
star
76

awesome-bemcss

Renamed to bem-kit
CSS
6
star
77

awesome-sde-id-blogs

Daftar blog keren dari para pegiat software engineering di Indonesia
5
star
78

angular-wwwid

🅰️ Angular PWA WWWID RSS Reader
TypeScript
5
star
79

learn-php-oop-like-java

Sample of Object Oriented Programming in PHP Language that influenced from Java
PHP
5
star
80

node-playground

A personal Node.js playground
JavaScript
5
star
81

phpid-uxd-landingpage-prototype

PHP Indonesia UXD Landing Page Prototype
HTML
5
star
82

vue-cli-sample

Project created with Vue-CLI 3
Vue
5
star
83

preact-script2

Preact component for insert <script> tag, inspired by vue-script2
JavaScript
5
star
84

simple-ampify

⚡ A simple plain HTML to AMP converter for personal use
HTML
5
star
85

lighthouse-behind-auth

🙈 Codelab for running Lighthouse to test a page behind authentication flow
HTML
5
star
86

wibu

⛩ Anime explorer, using data from AniList
TypeScript
5
star
87

how-to-call-api-in-nodejs

❓ How to make an API call in Node.js
JavaScript
4
star
88

pengenalan-vuejs-dasar

📖 Repository pengenalan framework Vue.js dasar dalam bahasa Indonesia
4
star
89

medium-stories

💼 HTML files of Medium.com stories that I have published
HTML
4
star
90

blog-comments

💬 Blog comment repository for mazipan.space, powered by utteranc.es
4
star
91

pkmn-catcher

👾 Just Another Pokèmon Catcher, based on PokeAPI v2
TypeScript
3
star
92

workshop-delightful-web

Repository for workshop "Create a delightful web with good DX"
JavaScript
3
star
93

discussions

🤼 Open discussions with @mazipan
3
star
94

Syamil-AlKhawarizmi

Hello world from Syamil Al-Khawarizmi
JavaScript
3
star
95

mazipan.github.io

📺 A github page for mazipan.github.io
SCSS
2
star
96

setup-vue-without-vue-cli

How to create skeleton project in Vue.js from basic without Vue-CLI
JavaScript
2
star
97

JavaSwing-SimpleApplicationDesktopTemplate

💻 Basic Template for Desktop Application Window with Java Swing
Java
2
star
98

Java-SwingCustomComponent

Advance Custom Component for Java Swing
Java
2
star
99

Java-PerpustakaanOnline

📘 Sample of JavaEE using servlet
Java
2
star
100

blogs

🐚 Markdown content from mazipanneh.com/blog/
CSS
2
star