Why did I start writing this tutorial? The motivation behind this is to show how to build a single project from scratch using Symfony and Vue.js. There are a lot of tutorials on how to write to-do apps or something like that. Yet, it does not show how to build something more significant. I want to create something from a simple mockup to the deployed project. This project will be published online, and I will probably post the source code to GitHub. If you like the idea, feel free to send me a message at email@example.com. I am open up to suggestions/bug reports or just any comments.
Table of contents
I will build this project in parts. Thus I will write each piece separately. Notice: This plan can change in the future. For now, it looks like this:
- In this part, you will see a big picture, project overview.
- The second part will be dedicated to project setup and configuration.
- Essential frontend part build with Vue.js and Tailwind CSS
- Backend API configuration and implementation(Symfony 5 and PHP 8)
- Deployment to Digitalocean/AWS
What da hell is this?
I want to build an app to track all my progress in any area of my life(well, almost). So let's assume that I need to track my progress in the gym. So I need to add my exercises on any day and add weights/time between workouts and comments. So I can compare how I am doing relative to previous days. One more example would be my progress in losing weight. I want to write down calories(just a number). And distribution of fats, proteins, and carbs, my weight(also additional metrics - e.g., waist circumference).
How it should look like
I want to build a simple interface as possible. I am a big fan of drawing sketches with pen and paper. I strongly suggest envisioning your project on paper before you start coding. Let's see what we got here.
- This is a login and sign up pages. On a signup page, I am going to use a simple email and password login for now. (Possibly add google sign up option)
- Dashboard page - on this page, you can choose the type of your action.
- If you click on Gym activity, you will see the list of exercises.
- When you click on Add new activity, you will be redirected to the details page.
- You can add actions and options(these options would be different for each type of action). Also, you will see a list of all activities.
- Later on, I am going to show statistics, but for now, that's it.
Indeed not the best drawings, but think of it as a short sketch.
In this project, I am going to write backend on Symfony 5 and PHP 8. I will do the frontend part with Vue.js 3 and Tailwind framework. Also, I will use docker, MYSQL database. And I am going to deploy my code to the Digitalocean server.
Read next - Symfony project configuration.