3 Portfolio Projects with Laravel + Blade, Vue JS, React JS

Name: 3 Portfolio Projects with Laravel + Blade, Vue JS, React JS
Rating: 4.5 (21 reviews)

Laravel Full Stack Portfolio Project

Created byTony Xhepa

Last updated 10/2022

English

What you'll learn

Create Full stack application with Laravel
Create portfolio project with Laravel, Blade and Alpine JS
Create Vuejs Portoflio project
Create React JS Portoflio project

Course content

4 sections • 56 lectures • 8h 31m total length

Introduction10:31
Learn to build three portfolio projects with a Laravel backend and Blade, Alpine, and React front ends, including an API-driven skills and projects system, CRUD backend, and responsive, dark-mode design.

Create Project4:19
Install Breeze Package2:44
Course Notes4:01
Create Models and Migrations7:46
Create Controllers and Routes4:46
Create Index Pages5:24
Add Table to Index Pages6:35
Add Link for Create Page3:08
Store New Skill12:18
Edit and Delete Skill14:37
Store new Projects14:28
Edit and Delete Projects15:54
Show Success and Danger Message10:39
Tailwind CSS Configuration15:57
Create Frontend Layout6:22
Create Header Component8:52
Create Footer Component6:41
Create Hero Section17:33
Create Promote Section9:14
Create the promote section for the Laravel + Blade, Vue.js, React.js portfolio, implementing a hero section, responsive styles, light/dark modes, and a course link button.
Create About Section9:12
Create Skills Section9:40
Create Portfolio Section15:13
Display All Projects7:28
Show and Hide Projects with Alpine JS8:17
Design Project Card6:11
Explore hover interactions on a glass portfolio card, with image scale transitions and text color changes for light and dark modes, using a Laravel Blade project.
Create Services Section11:48
Create Contact Section17:26
Send Mail9:59
Send Form With Alpine JS24:00
Navigations with Alpine JS19:36
Create a fixed top navigation using alpine.js, populate menu from a data array, and link to sections via IDs. Implement scroll-based background changes and responsive styling to enhance navigation.
Last Touch9:32

Laravel API9:07
Create a Laravel API to serve portfolio data. Build skill and project resources, controllers, and routes for /api/skills and /api/projects, plus a contact endpoint for a Vue.js front end.
Create Vuejs Project4:22
Copy Components from Laravel Project5:32
Modify the Header Component7:34
Add Tailwind CSS to Vue JS Project3:37
Install Tailwind CSS in a Vue.js project, configure Tailwind CSS and content paths, then update header styles and assets and run the dev server to verify links.
Hero Section and Tailwind Configuration3:46
Add Promote and footer Section1:54
Add About and Skills Section13:38
Add an about and skills section to your portfolio by fetching skills with an axios-based composable, displaying skill images, and structuring data with a Vue 3 composition API approach.
Add Portfolio Section13:17
Filter Project with Vue JS9:41
Filter the portfolio projects using Vue JS by ID or skill, update the visible cards and the selected tab, and toggle between all projects and filtered results.
Add Services and Contact Section11:32
Add Motion Plugin8:39

Create Project4:33
Add Tailwind CSS to React Project2:43
Install tailwind in a React project by configuring the tailwind config, adding base styles and utilities in index.css, and setting up fonts and color themes.
Create Components5:19
Build a React portfolio by creating and wiring reusable components—about, hero, logo, portfolio sections, projects, services, and skills—organizing assets and a portfolio context, with dedicated folders for assets and context.
Add Header Component11:15
Add Hero and Promote Section3:33
Create Portfolio Context11:41
create a react portfolio context to fetch skills and projects from an api using axios, manage state with useState and useEffect, and wrap your app with a provider.
Add Skills Section3:34
Add Portfolio Section16:47
Learn to build a portfolio section in a React project by importing portfolio data and managing skills and projects with context and state, adding skill and tab filters.
Add Services and Contact Section17:53
Add a services and contact section to a React project by building a form with name, email, and message, validating inputs, posting with axios, and showing a timed thank-you message.
React Scroll Navigation10:52
Source Code0:05
About Course Notes0:09

Requirements

You need to know Laravel, vuejs and react.

Description

This is the course to take if you want to learn how to create Laravel portfolio project.

The method I teach in this course will work on any version of Laravel. So, not only will it work on Laravel 9.

Here we are going to create all the work from scratch so without a package.

So tag along and let's go for a nice ride!

In this course, you will learn how to create Laravel CRUD for Skills and Projects. Learn how to create Laravel portfolio with blade and Alpine JS. You are going to learn also how to create custom blade directives. We are going to customize the Tailwind CSS.

Create the same project with VueJS and React.

Consume the API from the Laravel project.

Learn how to get data from Laravel and work with that on Vuejs project.

Learn how to get data from Laravel and work with that on React project.

Master Laravelby creating full-stack portfolio projects and sharing data throw API and consuming the data with Vue JS and react.

This Course shows you how Laravel work as a backend and the three main frontend frameworks to work on the frontend.

Want more about Laravel see my Laravel role and permissions course.

Who this course is for:

Laravel VueJS and ReactJS beginners

3 Portfolio Projects with Laravel + Blade, Vue JS, React JS

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 11min

Create Laravel Full-stack Portfolio Project31 lectures • 5hr 20min

Create Vuejs Portfolio Project12 lectures • 1hr 33min

Create React Portfolio Project12 lectures • 1hr 28min

Requirements

Description

Who this course is for: