Become Fullstack Developer with NextJS SpringBoot Tailwind

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 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.

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.

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.

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 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 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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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

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.

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.