URL Shortener Project 🔗

Project Overview

This project is a URL shortening service that allows users to create shorter, more manageable links from long URLs. It provides analytics on the shortened URLs, such as the number of visits, device types, and operating systems used to access them. The frontend is built with React and Vite, while the backend uses Node.js, Express, and PostgreSQL (Neon DB).

Project Deployment (with a placeholder for the deployment URL)

[Deployment URL - Placeholder] 🚀

Table of Contents

• Project Name
• Project Overview
• Project Deployment
• Table of Contents
• Project Features
• Project Tech Stack
• Project Requirements
• Visual Image
• Project Installation & Setup
• Project Contribution Guidelines
• Project License
• Project Contact Information
• Project Conclusion

Project Features

• URL Shortening: Create shortened URLs from long URLs. ✂️
• User Authentication: Secure user authentication using Auth0. 🔑
• URL Management: List and manage shortened URLs owned by a specific user. 📁
• Analytics: Track visits, device types, and operating systems for each shortened URL. 📊
• Real-time Updates: Fast Refresh during development with Vite. ⚡

Project Tech Stack

• Frontend:
  • React: A JavaScript library for building user interfaces. ⚛️
  • Vite: A build tool that provides a fast and optimized development experience. 🚀
  • Recharts: A charting library for displaying analytics data. 📈
  • Lucide React: A library of icons for UI elements. 🌠
  • Auth0: A platform for user authentication and authorization. 🛡️
  • Tailwind CSS: A utility-first CSS framework for styling the UI. 🎨
• Backend:
  • Node.js: A JavaScript runtime environment for server-side development. ⚙️
  • Express: A web application framework for Node.js. 🌐
  • PostgreSQL (Neon DB): A powerful open-source relational database system. 🐘
  • pg: Node.js module for interacting with PostgreSQL databases. 📦
  • dotenv: Loads environment variables from a .env file. 🔑
  • cookie-parser: Parses HTTP request cookies. 🍪
  • nanoid: A tiny, secure, URL-friendly unique string ID generator. 🆔
  • ua-parser-js: A lightweight JavaScript library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data. 💻
  • cors: Middleware to enable Cross-Origin Resource Sharing. 📡

Project Requirements

• Node.js and npm (or yarn/pnpm) installed.
• PostgreSQL database (Neon DB) set up with connection string in environment variables.
• Auth0 account configured with domain and client ID in environment variables.

Visual Image

[Image URL Placeholder] 🖼️

Project Installation & Setup

1. Clone the repository:

   git clone <repository_url>

2. Navigate to the project directory:

   cd <project_directory>

3. Install backend dependencies:

   cd backend
   npm install

4. Install frontend dependencies:

   cd ../frontend/url-manager
   npm install

5. Configure environment variables:
   • Create .env files in both the backend and frontend/url-manager directories.
   • Add the necessary environment variables (e.g., database connection string, Auth0 domain, Auth0 client ID).
6. Run the backend server:

   cd ../backend
   npm start

7. Run the frontend development server:

   cd ../frontend/url-manager
   npm run dev

Project Contribution Guidelines

[Contribution Guidelines Placeholder] 🤝

Project License

[License Placeholder] 📜

Project Contact Information

[Contact Information Placeholder] 📧

Project Conclusion

This URL Shortener project provides a comprehensive solution for shortening URLs and tracking their analytics. By leveraging modern technologies and a user-friendly interface, it offers a valuable tool for managing and analyzing links. Future enhancements could include custom URL slugs, user roles, and more detailed analytics reports.