This project is a Todo application built using Laravel, Vue.js, and Tailwind CSS.
- Create Todo: Users can add new todo items by typing in the input field and pressing enter.
- Update Todo: Users can edit existing todo items by clicking on them and modifying the text.
- Delete Todo: Users can remove todo items by clicking on the delete button next to each item.
- Mark Todo as Completed: Users can mark todo items as completed by clicking on the checkbox next to each item.
- Drag and Drop: Todo items can be reordered by dragging and dropping them to a new position. Changes in order are saved automatically.
- Filter Todos: Users can filter todo items based on their completion status (All, Active, Completed).
- Search Todos: Users can search for specific todo items by typing in the search input field.
- Register: Users can register for an account to access the todo application.
- Login: Registered users can log in to their accounts to manage their todo lists.
- Forget Password: Users can request a password reset if they forget their password.
- Pagination: Todo items are paginated to improve user experience and performance.
- Laravel: A PHP web application framework for building efficient and secure web applications.
- Vue.js: A progressive JavaScript framework for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for building custom designs quickly and easily.
- MySQL: A relational database for storing todo items.
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/1970Mr/todo-app-laravel
-
Navigate to the project directory:
cd todo-app-laravel
-
Install dependencies:
composer install npm install
-
Copy the
.env.example
file and create a new.env
file:cp .env.example .env
-
Generate an application key:
php artisan key:generate
-
Configure the database connection in the
.env
file:DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=your_database_name DB_USERNAME=your_database_username DB_PASSWORD=your_database_password
-
Run database migrations:
php artisan migrate
-
Compile assets:
npm run dev
-
Start the development server:
php artisan serve
-
Open your browser and visit
http://localhost:8000
to view the application.
- This application utilizes both database storage and local storage based on the user's authentication status.
- When a user is logged in, todo items are stored in the database to ensure data persistence and security.
- If a user is not logged in, todo items are stored in the local storage of the browser, providing a seamless experience without the need for authentication.
If you are interested in the MongoDB version of this project, you can check out the MongoDB branch here.
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/my-feature
). - Make your changes and commit them (
git commit -am 'Add new feature'
). - Push your changes to your forked repository (
git push origin feature/my-feature
). - Create a new Pull Request.
This project is licensed under the MIT License. Feel free to use and modify the code as per your requirements.