0(0)

Become Fullstack Developer with NextJS SpringBoot Tailwind

SS

by Shriya Sharma
Course level: Intermediate
Share:

Categories Video Courses
Duration 07h 12m
Total Enrolled 115
Last Update February 8, 2024

Description

In this course you will learn about NextJS and Springboot. You will learn to develop Fullstack applications using NextJS Tailwind CSS MongoDB with Mongoose. You will also learn to develop Fullstack application using NextJS-14 and Springboot-3.

Everything will be explained in a step by step manner and concepts will be implemented in a handson based approach. Source code will be provided.

Embarking on a Full Stack Development journey with Next.js, Tailwind CSS, and Spring Boot is not just a technological choice; it’s a strategic move toward crafting powerful, scalable, and aesthetically pleasing web applications. Next.js, with its React foundation, ensures a seamless and responsive user experience, optimizing performance through server-side rendering and efficient client-side navigation.

Tailwind CSS complements this synergy by offering a utility-first approach to styling, accelerating the development process while maintaining design consistency. Its flexibility empowers developers to create visually appealing interfaces without sacrificing customization.

Spring Boot, renowned for its robust backend capabilities, provides a solid foundation for building scalable and secure APIs. The framework simplifies complex tasks, enabling developers to focus on business logic rather than boilerplate code.

This trinity of technologies not only streamlines development but also ensures a delightful user experience. Fast, efficient, and secure, this stack caters to the demands of modern web applications. From rapid prototyping to seamless deployment, the combination of Next.js, Tailwind CSS, and Spring Boot is a testament to the future of Full Stack Development. Embrace this powerful trio, and elevate your projects to new heights of innovation and efficiency.

What Will I Learn?

You will learn how to setup Tailwind CSS and get started with development.
You will learn various concepts of Tailwind CSS by building small projects.
You will learn how to setup Tailwind CSS NextJS14 and start with development.
You will learn to develop Frontend with NextJS.
You will learn to develop REST API with NextJS and MongoDB with Mongoose.
You will learn to integrate NextJS Frontend with NextJS based backend REST API.
You will learn about the concepts of Springboot 3.
You will learn to develop Springboot 3 based REST API with MySQL database using Spring Data JPA.
You will learn to integrate NextJS based Frontend with Springboot based backend REST API.
You will learn to troubleshoot and debug issues and solve them.
You will get the complete source code.

Topics for this course

101 Lessons07h 12m

Introduction, Installation and Setup

Course Introduction00:02:23

About your Instructor00:00:18

Overview Of Tailwind CSS and How it Differs from Bootstrap00:08:24

Installing and Setup for Development Environment00:02:19

Master Tailwind CSS with Practical Handson Examples

Overview Of Tailwind CSS and How it Differs from Bootstrap00:08:24

Setting Up Tailwind CSS the Right Way00:13:52

How to explore the documentation00:03:39

Project-1 Align Element at center of the page00:08:47

Project-2 Utility First by Creating a Card Component00:12:03

Project-3 Hover Focus And Other states by creating a custom Button00:10:29

Concept of Responsive Design in Tailwind00:02:33

Practicals to understand Responsive Design concept for different devices00:07:20

Project-4 Designing Responsive Card – Part-100:09:47

Project-4 Designing Responsive Card – Part-200:03:56

Project-4 Designing Responsive Card – Part-300:08:47

Variable Styling in Tailwind00:04:59

Animations Transitions and Translate in Tailwind00:06:54

Responsive Row Column Layout – Part-100:06:38

Responsive Row Column Layout – Part-200:08:54

Responsive Navbar – Part-100:05:34

Responsive Navbar – Part-200:06:39

Responsive Navbar – Part-300:05:35

Free Tailwind UI Components00:05:09

Fullstack Development with NextJS14 Tailwind CSS and MongoDB with Mongoose

Developing SpringBoot 3, Java 17, My SQL based REST API’s

Fullstack Developing with NextJS14 Tailwind CSS and Springboot3 with MySQL DB

Source code

$3.99

Material Includes

Video Lectures
Source Code

Requirements

