Develop Fullstack Apps with NextJS14 Tailwind CSS & MongoDB

Tailwind CSS is a utility-first CSS framework providing many pre-built classes to build custom components with granular control, delivering smaller final bundles than Bootstrap.

Install Visual Studio Code and Node.js LTS to set up your development environment for Tailwind CSS. Verify installations with node -v and open a project folder in VS Code.

Open your VS Code project, install live server and the tailwind extension, and set up tailwind via play CDN or CLI to render a hello world page with live preview.

Set up Tailwind CSS the right way using the Tailwind CLI and production-ready workflow. Generate output CSS from input, reference it in HTML, and apply Tailwind classes across files.

Explore the Tailwind documentation with fast search and intellisense to discover grid, flex, text, and other CSS utility classes, and learn how NodeJS and Npx generate the output CSS.

Learn to center text on the page with Tailwind CSS using grid and h-screen, explore typography options, colors, and decoration utilities for responsive design.

Learn to build a card component with Tailwind CSS using a utility-first approach, featuring an image and text section, rounded corners, shadows, and a clean layout.

Build a custom button using Tailwind CSS utility-first classes, applying hover and focus states and other presets. Style text, background, padding, rounded corners, and dark mode through practical examples.

Discover tailwind's responsive design using mobile-first breakpoints from sm to 2xl, with md and lg overrides. See how width and hover states adapt across devices.

Master responsive design with Tailwind CSS using a mobile-first approach to adapt text color and layout across breakpoints from mobile to large devices.

Design a responsive card component with Tailwind CSS, featuring image and content sections, mobile-first sizing, centered layout, rounded corners, and media-query adjustments for md and larger devices.

Design a responsive card by shaping the image section with object cover and a height 60, using flex to switch to side-by-side on medium screens, while planning the content section.

Learn how to design a responsive content card by styling text, anchors, and sections with padding, uppercase text, bold fonts, orange color, hover effects, and mobile adjustments.

Learn to use tailwind variables with bracket syntax for custom padding, margin, and x-axis spacing, and apply responsive image sizing and text color tweaks for mobile.

Explore how Tailwind provides transition, translate, and animation utilities to create hover effects such as image zoom. Apply delays, durations, and keyframes, and use pre-built animations like spin and ping.

Build a responsive card grid with tailwind css, configuring a grid that shows one card on small devices, two on medium, and up to four on large screens.

Learn to build a responsive row and column layout with grid, setting gaps and breakpoint-based columns to adapt cards across mobile, medium, large, and extra large screens.

Build a responsive navigation bar with tailwind css. Add a left logo, home, about, services, contact links, and a register item in a single flex row on an orange background.

Design a responsive navbar by styling a register button and implementing a mobile hamburger menu that hides on medium and larger screens. Adjust padding, colors, and cursor behavior.

Explore free tailwind ui components and copy-paste ready-made blocks from open source kits like Tailwind Elements. Install via npm or cdn, reuse components, and save development time.

Create a new Next.js app in a next crud folder with ESLint and Tailwind CSS, enabling app router and alias, then run npm run dev and view at localhost:3000.

Navigate the Next.js app structure, from the public images and static files and node_modules to next.config and tailwind, and learn the root layout and home rendering.

Install the MongoDB community server and Compass, then connect using Compass and create a database named NextCrudDB with a test collection for use in the next year's waste application.

Install npm dependencies like mongoose and react icons to connect a Next.js app to MongoDB, verify packages in package.json, and understand the route layout with children passed.

Create a reusable header component in a Next.js 14 app by building a nav with a home link and a logo, and integrate it into the layout for all pages.

Style the navigation bar with Tailwind CSS by wrapping content in a container, using a flex layout with justify-between, and applying orange background and padding for polished header.

Create and integrate an item list component in a Next.js 14 project using JSX and React components, boosted by the ES7 React Redux snippets extension for rapid scaffolding.

Style item list component with left and right sections, showing the item title and description on the left and edit and delete icons on the right, using a delete button.

Design a delete button as an icon button with a size of 24 and a color, importing the icon and using a self-closing tag; the click action currently does nothing.

Style the item list by applying padding, border, orange-400 border color, and vertical margins, arrange items side by side with flex and gap, and highlight titles with bold xl font.

Create an add item page by mirroring the app router folders, naming the folder add item, and adding page.jsx to enable navigation. Next video will style the add item page.

Design and style a two-field add item form with item title and item description, using flex column layout, orange-500 borders, padding, and a styled submit button.

Create a dynamic edit item page by building a folder with an id parameter, a corresponding page.jsx, and a route that navigates to edit an item using its id.

Create and style the edit item component by reusing the add item ui, switching to update, and populating values on the edit item page.

Establish a MongoDB connection by creating an environment file with the MongoDB URI, configuring mongoose to connect to localhost:27017/next crud db, and exporting the db connection.

Define a Mongoose item schema with title and description fields, enforce data types, required and uniqueness constraints, enable timestamps, create or reuse the item model, and prepare for CRUD endpoints.

Create a post api to add a new item and save it to the database using next js api routes and mongoose, including endpoint setup, request handling, and testing.

Create a get all items api endpoint by establishing a database connection, using mongoose to fetch items, and returning them as json.

Delete an item by its id from the url search param, and return a json message that the item with id was deleted successfully (404 if not found).

Implement a put endpoint that updates an item by dynamic id from the url path, extracting new title and description from the request, and persisting changes to the database.

Create an endpoint to get a single item by id, map the request id to the database id, and test the path param to return the item with status 200.

Integrate the frontend with the backend by calling the get all items API via fetch to api/items on localhost:3000, handle errors, and apply no-store cache for Next.js.

Display data from an api on the ui by fetching all items with async/await, destructuring the response, and rendering item titles and descriptions with item ids for editing.

Debug the item list by removing duplicates, verify API updates, fix the unique key in the map, and confirm server side rendering to boost search engine optimization.

Implement client-side add item functionality in a Next.js 14 app by creating title and description state, binding input handlers, logging inputs, and handling form submission with preventDefault for API integration.

This lecture demonstrates adding required title validation, constructing a post request to create item with fetch using base url, async/await, headers and json body, and routing to home on success.

Implement delete functionality by wiring a delete button to pass the item ID, confirm the action, call the delete API, and refresh the page on success.

Capture the item id from the dynamic route params (context.params.id) in Next.js and fetch the item details to pre-populate the edit form with the title and description.

Fetch item details by id from an API, handle errors, bypass caching for fresh data, and pass title, description, and id to a client-side edit component with state-bound inputs.

Create and bind state variables for title and description in a form, update values on change, and prepare a submit handler to update the database in a future step.

Integrate and test updating an item via the backend API using an async put request with id and new title and description, ensuring navigation to home page and error handling.