shrinker Svelte Themes

Shrinker

A full stack url shortener web application with user authentication built with SvelteKit and PocketBase as a BaaS.

screens


A full stack URL shortener web application with user authentication built with

svelte     tailwind     pr     pb


screens


I start learning the most beloved framework Sveltekit and that's what i'm using in the frontend

❯ Features

  • Login/register with Google
  • Login/register with Github
  • Authentication using email/password with email verification
  • Resetting the Password
  • Create a short link and set an expire period to it (Optional)
  • Get all links associated with the authenticated user
  • Delete the short link
  • Edit user profile (Profile Photo & Fullname)
  • Edit user account (Changing email & username)
  • Edit user security (Changing password & deleting user account)
  • All User entries are server side validated using Zod

❯ Getting Started

Live demonstration of the application available Here

  • Download the latest version of Pocketbase and run the executable with ./pocketbase serve or deploy it to a cloud provider

  • Import collections from pocketbase-collections.json to your pocketbase instance found in this link: http://localhost:8090/_/?#/settings/import-collections.

  • Register an app with your OAuth provider to acquire a Client ID and Client Secret : (for Google, you can create a Google App here). (for Github, you can create a Github App here).

    From there, you should be able to set the Redirect URL (if applicable) of your OAuth App to http://localhost:5173/auth/login

  • Register your app as an OAuth provider inside pocketbase (which can be accessed here if you're working locally with the default PB host settings) or read the docs here

Env

Rename the .env.example file in the root directory of the repo to .env and populate it with the following:

PUBLIC_POCKETBASE_URL="http://localhost:8090" # default

Developing

Once you've cloned the project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev
# or start and open the app in a new browser tab
npm run dev -- --open

Building

npm run build
node build

You can preview the built client app with npm run preview,This should not be used to serve your app in production.


❯ About

Contributing

Pull requests and stars are always welcome. For bugs and features requests, please create an issue.

❯ License

Copyright © 2023-present, Ysn4Irix. Released under the MIT License.

Top categories

Loading Svelte Themes