Task Management App with Svelte Flowbite Directus and MySQL

This project is a task management application built with Directus, MySQL, Svelte, and Flowbite. It includes a backend configured with Directus for managing tasks and user authentication, and a frontend using Svelte and Flowbite for a responsive user interface.

Table of Contents

• Prerequisites
• Setup and Installation
• Running the Project
• Usage
• Contributing
• License

Prerequisites

Ensure you have the following installed:

• Node.js (version 18)
• MySQL (version 8 or later)
• Postman (for testing API endpoints)

Setup and Installation

Backend Setup

1. Clone the Repository:

   git clone https://github.com/pragzz1238/Task-Management-App-with-Svelte-Flowbite-Directus-and-MySQL.git
   cd Task-Management-App-with-Svelte-Flowbite-Directus-and-MySQL
   

2. Navigate to the Backend Directory:

   cd backend
   

3. Install Dependencies:

   npm install
   

4. Create and Configure MySQL Database:

   • Create a database named directus in MySQL.
   • Update the .env file with your MySQL credentials:

     DB_CLIENT=mysql
     DB_HOST=127.0.0.1
     DB_PORT=3306
     DB_DATABASE=directus
     DB_USER=your_mysql_username
     DB_PASSWORD=your_mysql_password
     

5. Run Directus Setup:

   npx create-directus-project .
   

   (or)

    npx directus init
   

6. Start the Directus Server:

   npx directus start
   

7. Configure Directus for Task Management:

   • Follow the steps in Section 4 of the project documentation to configure Directus for task management. This includes setting up collections, fields, and roles necessary for managing tasks.

Frontend Setup

1. Navigate to the Frontend Directory:

   cd ../frontend
   

2. Install Dependencies:

   npm install
   

3. Start the Frontend Server:

   npm run dev
   

Running the Project

1. Start the Backend:

   • Ensure that MySQL is running.
   • Start the Directus server by navigating to the backend directory and running:

     npx directus start
     

2. Start the Frontend:

   • Navigate to the frontend directory and run:

     npm run dev
     

3. Open the Application:

   • Visit http://localhost:5173 in your web browser to access the frontend application.

4. Test the API (optional):

   • Use Postman to test authentication and task management API endpoints. For example, use the POST http://localhost:8055/auth/login endpoint to authenticate users.

Usage

• Frontend: Provides a user-friendly interface for managing tasks. Use the provided forms to add, update, and delete tasks.
• Backend: Manages tasks and user authentication. Ensure that Directus is properly configured to handle CRUD operations for tasks and user roles.

Troubleshooting

If you encounter any issues during setup or usage, please refer to the project documentation for detailed instructions and troubleshooting tips.