Basics HTML, CSS, JavaScript, React, Java

Target Audience

Anyone who wants to become fullstack developer using NextJS and Springboot

Become Fullstack Developer with NextJS SpringBoot Tailwind

Description

What Will I Learn?

Topics for this course

Introduction, Installation and Setup

Course Introduction00:02:23

About your Instructor00:00:18

Overview Of Tailwind CSS and How it Differs from Bootstrap00:08:24

Installing and Setup for Development Environment00:02:19

Master Tailwind CSS with Practical Handson Examples

Overview Of Tailwind CSS and How it Differs from Bootstrap00:08:24

Setting Up Tailwind CSS the Right Way00:13:52

How to explore the documentation00:03:39

Project-1 Align Element at center of the page00:08:47

Project-2 Utility First by Creating a Card Component00:12:03

Project-3 Hover Focus And Other states by creating a custom Button00:10:29

Concept of Responsive Design in Tailwind00:02:33

Practicals to understand Responsive Design concept for different devices00:07:20

Project-4 Designing Responsive Card – Part-100:09:47

Project-4 Designing Responsive Card – Part-200:03:56

Project-4 Designing Responsive Card – Part-300:08:47

Variable Styling in Tailwind00:04:59

Animations Transitions and Translate in Tailwind00:06:54

Responsive Row Column Layout – Part-100:06:38

Responsive Row Column Layout – Part-200:08:54

Responsive Navbar – Part-100:05:34

Responsive Navbar – Part-200:06:39

Responsive Navbar – Part-300:05:35

Free Tailwind UI Components00:05:09

Fullstack Development with NextJS14 Tailwind CSS and MongoDB with Mongoose

Creating new next app00:01:34

Folder structure and working of Next app00:02:15

Installing MongoDB database and creating database00:02:06

Installing npm dependencies00:02:01

Creating NavBar component00:04:59

Styling the navigation bar with tailwind css00:05:27

Create the Item List component00:01:27

Styling the ItemList component – Part-100:05:10

Styling the Delete Item button00:01:40

Styling the ItemList component – Part-200:03:48

Create Add New Item Page00:01:28

Styling the Add Item page00:05:50

Creating Edit Item dynamic page00:01:16

Creating and Styling the Edit Item component00:01:42

Establishing connection with mongodb00:05:30

Create new mongoose schema for Item model00:06:29

POST API to create new item and save it into database00:07:15

GET API to fetch all items created so far00:02:26

DELETE an item with provided id as url search param00:04:53

PUT update an item with dynamic id passed in url path00:11:04

GET details of one item with matching id00:02:34

Call getAll Items API from Frontend00:05:09

Displaying the data from API on UI00:04:17

Testing the Item List functionality and Verifying Server Side Rendering for SEO00:02:44

Adding state variables and submit handler to Add Item component00:05:14

Integrating Create Item API with frontend, routing to home on success and test00:08:34

Integrating Delete item with backend and testing the functionality00:07:26

Getting the Item ID inside the Edit Page via the dynamic route params00:02:44

Getting Item Detail from API and passing it to Edit Item Component00:07:15

Binding the state variables to the form00:03:54

Calling Update Item API and test the functionality00:02:49

Developing SpringBoot 3, Java 17, My SQL based REST API’s

Installing Java and IDE00:01:55

Installing Postman Tool00:01:14

Installing MySQL Database Server00:01:52

Creating SpringBoot project with required dependencies00:02:57

Importing Project to IDE and Setting JDK00:03:34

Adding H2 Database Spring Data JPA configuration00:03:30

Creating the JPA Entity class with different fields00:07:41

Creating the DTO class for presentation layer00:02:17

Layered architecture and various packages00:01:55

Creating the Repository Interface00:02:47

Creating Controller class00:03:01

Developing POST API Endpoint00:05:44

Developing the GET All API endpoint00:02:28

Developing GET Detail API Endpoint00:01:55

Developing UPDATE API Endpoint00:00:55

Developing DELETE API and PathVariable VS RequestParam00:05:18

Return 204 as status code after deletion00:01:41

Developing PATCH API Endpoint00:02:11