Become Fullstack Developer with NextJS SpringBoot Tailwind

Explore Tailwind CSS as a utility-first framework and its pre-built classes for rapid, component-driven design. Compare it with Bootstrap to understand granular styling and performance benefits.

Install and configure Tailwind CSS the production way using the Tailwind CLI, create config and input/output files, import the generated output.css, and preview changes with live server.

Explore tailwind's documentation with search and intellisense for classes like text, font, grid, and flex. Learn how nodejs and npx install tailwind and generate output css in Visual Studio Code.

Use Tailwind CSS to center text on the page with grid and place-content-center, using h-screen to fill the viewport, and apply text sizes, colors, bold weight, and underline decorations.

Explore Tailwind CSS utility-first approach and build a responsive card component with image and text by applying padding, rounding, shadow, and flex layout using utility classes.

Learn tailwind utility first approach to build a custom button with hover, focus, dark mode, and other states using state prefixes like hover: and dark:, demonstrated in a html example.

Learn how Tailwind enables responsive design with breakpoints from small to extra large, mapping to media queries and customizable values, and apply mobile-first classes overridden by md and lg.

Explore how Tailwind CSS uses mobile-first classes and breakpoints to color text, from white on mobile to green on small, red on medium, and yellow on large devices.

Design a responsive card component with tailwind, featuring an image and content section, centered with mobile-first width and rounded corners, using overflow-hidden for adaptive display on md and larger screens.

Design a responsive card image section with object-cover, a medium-screen side-by-side layout, and width restrictions, while preparing to tackle the content section in the next video.

This lecture shows how to design a responsive content card with structured text and a link, using padding, uppercase styling, orange color, block display, and hover tweaks.

Learn to use Tailwind variables to customize styles with brackets for padding and margins. Apply responsive tweaks for mobile, making images full width and refining spacing with px and x-axis.

Explore tailwind css transitions, hover effects, and translate transforms to create smooth animations. Apply hover-based scaling, duration, and delay, and use pre-built animations and keyframes for efficient ui design.

Create a responsive tailwind grid to display cards: on small screens one per row, on larger screens multiple per row, using grids and flex utilities.

Create a responsive row and column grid using grid columns and gap adjustments, stacking card components across breakpoints from mobile to medium and large screens.

Learn to build a responsive navigation bar with Tailwind CSS, featuring a logo, a link list (home, about, services, contact), and a register link, styled with flex and white text.

Refine the responsive navbar by styling the logo with large bold text and color, center-aligning items, and applying horizontal padding, with mobile and medium visibility using hidden and mid block.

Design a responsive navbar by styling the register anchor with padding and a yellow background, adding a rounded pointer cursor, and showing a hamburger icon that hides on larger screens.

Explore free tailwind ui components from tailwind elements and open-source libraries; install via npm or CDN, copy-paste code for headers, footers, navbars, carousels, modals to accelerate development.

Create a new next app in a dedicated folder, enable ESLint and Tailwind CSS, configure source directory, app router, and alias, then run the dev server at localhost 3000.

Explore the next app’s folder structure—from public and node_modules to next.config and tailwind—then the source app with global CSS and layout.js, rendering pages as children, run via npm run dev.

Install the MongoDB community server via MSI, open MongoDB Compass, connect, and create a database called nextcruddb with a test collection for future app connections.

Install npm dependencies, including mongoose and react-icons, to connect your Next.js app to MongoDB and perform queries. Inspect the layout and route workflow, ensuring package.json reflects the installed packages.

Create a header nav bar by building a header component in a components folder and applying it across pages with a shared layout in a Next.js app.

Style the navigation bar and components with Tailwind CSS, using a container, flex layout, orange background, and bold white button text.

Create an item list component in a Next.js project using ES7 React Redux snippets, update page.jsx to render it, and plan to style the component in the next video.

Style the item list component with a left area for the item title and description and a right area for edit and delete actions, using next/link and a pencil icon.

Learn to style a delete item button by embedding an icon, importing it, setting a 24px size, and applying a color to create an icon-like delete button.

Style the item list component with tailwind utilities, adding padding, an orange-400 border, and vertical margins; use flex with gap to place items side by side and bold xl headings.

Create the add item page by making a folder named add item inside the app router, create page.jsx in that folder, and test navigation to the add item page.

