Creating a New Lovable Project
 

Using Lovable, start by creating a new project. In the Lovable dashboard, click “New Project” and choose Python as your language. Name your project (for example, “URL Shortener App”). This project will contain all of your code files.

 
Setting Up Dependencies
 

Because Lovable does not have a terminal, you install dependencies by creating a file that lists them. Create a new file in your project named requirements.txt and insert the following code snippet. This file tells Lovable which libraries your app needs.

Flask

Lovable will read this file and install Flask automatically.

 
Creating the Main Application File
 

Now create a new file named app.py. This file will contain all the logic for your URL shortener application. Open app.py in the Lovable code editor.

 
Adding URL Shortener Logic to Your App
 

Copy the following code snippet into your app.py file. This code uses Flask to create a simple web server that accepts a URL through a form, generates a random short code, and stores the URL in a temporary in-memory dictionary. When the short URL is visited, it redirects to the original URL.

from flask import Flask, request, redirect, render_template_string
import random
import string

app = Flask(name)
Dictionary to store the mapping between short codes and original URLs.
url_mapping = {}
Function to generate a random alphanumeric code.
def generate_short_code(length=6):
    return ''.join(random.choices(string.ascii_letters + string.digits, k=length))
Route for the home page with a form to enter a URL.
@app.route('/', methods=['GET', 'POST'])
def home():
    message = ''
    if request.method == 'POST':
        original_url = request.form.get('url')
        short_code = generate_short_code()
        url_mapping[short_code] = original_url
        message = f"Short URL: {request.host_url}{short_code}"
    return render_template_string("""
    
      
        
      
      
        
URL Shortener

        

          
          Shorten
        

        
{{ message|safe }}

      
    
    """, message=message)

Route to redirect short URL to the original URL.
@app.route('/<short_code>')
def redirect_short(short_code):
    original_url = url_mapping.get(short_code)
    if original_url:
        return redirect(original_url)
    return "URL not found", 404
Run the app on Lovable.
if name == 'main':
    app.run(host='0.0.0.0', port=8000)

Save the app.py file after pasting the code.

 
Understanding the Code
 

The code is divided into several parts:

• Imports and Initialization: Imports necessary modules and creates a Flask instance.
• Data Storage: A simple dictionary url\_mapping is used to store the relationship between the short code and the original URL.
• Short Code Generation: The function generate_short_code creates a random string of 6 characters.
• The Home Route: Displays a form to input a URL. When submitted, it generates a short code and shows the short URL.
• Redirection Route: When a short URL is accessed, the redirect_short function looks up the original URL from url_mapping and redirects the user.
• Running the App: The standard Python block to run the Flask server.

 
Testing Your URL Shortener Application
 

In Lovable, click the “Run” button to start your application. The app will start on port 8000 and Lovable will provide a live URL for testing.

Visit the live URL in your web browser. You should see a form where you can enter a URL to shorten. After submitting a URL, a short URL will be displayed. Clicking the short URL should redirect you to your original URL.

 
Final Notes
 

Each time you make changes to your code, save the file and click “Run” in Lovable to update your live application. Remember that the URL mapping is stored in a temporary in-memory dictionary; if the server restarts, the data will be lost. For persistent storage, you would need to integrate a database.

 

Prerequisites

 

• A basic computer with internet access.
• An AI code generator tool (like GitHub Copilot, ChatGPT, etc.) to help automate parts of the coding process.
• Familiarity with a simple programming language such as Python. Don’t worry if you’re not an expert—the AI tool will assist you.
• A web browser and a text editor or an online IDE (like Replit) for writing your code.

 

Planning Your URL Shortener App

 

• Decide the core functionality: converting a long URL into a shorter one, storing the mapping, and redirecting users.
• Outline the features: simple input for users, shortening service, storage for URL mappings, and redirection to the original URL.
• Decide on the technologies: for this guide, we will use Python with the Flask framework.

 

Setting Up Your Development Environment

 

• Install Python on your computer if it is not already installed.
• Set up an IDE or a text editor like Visual Studio Code or use an online environment like Replit.
• Create a new project folder for your URL shortener app.
• Inside your project folder, create a file named app.py which will contain your application code.

 

Generating Code with an AI Code Generator

 

• Open your chosen code editor and start a new file (app.py).
• Interact with your AI code generator by describing what you want; for example, “Create a Flask application that accepts a URL, generates a short code, stores the mapping, and then redirects when the short URL is accessed.”
• Review the AI suggestions, modify them if necessary, and insert the code into app.py.

 

Implementing the URL Shortener Logic

 

• Create the core functionality in your Flask application. Below is an example code snippet:

• 
  from flask import Flask, request, redirect, jsonify
  import string
  import random
  
  app = Flask(name)
  Dictionary to hold URL mappings in memory
  url_mapping = {}
  def generate_short_code(length=6):
      characters = string.ascii_letters + string.digits
      return ''.join(random.choices(characters, k=length))
  @app.route('/shorten', methods=['POST'])
  def shorten_url():
      data = request.get_json()
      original_url = data.get('url')
      if not original_url:
          return jsonify({'error': 'URL is required'}), 400
      short_code = generate_short_code()
      url_mapping[short_code] = original_url
      short_url = request.host_url + short_code
      return jsonify({'short_url': short_url})
  @app.route('/<short_code>')
  def redirect_to_url(short_code):
      original_url = url_mapping.get(short_code)
      if original_url:
          return redirect(original_url)
      return jsonify({'error': 'Invalid short URL'}), 404
  if name == 'main':
      app.run(debug=True)
      

  
  


• This code sets up a basic API endpoint that creates a short URL and a dynamic route to handle redirection.

 

Testing Your Application

 

• Run your application using the command line by navigating to your project folder and typing python app.py (or use your online IDE’s run feature).
• Use a tool like Postman or your browser to test the endpoints:
  • POST a JSON object with a long URL to the /shorten endpoint.
  • Copy the returned short URL and paste it into your browser to see if it redirects correctly.
• Observe the terminal for any errors to adjust your code if needed.

 

Implementing Best Practices

 

• Ensure proper error handling so that all user inputs are checked for validity. The example verifies if a URL is provided.
• Use logging to capture important events such as errors or redirection attempts. This can be added as your application grows.
• Consider storing URL mappings in a database for persistence instead of an in-memory dictionary.
• Secure your application by validating input data and following best security practices.

 

Deploying Your URL Shortener App