Skip to content

Latest commit

 

History

History
135 lines (85 loc) · 3.43 KB

README.md

File metadata and controls

135 lines (85 loc) · 3.43 KB

Wrapper: A Custom URL Shortener & Analytics Dashboard

Welcome to Wrapper, a full-stack application that allows users to create, manage, and customize short links effortlessly. Wrapper also provides a powerful analytics dashboard to track and visualize clicks based on location, device type, and more.

Live Demo: wrapper

Features

🔗 Short Link Management

  • Create shortened URLs with ease.
  • Update and customize link thumbnails, titles, and descriptions.
  • Manage all your links in one place.
  • Share links via QR Code.
  • Dark and light mode.

📊 Analytics Dashboard

  • Clicks Overview: Track the total number of clicks on each link.
  • Geolocation Insights: See where your users are coming from (country, Region and city).
  • Device Analytics: Identify the types of devices your users use.

🚀 Real-Time Data Integration

  • Utilize the ipinfo API to gather user location and device information dynamically.

⚙ Tech Stack

Category Technology
Frontend React, TypeScript, SCSS
Backend Express, Node.js
Database MongoDB
APIs Used ipinfo API
Charts Apex Charts

Screenshots

Installation and Setup

Prerequisites

Ensure you have the following things:

  • Node.js: Version 18 or higher - download Node.js from nodejs.org
  • MongoDB_URI: You need MongoDB URI to connect with your MongoDB database. refer to this
  • Cloudinary: You need Cloudinary API key to upload images. refer to this
  • IpInfo_API: You need ipinfo API key to collect Geolocation Insights. refer to this

Steps to Set Up Locally

  1. Clone the Repository

    git clone https://github.com/MK884/wrapper.git

  2. Install Dependencies
    Navigate to both client and server directories to install dependencies:

    cd client
npm install
cd ../server
npm install

  3. Environment Variables

    1. Create a Copy of .env.example from root directory:
    cp server/.env.example server/.env
cp client/.env.example client/.env

    1. Fill in the environment variables:

      Open the newly created .env files in both the server and client folders and replace placeholder values like with your actual environment-specific values.

  4. Start the Application
    Start both the frontend and backend servers:

    # Start Backend
cd server
npm run dev

# Start Frontend
cd client
npm run dev

    The application will be available at http://localhost:3000.

Usage

  1. Sign Up / Log In

    • Create an account or log in to access the platform.

  2. Create Short Links

    • Use the dashboard to generate short URLs and customize metadata.

  3. View Analytics

    • Open the analytics tab to explore location, device type, and click trends.

Enjoy using Wrapper! 🎉