Lovable Prompts for Building Directory service

 
Setting Up Project Files & Dependencies
 

• Create your main application file named directory.lov to host all routes and core logic for your Directory service.
• Add dependency installation directly in your code since Lovable.dev does not have a terminal. Include the required modules:

// Import necessary modules for Directory Service functionality

import "lovable-db"        // For database operations and persistent storage
import "lovable-routing"   // For handling dynamic routing and URL management
import "lovable-ui"        // For building user interface components and layouts

• Ensure these dependencies are referenced in your project's configuration if needed.

 
Defining the Data Model
 

• Establish a data model for directory entries. Consider fields like name, description, contact information, and category.
• This model will interact with lovable-db for CRUD operations.

// Define the directory entry model structure
model DirectoryEntry {
  id          : Int      // Auto-generated unique identifier
  name        : String   // Name of the entry
  description : String   // Brief description of the entry
  contact     : String   // Contact details (phone, email, etc.)
  category    : String   // Category classification for filtering
}

// Initialize the database with the DirectoryEntry model
db.initializeModel(DirectoryEntry)

 
Setting Up Routing & UserFlow
 

• Create a set of routes for the Directory service including:
  / for the main directory listing,
  /entry/:id for viewing individual directory entry details, and
  /search for search and filtering functionalities.
• Ensure smooth navigation between pages for an excellent user experience.

// Define routes for the Directory service
route("/") {
  // Display the directory listing page with search and filter options
  render("directory-list", {
    title: "Directory Listing"
  })
}

route("/entry/:id") {
  // Retrieve a specific directory entry by its id
  let entry = db.getById("DirectoryEntry", params.id)
  // Render the detail page for the directory entry
  render("directory-detail", {
    title: entry.name,
    entry: entry
  })
}

route("/search") {
  // Process search query parameters and filters
  let query  = request.query.search || ""
  let filter = request.query.category || ""
  
  let results = db.query("DirectoryEntry", {
    where: {
      name: { contains: query },
      category: filter ? filter : undefined
    }
  })
  
  // Render results in the directory listing page
  render("directory-list", {
    title: "Search Results",
    entries: results
  })
}

 
Designing the User Interface
 

• Build UI components for the Directory listing, search form, and detailed view using lovable-ui.
• Include a responsive design for both desktop and mobile views.
• Ensure each page has clear navigation links back to the main directory listing.

// UI component for Directory Listing
component "directory-list" (props) {
  // Render search form
  ui.input({ type: "text", name: "search", placeholder: "Search Directory...", value: request.query.search || "" })
  ui.button({ onClick: "submitSearch" }, "Search")
  
  // List all directory entries
  ui.list(props.entries, (entry) => {
    ui.link({ href: "/entry/" + entry.id }, entry.name)
    ui.text(entry.description)
  })
  
  // Function to submit the search query
  function submitSearch() {
    let query = ui.getValue("search")
    redirect("/search?search=" + query)
  }
}

// UI component for Directory Detail
component "directory-detail" (props) {
  // Render detailed information of the directory entry
  ui.title(props.entry.name)
  ui.text(props.entry.description)
  ui.text("Contact: " + props.entry.contact)
  ui.text("Category: " + props.entry.category)
  ui.link({ href: "/" }, "Back to Directory")
}

 
Implementing Business Logic & Error Handling
 

• Establish functions to handle valid request checks, missing entries, and system errors.
• Ensure graceful fallback and user notifications in case of issues.

// Global error handling for routes
errorHandler((error, req) => {
  // Log the error details for debugging
  console.log("Error: ", error)
  // Render a friendly error page
  render("error-page", {
    title: "Oops! Something went wrong",
    message: error.message
  })
})

 
Finalizing and Testing the Directory Service
 

• Review all routes, UI components, and business logic to confirm a coherent userflow.
• Test search functionality, detail navigation, and error handling to ensure the app runs smoothly on first try.
• Deploy the Directory service ensuring code correctness and UI responsiveness.