-
-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5cbfd4d
commit d1e2063
Showing
2 changed files
with
205 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,204 @@ | ||
--- | ||
title: 'Notiolink' | ||
description: 'Self-hostable branded link shortener built with Next.js & Notion API' | ||
category: 'Personal Project' | ||
publishedAt: '2022-07-23' | ||
techs: 'nextjs,tailwindcss,notion' | ||
banner: 'projects/notiolink/notiolink_bjtkm5.png' | ||
github: 'https://github.com/theodorusclarence/notiolink' | ||
link: 'https://notiolink.thcl.dev' | ||
--- | ||
|
||
> ## Short Explanation | ||
Notiolink is a self-hostable link shortener built with Next.js & Notion API. It's a simple and easy-to-deploy shortener that's using Notion as a CMS. | ||
|
||
Some features including: | ||
|
||
- ⚡ Unlimited branded links (use your own domain!) | ||
- ☝ Self-hostable with Vercel | ||
- 💨 Fast redirect using Next.js Middleware Functions | ||
- 🌑 Awesome CMS using Notion | ||
- ➕ See click count statistics | ||
- 💠 Zero config, all customizable via env | ||
- 💅 Numerous themes | ||
|
||
> ## Project Goals | ||
I did this project originally for my personal use. Shortening links is easier for me to remember than having to search through numerous bookmarks. I can just pick a short slug—which usually is not an option when you are using a free service—and remember it. | ||
|
||
<blockquote className='with-icons'> | ||
## Tech Stack Used | ||
<div class='not-prose mt-2'> | ||
<TechIcons techs={['nextjs', 'tailwindcss', 'notion']} /> | ||
</div> | ||
</blockquote> | ||
|
||
Notiolink is a full-stack application built using Next.js and Notion API. I chose notion because of the easy-to-use UI. All links are served as a table inside the notion and can be edited whenever you want. | ||
|
||
> ## Features | ||
### Notion CMS | ||
|
||
All links are customizable via notion | ||
|
||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/notion-table_br6ebb' | ||
alt='notion-table' | ||
width={1339} | ||
height={875} | ||
/> | ||
|
||
### Link Tree Page | ||
|
||
You can easily configure it on the notion database | ||
|
||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/linktree_kbtwts' | ||
alt='linktree' | ||
width={605} | ||
height={706} | ||
/> | ||
|
||
### Add New Link | ||
|
||
Route: `/new` | ||
|
||
You can add link straight from the website for easy access, don't worry **this is protected with login page** so no one will mess with your links | ||
|
||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/shorten-new-link_tkinse' | ||
alt='shorten-new-link' | ||
width={632} | ||
height={567} | ||
/> | ||
|
||
### Link Details & Count | ||
|
||
You can see the statistics with `/:slug/detail` route | ||
|
||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/link-details-and-count_ae7x2e' | ||
alt='link-details-and-count' | ||
width={682} | ||
height={672} | ||
/> | ||
|
||
### Categorized Tree | ||
|
||
Every category will be made into a standalone tree on `/c/:category` route | ||
|
||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/categorized-tree_aeottm' | ||
alt='categorized-tree' | ||
width={567} | ||
height={563} | ||
/> | ||
|
||
### Themes | ||
|
||
Themes you can choose | ||
|
||
<small>Pro tip: click the image to make it full screen</small> | ||
|
||
<SplitImage> | ||
<Split> | ||
<div class='not-prose space-y-2'> | ||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/theme-dark_sspfwt' | ||
alt='theme-dark' | ||
width={648} | ||
height={622} | ||
/> | ||
<p class='text-center text-sm font-medium'>Dark</p> | ||
</div> | ||
<div class='not-prose space-y-2'> | ||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/theme-street_nx7i4f' | ||
alt='theme-street' | ||
width={648} | ||
height={622} | ||
/> | ||
<p class='text-center text-sm font-medium'>Street</p> | ||
</div> | ||
<div class='not-prose space-y-2'> | ||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/theme-milky_z60zsu' | ||
alt='theme-milky' | ||
width={648} | ||
height={622} | ||
/> | ||
<p class='text-center text-sm font-medium'>Milky</p> | ||
</div> | ||
</Split> | ||
<Split> | ||
<div class='not-prose space-y-2'> | ||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/theme-light_pmkjnq' | ||
alt='theme-light' | ||
width={648} | ||
height={622} | ||
/> | ||
<p class='text-center text-sm font-medium'>Light</p> | ||
</div> | ||
<div class='not-prose space-y-2'> | ||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/theme-monokai_ndz8rx' | ||
alt='theme-monokai' | ||
width={648} | ||
height={622} | ||
/> | ||
<p class='text-center text-sm font-medium'>Monokai</p> | ||
</div> | ||
</Split> | ||
</SplitImage> | ||
|
||
> ## Spotlight | ||
### Creating An Easy To Deploy App | ||
|
||
I aim for this project to be easy to fork and deploy. Therefore, every configuration is done via environment variables. | ||
|
||
### Installation Guide | ||
|
||
I made an [installation guide](https://www.notion.so/Notiolink-Installation-Guide-3d038711cd5141109f56137d0195aad0) that is easy for people to follow. Even non-developers can do it too! | ||
|
||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/notiolink-installation-guide_hcgett' | ||
alt='notiolink-installation-guide' | ||
width={785} | ||
height={645} | ||
/> | ||
|
||
### Launching on ProductHunt | ||
|
||
I launched the app on [ProductHunt](https://www.producthunt.com/products/notiolink), and the review is quite positive! | ||
|
||
<CloudinaryImg | ||
mdx | ||
publicId='theodorusclarence/projects/notiolink/producthunt_boyaq5' | ||
alt='producthunt' | ||
width={449} | ||
height={344} | ||
/> | ||
|
||
> ## The Problems and How I Deal With It | ||
Optimizing the repository so it is fairly customizable is hard. I created some features which users can customize and have to account for whether the feature will be hard to implement or set up. However, it was a thought-provoking activity that I enjoyed. | ||
|
||
> ## Try it out! | ||
Deploy one of your own! | ||
|
||
<GithubCard repo='theodorusclarence/notiolink' /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters