/5-laravel-livewire-projects

Primary LanguagePHP

Five Livewire Projects with Tailwind CSS

This repository showcases five different projects developed using Laravel Livewire and styled with Tailwind CSS. Livewire empowers you to create dynamic web applications seamlessly integrated with the elegance of Laravel, while Tailwind CSS provides a utility-first CSS framework for building modern user interfaces. Below, you'll find a brief overview of each project:

1. Calculator

  • Description: This is a simple calculator application built with Livewire and styled using Tailwind CSS. Users can perform basic arithmetic operations like addition, subtraction, multiplication, and division.

2. Counter

  • Description: The Counter project is a basic example of how Livewire can be used to create a dynamic counter. Users can increment and decrement a counter value, and the stylish UI is designed with Tailwind CSS.

3. Product Search

  • Description: Product Search is a practical Livewire project that allows users to search for products in a database. It demonstrates how Livewire can create dynamic search functionality, and the user-friendly interface is crafted with Tailwind CSS.

4. To-do List

  • Description: The To-do List project showcases a simple to-do list application developed using Livewire and enhanced with Tailwind CSS styles. Users can seamlessly add, edit, and delete tasks with a visually appealing design.

5. Cascading Dropdown

  • Description: Cascading Dropdown is a Livewire project that demonstrates the use of cascading dropdowns. It allows users to select options from one dropdown, which dynamically updates the options available in another dropdown. The entire interface is polished with Tailwind CSS.

Getting Started

To run any of these projects locally on your MacBook M2, follow these steps:

  1. Clone this repository to your local machine.
  2. Ensure you have PHP, Composer, and Node.js installed.
  3. Navigate to the specific project directory (e.g., 'calculator', 'counter', etc.).
  4. Run composer install to install the project dependencies.
  5. Set up your database configuration in the .env file.
  6. Run php artisan migrate to create the necessary database tables.
  7. Install the frontend dependencies using npm install or yarn install.
  8. Build the frontend assets with npm run dev or yarn dev.
  9. Start the development server with php artisan serve.

Each project directory should contain its own README file with more detailed instructions on how to run and use the specific Livewire project.

Contributing

Feel free to contribute to any of these projects by creating pull requests or reporting issues if you encounter any bugs.

License

This repository is open-source and available under the MIT License.

Enjoy exploring and working with these Livewire projects with Tailwind CSS! If you have any questions or need further assistance, please don't hesitate to reach out.