Laravel & Vue.js - Building a Todo list, Part 1: Introduction and objectives
Guillaume Briday
4 minutes
I am going to start a series of articles to present a project that I have wanted to implement for some time: a Todo List!!
Well, I admit that doesn't sound very exciting, but let me present the concept, you'll see that there are plenty of cool things to do technically and ergonomically.
Let's not kid ourselves, this project isn't here to revolutionize the world of Todo List applications, but it has several specific objectives. The first is to improve my skills in particular technical aspects—we'll get back to that later—but also to have an "example" application as complete as possible, as I tried to do with my project laravel-blog for Laravel and other technologies.
With this series of articles, I really want to present step by step the design of this application and the technologies that will be used to fully understand the ins and outs of such development.
I want to cover many technical aspects, of course, but also focus on the user experience and visual aspects of the application. We will take advantage of the simplicity of the concept to highlight what we have left, namely the UX/UI and the code.
As you have understood, in this project we are going to create a SPA (Single Page Application). The advantages are numerous.
Indeed, the backend server will only serve versioned and RESTful APIs. The frontend part of the project will therefore be just one client offered among many others that can connect to the backend.
We could have served views with Laravel, but we would have limited the possibilities to what these views offer unless we developed APIs in parallel, which is a bit of a shame with the advent of JS frameworks, I think.
It is also possible to make a SPA in the same project and serve only the first view with Laravel and use the rest of the application via APIs, but I prefer to completely separate the backend from the frontend for this project.
Features
I am not going to make an exhaustive list of the features that will be developed, but only the most pertinent ones to get a good idea of the application's possibilities.
I will greatly draw inspiration from Todoist, which is an application I like a lot.
-
I must be able to authenticate, create an account, reset my password, and log in with GitHub, Twitter, or Facebook.
-
Add a task with text and an (optional) due date.
-
I must be able to edit a task.
-
Mark a task as
completedand be able to delete it only in this case. -
Deleted tasks will go into a trash can that we can empty all at once.
-
Filter tasks by
All,Completed, andIn Progress. -
Be able to mark a task as favorite and remove it.
-
List tasks over the next seven days, following those overdue and unscheduled.
-
I must be able to display only today's tasks or favorites.
-
Search for a task by its title and the current filter.
What is not yet planned
I already envision many other features, but it isn't necessarily pertinent to add them to the project now. I prefer to do things well with what I have listed above rather than trying to do everything.
I will first focus on the essentials and create a sort of MVP.
The frontend
Regarding frontend technologies, I will use the ones that particularly interest me at the moment and the necessary tools to make a SPA with Vue.js.
As for the design, I would really like to achieve Semi Flat Design as found on many sites right now; I'm thinking of Stripe, Discord, or Treehouse, to name but a few. By the way, that is also what I plan to do on guillaumebriday.fr as well.
CSS
Tailwind CSS: For the CSS framework, because I completely identify with the approach presented by Adam Wathan in CSS Utility Classes and "Separation of Concerns". Tailwind CSS is the framework he contributes to and which uses this approach. I haven't had the opportunity to test it yet, and I think this is the perfect project for it.
Font Awesome: For the icons.
JavaScript
Vue.js: I don't need to explain why; it's the whole point of the project.
vue-router: The router will allow us to manage components according to routes, and handle history and URLs for us.
vue-test-utils: To test our Vue.js application.
vuex: To manage our data.
axios: Allows us to manage AJAX requests simply. (Why?)
moment.js: Allows us to handle dates in JavaScript.
Laravel Echo: To manage WebSockets with Laravel.
I want to use the tools provided with Vue.js as much as possible for greater consistency wherever possible.
The backend
Laravel: It's the core of the backend application. Laravel will allow us to serve our versioned APIs and save our data in the database.
Socialite: To create an account via other providers.
MySQL: To manage our database.
Socket.io: To manage WebSockets.
Redis: Socket.IO and Laravel use Redis to communicate.
spatie/laravel-backup: To back up our database.
spatie/laravel-cors: To manage the CORS of our APIs.
tymon/jwt-auth: To manage authentication with JSON Web Tokens (JWT).
The development and production environment
Webpack: It's the most complete module bundler today; we'll use it to manage JavaScript and CSS dependencies.
Docker: I've talked about it enough on the site; we'll use it to manage our frontend and backend environment, whether for development or production.
PHP-CS-Fixer: To have a unified code style.
PHPUnit: To perform our unit and functional tests.
Nginx: Will be our web server for the backend and frontend.
Travis CI: To manage the CI of our application.
Capistrano: A tool to deploy our application; I have already written a complete article on the blog.
I will deploy the application at the end of the development, and everyone will be able to see the result directly without having to install the project.
Conclusion
Nothing is set in stone; this article only presents the project and what I plan to integrate. There are surely packages that are not presented here but that I will use in the application depending on how I see things during the mockup or development.
We agree that the project seems more interesting now, right?
I won't go on longer; if you have any comments or contributions to make, don't hesitate to do so in the comments or on the GitHub repositories I created for the project:
Thank you!
