LinkX - URL Shortener Clone

A responsive, full-stack URL shortener application built with React and Node.js, inspired by Bitly.

Features

Tech Stack

Prerequisites

Installation & Setup

1. Install Dependencies

Run the following command from the project root to install all dependencies:

npm run install-all

This will install dependencies for:

2. Environment Configuration

The application uses SQLite by default, so no database URL configuration is needed for basic setup. The database file will be automatically created in server/data/LinkX.db.

If you want to use a different database (PostgreSQL or MongoDB), you can configure it in server/.env:

cd server
cp .env.example .env

Then edit server/.env and uncomment/configure the database settings you need.

3. Start the Application

From the project root, run:

npm run dev

This will start both the backend server (port 5000) and frontend development server (port 3000).

Alternatively, you can run them separately:

Terminal 1 - Backend:

npm run server

Terminal 2 - Frontend:

npm run client

Usage

1. Open your browser and navigate to http://localhost:3000
2. Paste a long URL in the input field
3. Optionally, click "Custom Code" to set a custom short code
4. (Optional) Click "Expire/Limit" to set an expiration date or max clicks
5. Click "Shorten URL"
6. Copy and share your shortened URL!

API Endpoints

POST /api/urls/shorten

Create a new short URL

{
  "originalUrl": "https://example.com/very/long/url",
  "customCode": "optional-custom-code"
}

GET /api/urls

Get all shortened URLs (with limit query param)

GET /api/urls/:code

Get URL details by short code

GET /api/urls/:code/redirect

Redirect to original URL (increments click count)

GET /api/urls/:code/stats

Get statistics for a short URL

Project Structure

linkx/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── App.js
│   │   └── index.js
│   └── package.json
├── server/                 # Express backend
│   ├── data/              # SQLite database (auto-created)
│   ├── routes/            # API routes
│   ├── database.js        # Database configuration
│   ├── index.js           # Server entry point
│   └── package.json
├── package.json           # Root package.json
└── README.md

Database Setup

SQLite (Default - No Setup Required)

The application uses SQLite by default. The database file is automatically created at server/data/linkx.db when you first run the server. No additional configuration needed!

PostgreSQL (Optional)

If you want to use PostgreSQL instead:

1. Install PostgreSQL and create a database
2. Update server/.env:

   DB_TYPE=postgresql
   DB_HOST=localhost
   DB_PORT=5432
    DB_NAME=linkx
   DB_USER=your_username
   DB_PASSWORD=your_password
   

3. Update server/database.js to use PostgreSQL client (pg)

MongoDB (Optional)

If you want to use MongoDB:

1. Install MongoDB and start the service
2. Update server/.env:

   DB_TYPE=mongodb
    DB_CONNECTION_STRING=mongodb://localhost:27017/linkx
   

3. Update server/database.js to use MongoDB client (mongodb)

Environment Variables

Create server/.env file (optional, defaults work fine):

PORT=5000
BASE_URL=http://localhost:5000

For frontend, create client/.env (optional):

REACT_APP_API_URL=http://localhost:5000/api

Building for Production

To build the frontend for production:

cd client
npm run build

The production build will be in client/build/.

License

MIT

Notes