Develop Fullstack Apps with NextJS14 Tailwind CSS & MongoDB

Name: Develop Fullstack Apps with NextJS14 Tailwind CSS & MongoDB
Rating: 4.3 (28 reviews)

Build Fullstack Projects from Scratch using NextJS and Tailwind CSS, get great jobs in the market

Created byRanjan Pandey

Last updated 1/2024

English

What you'll learn

You will learn all the concepts of Tailwind CSS
You will learn how to setup Tailwind CSS and start with development
You will learn about working of Next js app and its file structure
You will learn to Develop Fullstack Application using NextJS14 and Tailwind CSS
You will learn how to develop Frontend and Backend using NextJS Framework
You will learn about various concepts like App Router, Templates, Cache, SEO, Client and Server Side rendering and much more

Course content

6 sections • 55 lectures • 4h 43m total length

Course Introduction4:42
About your Instructor0:18

Overview Of Tailwind CSS and How it Differs from Bootstrap8:24
Installing and Setup for Development Environment2:19
Hello World with Tailwind and Installing important extensions5:17
Setting Up Tailwind CSS the Right Way13:52
How to explore the documentation3:39
Project-1 Align Element at center of the page8:47
Project-2 Utility First by Creating a Card Component12:03
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.
Project-3 Hover Focus And Other states by creating a custom Button10:29
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.
Concept of Responsive Design in Tailwind2:33
Practicals to understand Responsive Design concept for different devices7:20
Project-4 Designing Responsive Card - Part-19:47
Project-4 Designing Responsive Card - Part-23:56
Project-4 Designing Responsive Card - Part-38:47
Variable Styling in Tailwind4:59
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.
Animations Transitions and Translate in Tailwind6:54
Responsive Row Column Layout - Part-16:38
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.
Responsive Row Column Layout - Part-28:54
Responsive Navbar - Part-15:34
Responsive Navbar - Part-26:39
Responsive Navbar - Part-35:35
Free Tailwind UI Components5:09

Creating Next App1:34
Folder structure and working of Next app2:15
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.
Installing MongoDB database and creating database2:06
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.
Installing npm dependencies2:01

Creating NavBar component4:59
Styling the navigation bar with tailwind css5:27
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 the Item List component1:27
Styling the ItemList component - Part-15:10
Styling the Delete Item button1:40
Styling the ItemList component - Part-23:48
Create Add New Item Page1:28
Styling the Add Item page5:50
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.
Creating Edit Item dynamic page1:16
Creating and Styling the Edit Item component1:42

Establishing connection with mongodb5:30
Create new mongoose schema for Item model6:29
POST API to create new item and save it into database7:15
GET API to fetch all items created so far2:26
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 with provided id as url search param4:53
PUT update an item with dynamic id passed in url path11:04
GET details of one item with matching id2:34
Call getAll Items API from Frontend5:09
Displaying the data from API on UI4:17
Testing the Item List functionality and Verifying Server Side Rendering for SEO2:44
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.
Adding state variables and submit handler to Add Item component5:14
Integrating Create Item API with frontend, routing to home on success, the funct8:34
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.
Integrating Delete item with backend and testing the functionality7:26
Getting the Item ID inside the Edit Page via the dynamic route params2:44
Getting Item Detail from API and passing it to Edit Item Component7:15
Binding the state variables to the form3:54
Calling Update Item API and test the functionality2:49

Requirements

Basics of HTML , CSS, ReactJS

Description

Tailwind CSS & NEXT JS are hot in the Job Market - Easily get Job or Upgrade your salary by switching to new Job.

In this course you will learn to develop fullstack applications using NextJS, Tailwind CSS and MongoDB with Mongoose, by following below steps:

Step 1: Set Up Next.js Project

Install Node.js: Make sure you have Node.js installed on your computer.
Create a Next.js App: Use the command line to create a new Next.js app by running a few commands. This sets up the basic structure of your project.
Run the App: Start your Next.js app to ensure everything is set up correctly. You can view your app by visiting a local development server.

Step 2: Install and Configure Tailwind CSS

Install Tailwind CSS: Add Tailwind CSS to your project to enhance styling capabilities. This involves installing it and configuring a few files.
Create Tailwind Config: Generate a configuration file for Tailwind CSS to customize its behavior. This file helps tailor the styling to your specific needs.
Configure Styles: Set up a global stylesheet that imports Tailwind CSS. This makes Tailwind classes available throughout your project.

Step 3: Use Tailwind CSS in Components

Now that Tailwind CSS is integrated, you can use its classes directly in your React components. This allows you to easily style your application.

Step 4: Building Full-Stack Functionality

API Routes: Utilize Next.js API routes for building backend functionality. These routes can handle server-side logic and respond to client requests.
Data Fetching: Use Next.js data fetching methods to retrieve data for your pages. This ensures your pages have the necessary information before rendering.
Integrate with Backend: Connect your Next.js app to a backend server or a database. This is where you handle tasks like storing and retrieving data.
Deployment: Deploy your application to make it accessible online. Platforms like Vercel are popular for deploying Next.js apps.

Step 5: Additional Features

Authentication: Implement user authentication using libraries like NextAuth.js or Auth0 to secure your application.
Routing: Explore Next.js routing capabilities for creating dynamic and nested routes within your application.
Optimizations: Optimize your app for better performance by utilizing features like image optimization, code splitting, and lazy loading.

Who this course is for:

Anyone who wants to develop fullstack applications with NextJS 14.0 and Tailwind CSS

Develop Fullstack Apps with NextJS14 Tailwind CSS & MongoDB

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 5min

Mastering Tailwind CSS from Scratch21 lectures • 2hr 28min

NextJS Project: Introduction and Installation4 lectures • 8min

NextJS Project: Developing Frontend with Tailwind CSS and NextJS10 lectures • 33min

NextJS Project: Developing the Backend with NextJS, Mongoose and MongoDB17 lectures • 1hr 30min

Source Code1 lecture • 1min

Requirements

Description

Who this course is for: