Enjoy building your own URL Shortener! 🚀

Short Freely - A full-stack URL shortner application

A full-stack web application that allows users to create shortened URLs from long URLs with additional features like custom slugs, QR code generation, and link analytics. Built using React, Appwrite, and Tailwind CSS.

🚀 Introduction

A full-stack web application that allows users to create shortened URLs from long URLs with additional features like custom slugs, QR code generation, and link analytics. Built using React, Appwrite, and Tailwind CSS.

The Problem

In today’s digital age, individuals and businesses frequently share long, unwieldy URLs across various communication channels, such as social media, emails, and messaging platforms. These lengthy URLs can create multiple challenges.

The Solution

The goal is to build a modern, user-friendly full-stack URL shortener application that empowers users to convert long URLs into concise, shareable links. This application bridges the gap between simplicity and functionality, providing a robust platform for URL shortening, analytics, and management. It is designed to focus on good UI/UX, ensuring its relevance and adaptability for evolving user needs.

🚀 Tech Stacks

Design & Planning

Figma: For designing and prototyping the basic web layout for web.

Frontend

React: For building a responsive and interactive user interface.
Tailwind CSS: For styling and layout.
Redux Toolkit: For state management and efficient data flow.
React Router Dom: For routing inside react app.
React Hook Form: For building scalable forms and form validations.
Motion: Also known as Framer motion for animating react jsx.
Ua Parser js: The Essential Web Development Tool for User-Agent Detection.
Recharts: For visualizing analytics data in the dashboard.

Backend

Appwrite: For database, authentication, and API management.

🚀 Features