Design and style an add item form with text inputs for title and description, an orange border, padding, a flex column layout, and a submit button.

Create a dynamic edit item page in Next.js by building a dynamic route with an id, placing a folder with the item id, and a page.jsx for editing the item.

Create and style the edit item component by repurposing add item logic, updating to update, and populating fields for editing to finalize the UI design.

Create a dot env file to store the MongoDB URI, then implement a mongoose connection in src/db/db.js, reading the URI from env and exporting the connection.

Create a mongoose schema for an item with title and description fields, including required, unique, and optional constraints, enable timestamps, and export the Item model for crud endpoints.

Create a post api in the Next.js app router to add a new item with a title and description. Persist it with mongoose and return a 201 response.

Create a get all items api endpoint by exporting an async get function, connect to the database, and fetch items with mongoose find, returning them as json.

Implement delete functionality for an item by reading the id from the url search params in a Next.js api route and deleting it from the database.

Learn to implement a put update for an item using a dynamic id from the url path in a Next.js API route, extracting title and description from the request body.

Implement a get details endpoint for an item by id, using path params to locate the item in the database and return it with status 200.

Integrate the front end with back end APIs by calling the get all items endpoint asynchronously via fetch. Use a base URL from process.env and apply no-store caching in Next.js.

Fetch all items from an API, await the response, destructure the items, and render each item's title and description in the user interface with edit actions using item._id.

Investigate and fix repeated items by correcting the data mapping with a unique key, then verify the page is server-side rendered for improved seo with next.js.

Enable client-side interactivity in a Next.js add item component by creating title and description state variables with useState, binding inputs, and handling submit with preventDefault and console logs.

Validate title and description, alert if missing, then post an item to the api using fetch with a json body inside a try catch, and navigate to home on success.

Implement delete functionality in the item list by passing the item ID to a delete button, confirming deletion, calling the backend delete API, and refreshing the page on success.

Capture the item id from the dynamic route params in Next.js to pre-populate the edit form with the item's title and description by fetching details via an API call.

Fetch item details by id from an API, disable caching for fresh data, and pass the title, description, and id to an edit item component with client-side useState.

Bind state variables to the form by creating title and description states, wiring on change handlers, and handling submit to update values and prep an upcoming API call.

Integrate the update item API by converting to an async put request, sending new title and description, and using the item id in the API URL to test updates.

Install the JDK for Spring Boot 3, with Java 17 as the minimum, after downloading it, and set the classpath. Then install IntelliJ IDEA Community Edition to start Java development.

Install Postman to test REST APIs built with Spring Boot, FastAPI, Node.js, or Next.js. Use Postman to simulate get, post, put, and delete requests and verify your APIs.

Install and configure a MySQL database for your app using Xampp, enabling Apache and MySQL access via localhost and phpMyAdmin.

Create a Spring Boot project from start.spring.io using Java and Maven, with Spring Boot 3.2.1, Java 17, and dependencies Web, Lombok, Spring Data JPA, H2, and MySQL; download and import.

Import and open the project in IntelliJ, resolve Maven dependencies, and configure the JDK and Lombok to run the Spring Boot app on port 8080 with embedded Tomcat.

Configure and connect a Spring H2 database by editing application.properties, enable the H2 console, and set the dialect and update rules for Spring Data JPA.

Create a JPA entity class named item that maps to the items table, using Jakarta Persistence annotations and Lombok, with an auto-generated id and title, description, createdAt, updatedAt.

Move the item entity to a separate package and create an item DTO for the presentation layer, using Lombok getters and setters to transfer data to the front end.

Explore layered architecture by organizing code into controller, service, and repository packages in a spring boot app; connect rest api endpoints to the layers using JPA entities.

Create an item repository interface that extends Spring Data JPA repository for the item entity with a long primary key, using pre-made methods like save and findAll for data operations.

Create a controller class to expose restful web services with Spring Boot using RestController and RequestMapping, and follow the practice of one controller per entity with repository, service, and DTO.

Create a post API endpoint in a Spring Boot controller to add items by mapping JSON with @RequestBody and returning a 201 response with the item DTO.

Develop a get all api endpoint that returns a list of item dto via response entity with status 200 at the /items route, using get mapping.

Implement a get detail API endpoint that returns a single item by a long id using a path variable and expose it at api/item/{id}.

