Lovable Prompts for Building Project management tool

 
Setting Up Project Files & Dependencies
 

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

// Import necessary modules for Project Management Tool

import "lovable-db"         // For database operations and persistent storage
import "lovable-auth"       // For user authentication and role management
import "lovable-ui"         // For dynamic user interface components
import "lovable-notify"     // For real-time notifications and updates
import "lovable-calendar"   // For scheduling and calendar functionalities

• Ensure these dependencies are correctly referenced in your project's configuration section.

 
Designing Data Models
 

• Define data models for Projects, Tasks, Milestones, and Users, ensuring clear relationships among them.
• A Project should include attributes such as owner, members, creation date, and update timestamps.
• A Task model should capture details like title, description, status, assignee, due date, and project link.
• Create a Milestone model to group tasks and mark significant project phases.

// Defining the Project model
model Project {
  id         string     // Unique project identifier
  name       string     // Project title
  owner      string     // Owner's user id
  members    list       // List of user ids in the project
  createdAt  datetime   // Project creation timestamp
  updatedAt  datetime   // Last update timestamp
}

// Defining the Task model
model Task {
  id           string   // Unique task identifier
  projectId    string   // Associated project id
  title        string   // Task title
  description  string   // Detailed task description
  assignedTo   string   // User id of the assignee
  status       string   // Task status: pending, in-progress, or completed
  dueDate      datetime // Task deadline
  createdAt    datetime // Task creation timestamp
  updatedAt    datetime // Last update timestamp
}

// Defining the Milestone model
model Milestone {
  id         string     // Unique milestone identifier
  projectId  string     // Associated project id
  title      string     // Milestone title
  dueDate    datetime   // Milestone deadline
  tasks      list       // List of tasks associated with the milestone
  createdAt  datetime   // Milestone creation timestamp
  updatedAt  datetime   // Last update timestamp
}

 
Creating User Authentication and Roles
 

• Utilize "lovable-auth" for handling user registration, login, and session management.
• Define user roles such as Admin, Manager, and Collaborator with specific permissions for project operations.
• Implement middleware to protect sensitive routes, ensuring only authenticated users perform certain actions.

// Setting up user authentication routes

route "/register" {
  method: "POST"
  handler: function(request) {
    // Validate new user data, register user, and assign default role as Collaborator
  }
}

route "/login" {
  method: "POST"
  handler: function(request) {
    // Process user login, create session, and return authentication token
  }
}

// Authentication middleware to protect routes
middleware "authRequired" (req, res, next) {
  // Verify session token; if valid, proceed, else return unauthorized error
}

 
Building the User Interface and Interaction Flow
 

• Design intuitive UI components using "lovable-ui" for managing projects, tasks, and milestones.
• Create a Dashboard component to display active projects, upcoming deadlines, and notifications.
• Include interactive forms for creating and editing tasks, setting deadlines, and adding milestones.

// Dashboard component displaying active projects, tasks, and notifications
component Dashboard {
  template: \`
    

      
Project Dashboard
      // Render projects summary, tasks list, and a calendar overview here
    
  \`
}

// Component for viewing detailed project information
component ProjectView {
  template: \`
    

      
Project Details
      // Display project information including task lists and team members
    
  \`
}

// Component for the task creation form
component TaskForm {
  template: \`
    

      
Create New Task
      // Form fields for task title, description, assignee, and due date
    
  \`
}

 
Project and Task Management Logic
 

• Implement functions to create, update, and delete projects and tasks.
• Use "lovable-notify" to trigger real-time notifications for project updates and task status changes.
• Ensure business logic accurately updates project progress based on task completion and milestone achievement.

// Function to create a new project
function createProject(data) {
  // Validate project data and save to the database
  db.save("Project", data)
  notify.broadcast("New project created", data.owner)
}

// Function to update the status of a task
function updateTaskStatus(taskId, status) {
  // Update the task status in the database
  db.update("Task", taskId, { status: status })
  notify.send("Task status updated", getUser(taskId.assignedTo))
}

// Periodic function to check approaching task deadlines and send notifications
function checkDeadlines() {
  let tasks = db.query("Task", { status: "pending" })
  tasks.forEach(task => {
    if (isDeadlineApproaching(task.dueDate)) {
      notify.send("Task deadline approaching", task.assignedTo)
    }
  })
}

 
Integrating Calendar and Notifications
 

• Incorporate "lovable-calendar" to visually represent project timelines and task deadlines.
• Set up notifications for critical events such as task completions, deadline reminders, and milestone achievements.
• Ensure calendar events are directly linked to corresponding tasks and milestones for seamless navigation.

// Calendar view component integration
component CalendarView {
  template: \`
    

      
Project Calendar
      // Render a calendar with events representing task deadlines and milestones
    
  \`
}

// Function to add calendar events and trigger notification updates
function addCalendarEvent(eventDetails) {
  calendar.addEvent(eventDetails)
  notify.send("Calendar event added", eventDetails.user)
}

 
Testing, Debugging, and Deployment
 

• Develop test cases using Lovable's built-in testing framework for routes, data models, and business logic functions.
• Implement logging and error handling middleware to simplify debugging and ensure smooth operation.
• Ensure all components are thoroughly tested and validated before deployment for a seamless user experience.

// Example test case for project creation functionality
test("Project Creation", function() {
  let projectData = {
    id: "proj1",
    name: "New Project",
    owner: "user123",
    members: [],
    createdAt: new Date(),
    updatedAt: new Date()
  }
  let result = createProject(projectData)
  assert(result.success === true)
})

// Error handling middleware for capturing and logging errors
middleware "errorHandler" (err, req, res, next) {
  // Log error details for debugging
  log.error(err)
  res.send({ error: "An error occurred. Please try again later." })
}