• Post category:StudyBullet-3
  • Reading time:8 mins read


Replicating the Tesla UI and Building a TESLA web application, using VueJs, VueX, Vuetify, Laravel, CSS and Bootstrap.

What you will learn

A thorough understanding of Laravel and PHP for implementing Backends

Implement web applications using Vuejs and JS

Designing beautiful layouts effortlessly using Vuetify

Vuex for Implementing a global storage system

Vue Router for navigating between screens

CSS and Bootstrap for detailed custom designs

MySQL for data storage


Get Instant Notification of New Courses on our Telegram channel.


HTML for screen content structure

Description

β€ŒHello and welcome to this course.

β€ŒThis course will teach you how to use the Laravel and Vuejs frameworks completely from scratch.β€Œ In this course we will be building and going through a few projects.

β€ŒFirstly we will start with our todos project. In this project we will go through the basics so that you will have a good understanding of the architecture and paradigm for the Laravel and Vuejs frameworks.

β€ŒThen we can progress and dive into more complex things. In the commencing project, we will design and build a tesla web application. β€ŒWe will first try to somewhat replicate the Tesla website’s homepage and then we will program the complete web application which is comprised of the backend for the admins to manage, and the front end for the users to use.

β€ŒWe will use many libraries for Vuejs to implement the projects such as Vuetify for making beautiful designs effortlessly, vuex to allow us to implement a global storage system which allows all components to connect to it and access the core data of the web application. We will also use the Event bus to allow different components to communicate between eachother and we will use other tools such as css, bootstrap, and more.

I hope you enroll and make the most of this course.

English
language

Content

Project 1 – Build a Todo web application
Disclaimer
1-Tools required
2-Downloading required tools
3-Setting up project
4-Connecting blade with vue
5-Todos CRUD
6-Creating components
7-Setting up fontawesome
8-Adding todo items
9-Displaying todo items
10-Marking todos as completed
11-Deleting todos
Project 2 – Replicating the Tesla home page with vuetify
Disclaimer
1-Installing vue-cli and creating the project
2-Designing the navbar component
3-Designing the promo component
4-Designing the Specifications component
5-Designing the interior and Car core features component
6-Designing the order now component
7- Project Summary
Project 3 – Building a complete CRUD Tesla web application with an online shop
Disclaimer
1-Creating and setting up the project
2-Setting up vue router
3-Setting up vuetify
4-Designing the navbar component
5-Implementing the Model, View and Controller for categories
6-Add category route and button
7- Designing the category form
8- Connecting the category form with the state of the component
9- Implementing the store category function for submitting the form
10- Implementing the delete category function
11- Designing the edit category component and implementing the edit category fun
12- Implementing the products model and controller
13- Designing the Add Product component
14- Submitting the product form
15- Implementing the Products browse page
16 – Deleting Products
17- Editing products
18- Designing the client AppNavigator and HomePage component
19- Configuring things in web php file
20- Designing the Login component
21- Setting up laravel sanctum and submitting the login form
22- Implementing the logout button
23- Switching the AppNavigator based on authentication
24- Setting a relationship between the products and categories
25- Adding products to a specific category and setting a base url for axios
26- Designing the shop component
27- Designing Product Details Component
28- Designing the Category products component
29-Designing the Cart component and setting up vuex for the cart
30- Summarizing the project