Develop the update api endpoint by aligning the update mapping and naming it update item. Pass it to the service layer to update the item and return the updated item.

Develop a delete endpoint using delete mapping, compare path variable and request parameter approaches, and handle not found or empty responses with response entities.

Return a no-content 204 status after deletion to keep front-end success callbacks reliable in the 200 series. Avoid 400 errors and verify changes using Postman.

Master patch mapping for partial updates on a single field, such as title or price, and compare it to full updates with put, including updating by item id.

Declares and implements a service layer interface for item management, outlining abstract methods for add, all items, detail, update, patch, and delete in a Java project.

Implement the item service by annotating it as a singleton Spring bean, inject it into the controller, and call add, get all, get by id, update, and delete item methods.

Integrate item repository into item service layer, autowire it, convert the item DTO to an entity using Spring utilities, save to database, and return the DTO with the generated id.

Learn to fetch all items with item repository find all, map entities to item DTOs, and return a properly populated list while avoiding memory leaks.

Implement get detail by id using the repository, handle the optional item entity, map to a dto with copied properties, set the id, and return the item dto.

Implement a full update using the repository and service layer: locate the item by id, update all fields, save, and return the updated DTO.

Learn how to perform a partial update in the database by updating only the title field while leaving other fields intact, using repository, controller, and item dto patterns.

Delete data from the database using a repository by id, demonstrating delete by id, find by id, and exists checks with a void return.

Add an end-to-end search endpoint to find items by title in NextJS SpringBoot Tailwind stack. Implement a custom repository method, update the service and controller, and return all matching items.

Test the API endpoints with Postman by creating items via POST and retrieving all items with GET, save a collection, and inspect SQL insert and select queries.

Learn to configure postman with environments and a base_url variable, test a get detail API, and debug server responses by validating optional items and using is present vs is empty.

Test the search API by title, verify case sensitive results for Java and Spring Boot, and review responses from create, get all, and get detailed endpoints.

Test full update, partial update, and delete APIs by updating item 102 to 'Java updated', patching only the title, deleting item 103, and verifying remaining items.

Improve api responses by ignoring unknown json properties and returning only non-null fields in the dto layer, reducing bandwidth and avoiding nulls in front-end data.

Extract the common item-to-dto mapping into a reusable converter class, inject it as a singleton bean, and apply it across the service layer to reduce code duplication.

Test complete functionality by creating CRUD APIs with Java and Spring Boot, perform get all, partial and full updates, search, and delete, and verify with Postman.

Open the control panel, access the MySQL database server via phpMyAdmin, and create a database named Pretum for the application; next, learn how to connect the app to this database.

Configure spring boot to use a mysql profile with application-dev.properties, initialize the item db, and switch between local and dev profiles to see items table and primary key sequence.

Explore Spring profiles to manage environment-specific configurations with one source codebase. Activate dev or local to select property files and start the app, with test, acceptance, and production options.

Test all rest APIs against a MySQL database using postman, performing create, read, update, delete, and search operations, while spring boot and spring data jpa manage data without queries.

Configure the backend to enable cors, allowing cross-origin requests from front-end apps. Specify allowed origins or use * to permit any client, including React.js, Next.js, Vue, Angular, and mobile apps.

Explore replacing the back end with a Spring Boot microservice backed by MySQL. Keep the Next.js front end intact while implementing create, update, delete, and get all item APIs.

Review building a full stack app with Next.js, Tailwind, and MongoDB, covering frontend and backend rest APIs and item CRUD, plus a Spring Boot microservice with MySQL and H2.

Remove the MongoDB-based API from the Next.js app and point to the Spring Boot backend on localhost 8000, deleting the API, db, and models folders.

Modify Next.js code to connect to a Spring Boot api and fetch all items from a json array, configuring the api base url via environment variables and resolving port mismatches.

Learn how to modify a Next.js frontend to connect with a Spring Boot API for updating items, including debugging destructuring, sending put requests, and validating title and description responses.

Connect the NextJS add item form to the Springboot API by sending title and description, update the API base URL, and verify the create functionality works out of the box.

Modify the Next.js app to connect to the Spring Boot API for deleting items, updating the base URL and endpoint /api/items/[id], with a delete confirmation flow and successful deletions.