👉 Authentication System: A robust authentication system ensuring security and user privacy.
👉 User-friendly Dashboard: User will be provided a Dashboard where he/she can manage account, created short urls and its analytics.
👉 Shorten URLs: Convert long URLs into short, easy-to-share links.
👉 Custom Slugs: Define custom back-halves for your links (e.g., https://short.ly/custom-slug).
👉 URL Redirect: Redirect users to the original URL when they visit the shortened link. Example: Visiting https://yourapp.com/abc123 takes the user to https://example.com/very-long-url.
👉 Detailed URL Page: A detailed URL page displaying content and URL Analytics for an immersive user experience.
👉 Edit & Delete Functionality: Provide users with the ability to edit and delete the existing URL at any time.
👉 QR Code Generation: Automatically generate QR codes for shortened links.
👉 Performence Analytics: Track user activity, including device, OS, location, and browser.
👉 Best UI/UX: Focused on best UI/UX for the users.
👉 Backend as a Service (BaaS) - Appwrite: Utilize Appwrite as a Backend as a Service solution for streamlined backend development, offering features like authentication, database, file storage, and more.

🚀 UI Designs

Home Page

Auth Page

Dashboard Page

List o URLs Page

Popups

🚀 Setup and Installation

Prerequisites

Node.js (v16+ recommended) and npm installed.
An Appwrite instance running locally or hosted.
Vercel account for deployment (optional).

Clone Repository

git clone https://github.com/SujoyKrHaldar/Short-freely.git
cd url-shortener

Install Dependencies

npm install

Configure Environment Variables

Create a .env file in the root directory and add the following:

VITE_CLIENT_URL = http://localhost:5173
VITE_APPWRITE_URL = https://appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_URL_COLLECTION_ID=
VITE_APPWRITE_ANALYTIC_COLLECTION_ID=
VITE_GET_LOCATION_API_URL= "https://ipapi.co/json"

Start Development Server

npm run dev

The app will run locally at http://localhost:5173.

🚀 Usage

Create Shortened URLs

Enter the long URL in the Destination URL field.
Optionally, add a custom title or slug.
A QR code generation will be generated based on Destination URL.
Click the Create button to generate your shortened link.

Query Parameters Support

You can prefill the Destination URL using query parameters:

For loggedin users

/dashboard/create?longurl=https://example.com

For Public users it will look like this for better User Experience

/login?redirectTo=/dashboard/create?longurl=https://example.com

View QR Code

A QR code will appear below the form after pasting Destination URL. You can download it for sharing or copy short url as well.

🚀 Routes & Endpoints

Overview of routes and their functionality in the application.

Frontend

Public Routes (Accessible without authentication)

Route	Description	Example URL	Features
`GET /`	Landing page with an overview of the app and a form for shortening URLs.	https://your-app.com/	- Input field for entering long URLs. - Option to customize the short URL slug (if allowed).
`GET /redirect/:shortUrlSlug`	Redirects users to the original long URL.	https://your-app.com/redirect/xYz123	- Handles redirection to the original URL. - Tracks click metrics (if implemented).
`GET /404`	Page displayed when a user accesses an invalid route or slug.	https://your-app.com/404	- Informs users about invalid URLs.
`GET /login`	User login page.	https://your-app.com/login	- Allows users to log in to their accounts.
`GET /register`	User registration page.	https://your-app.com/register	- Facilitates user account creation.

Private Routes (Accessible after authentication)

Route	Description	Example URL	Features
`GET /dashboard`	Displays a user's shortened URLs, stats, and quick actions.	https://your-app.com/dashboard	- List of all created short URLs. - Options to copy, edit, or delete a URL. - View click stats.
`POST /dashboard/create`	Form for creating a new shortened URL.	https://your-app.com/dashboard/create	- Option to enter the original URL. - Custom slug or auto-generate. - Set an expiration date (optional).
`GET /dashboard/edit/:urlId`	Edit an existing shortened URL.	https://your-app.com/dashboard/edit/xYz123	- Modify the original URL or slug. - Update the expiration date or other metadata.
`GET /dashboard/:urlId`	Displays analytics for a specific short URL.	https://your-app.com/dashboard/xYz123	- Click count, geographic data, referral sources.
`GET /dashboard/account`	Manage account settings.	https://your-app.com/dashboard/account	- Update profile information. - Change password.

Appwrite Backend API Endpoints

API Endpoint	Description	Example
`/v1/databases/{databaseId}/collections/{collectionId}/documents`	Create Short URL	- Create a document with original URL, slug, and optional metadata.
`/v1/databases/{databaseId}/collections/{collectionId}/documents`	Fetch All URLs	- Retrieve all documents representing URLs in the collection.
`/v1/databases/{databaseId}/collections/{collectionId}/documents/{documentId}`	Delete URL	- Remove a specific document representing a URL by its ID.

🚀 Data Modeling

There will be two collection 1. URL 2. Analytics we will wonk on.

User Collection

Tracks analytics data for each click on a shortened URL.

Field	Type	Description
`_id`	ObjectId	Unique identifier for the user entry.
`name`	String	Full name of the user.
`email`	String	User's email address (unique).
`password`	String	Hashed password.
`clickedAt`	Date	Account creation timestamp..
`updatedAt`	Date	Last profile update timestamp.

URLs Collection

Stores information about shortened URLs.

Field	Type	Description
`_id`	ObjectId	Unique identifier for the shortened URL.
`originalUrl`	String	The full URL provided by the user.
`shortUrl`	String	The shortened URL slug .
`userId`	ObjectId	Reference to the user who created the URL (null if public).
`clickCount`	Number	Total number of clicks on the shortened URL.
`qrCode`	String	Path or URL to the generated QR code (auto generated).
`customSlug`	String	Custom slug for short URL (optional & unique).
`createdAt`	Date	Timestamp of URL creation.
`updatedAt`	Date	Timestamp of last modification.

Analytics Collection

Tracks analytics data for each click on a shortened URL.

Field	Type	Description
`_id`	ObjectId	Unique identifier for the analytics entry.
`urlId`	ObjectId	Reference to the shortened URL.
`ipAddress`	String	IP address of the user clicking the URL.
`userAgent`	String	Browser/OS/device information.
`location`	String	Geolocation data based on IP (e.g., country, state, city).
`clickedAt`	Date	Timestamp of the click.
`shortUrl`	String	Short url provided.

Relationships

Relationship	Type	Description
`Users → URLs`	One-to-Many	A user can create multiple shortened URLs.
`URLs → Analytics`	One-to-Many	A shortened URL can have multiple analytics entries (one for each click).

🚀 Directory structure

Directory structure/
    ├── .env.example
    ├── index.html
    ├── eslint.config.js
    ├── public/
    ├── postcss.config.js
    ├── vercel.json
    ├── package.json
    ├── vite.config.js
    ├── README.md
    ├── tailwind.config.js
    └── src/
        ├── api/
        │   ├── urlService.js
        │   ├── authService.js
        │   ├── analyticService.js
        │   └── initServer.js
        ├── App.jsx
        ├── state/
        │   ├── auth/
        │   │   ├── authSlice.js
        │   │   └── authAction.js
        │   ├── notification/
        │   │   ├── notificationSlice.js
        │   │   └── notificationAction.js
        │   ├── rootReducer.js
        │   ├── index.js
        │   └── store.js
        ├── assets/
        │   ├── svgs/
        │   │   └── Logo.jsx
        │   ├── illustrations/
        ├── components/
        │   ├── layouts/
        │   │   ├── index.jsx
        │   │   ├── main/
        │   │   │   ├── MobNavbar.jsx
        │   │   │   ├── MainLayout.jsx
        │   │   │   ├── Header.jsx
        │   │   │   ├── Footer.jsx
        │   │   │   └── Navbar.jsx
        │   │   └── dashboard/
        │   │       ├── DashboardLayout.jsx
        │   │       ├── DashboardHeader.jsx
        │   │       └── DashboardSidebar.jsx
        │   ├── shared/
        │   │   ├── index.jsx
        │   │   └── MetaTags.jsx
        │   ├── ui/
        │   │   ├── index.jsx
        │   │   ├── forms/
        │   │   │   ├── Input.jsx
        │   │   │   ├── SignupForm.jsx
        │   │   │   └── LoginForm.jsx
        │   │   └── notification/
        │   │       ├── NotificationCard.jsx
        │   │       └── NotificationUi.jsx
        │   └── pages/
        │       ├── dashboard/
        │       │   ├── index.jsx
        │       │   ├── search/
        │       │   │   └── DeshboardSearch.jsx
        │       │   ├── short-links/
        │       │   │   └── DashboardShortLinks.jsx
        │       │   ├── create-url/
        │       │   │   └── DashboardCreateShortUrl.jsx
        │       │   ├── url-details/
        │       │   │   ├── DashboardUrlDetails.jsx
        │       │   │   ├── DashboardUrlAnalytics.jsx
        │       │   │   ├── DashboardUrlOptions.jsx
        │       │   │   └── DashboardSingleUrlPage.jsx
        │       │   ├── shared/
        │       │   │   ├── DashboardLinkCard.jsx
        │       │   │   ├── DashboardBreadcrumb.jsx
        │       │   │   ├── charts/
        │       │   │   │   ├── LineChartComponent.jsx
        │       │   │   │   ├── PieChartComponent.jsx
        │       │   │   │   └── BarChartComponent.jsx
        │       │   │   ├── ShareLinkPopup.jsx
        │       │   │   ├── NoResultFallbackUi.jsx
        │       │   │   ├── LinkDeletePopup.jsx
        │       │   │   ├── ErrorFallbackUi.jsx
        │       │   │   └── DashbaordLinkForm.jsx
        │       │   ├── edit-url/
        │       │   │   └── DashboardEditUrl.jsx
        │       │   ├── home/
        │       │   │   ├── DashboardHomeUrlLists.jsx
        │       │   │   └── DashboardHome.jsx
        │       │   └── account/
        │       │       ├── DashboardProfileEdit.jsx
        │       │       ├── DashboardAccount.jsx
        │       │       ├── DashboardSessions.jsx
        │       │       ├── DashboardAccountEditTemplate.jsx
        │       │       └── DashboardPasswordUpdate.jsx
        │       └── home/
        │           ├── HomeTestimonialSection.jsx
        │           ├── index.jsx
        │           ├── HomeLandingSection.jsx
        │           ├── HomeFeatureSection.jsx
        │           ├── HomeProductUsedBySection.jsx
        │           ├── HomeFooterSection.jsx
        │           ├── HomeFaqSection.jsx
        │           └── HomeAboutSection.jsx
        ├── styles/
        │   └── index.css
        ├── hooks/
        │   ├── index.jsx
        │   ├── useQueryParams.jsx
        │   ├── useAuth.jsx
        │   ├── useFetchUrlById.jsx
        │   ├── useLogout.jsx
        │   ├── useFetchUrls.jsx
        │   └── useNotification.jsx
        ├── main.jsx
        ├── config/
        │   └── index.js
        ├── routes/
        │   ├── index.jsx
        │   ├── PrivateRoutes.jsx
        │   ├── PublicRoutes.jsx
        │   └── AuthRoutes.jsx
        ├── pages/
        │   ├── index.jsx
        │   ├── auth/
        │   │   ├── Login.jsx
        │   │   └── Signup.jsx
        │   ├── public/
        │   │   ├── RedirectUrl.jsx
        │   │   ├── Home.jsx
        │   │   └── PageNotFound.jsx
        │   └── private/
        │       ├── SearchLinks.jsx
        │       ├── Account.jsx
        │       ├── EditShortUrl.jsx
        │       ├── CreateShortUrl.jsx
        │       ├── AllShortLinks.jsx
        │       ├── Dashboard.jsx
        │       └── UrlDetails.jsx
        ├── router.jsx
        └── utils/
            ├── imageUrls.js
            └── constants.js

🚀 Deployment

Deploying Frontend

Build the React app:
```
npm run build
```
Deploy the build folder to Vercel or any static hosting service.

Deploying Backend

Host your Appwrite instance on a platform like Render or AWS or use their cloud service for free for better experience.
Configure your database and collection settings in Appwrite.

Enjoy building your own URL Shortener! 🚀

Name		Name	Last commit message	Last commit date
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

Short Freely - A full-stack URL shortner application

🚀 Table of Contents

🚀 Introduction

The Problem

The Solution

🚀 Tech Stacks

Design & Planning

Frontend

Backend

🚀 Features

🚀 UI Designs

Home Page

Auth Page

Dashboard Page

List o URLs Page

Popups

🚀 Setup and Installation

Prerequisites

Clone Repository

Install Dependencies

Configure Environment Variables

Start Development Server

🚀 Usage

Create Shortened URLs

Query Parameters Support

View QR Code

🚀 Routes & Endpoints

Frontend

Appwrite Backend API Endpoints

🚀 Data Modeling

User Collection

URLs Collection

Analytics Collection

Relationships

🚀 Directory structure

🚀 Deployment

Deploying Frontend

Deploying Backend

Enjoy building your own URL Shortener! 🚀

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages