Develop Fullstack Apps with NextJS14 Tailwind CSS & MongoDB

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course Introduction

Lecture 2: About your Instructor

Chapter 2: Mastering Tailwind CSS from Scratch

Lecture 1: Overview Of Tailwind CSS and How it Differs from Bootstrap

Lecture 2: Installing and Setup for Development Environment

Lecture 3: Hello World with Tailwind and Installing important extensions

Lecture 4: Setting Up Tailwind CSS the Right Way

Lecture 5: How to explore the documentation

Lecture 6: Project-1 Align Element at center of the page

Lecture 7: Project-2 Utility First by Creating a Card Component

Lecture 8: Project-3 Hover Focus And Other states by creating a custom Button

Lecture 9: Concept of Responsive Design in Tailwind

Lecture 10: Practicals to understand Responsive Design concept for different devices

Lecture 11: Project-4 Designing Responsive Card – Part-1

Lecture 12: Project-4 Designing Responsive Card – Part-2

Lecture 13: Project-4 Designing Responsive Card – Part-3

Lecture 14: Variable Styling in Tailwind

Lecture 15: Animations Transitions and Translate in Tailwind

Lecture 16: Responsive Row Column Layout – Part-1

Lecture 17: Responsive Row Column Layout – Part-2

Lecture 18: Responsive Navbar – Part-1

Lecture 19: Responsive Navbar – Part-2

Lecture 20: Responsive Navbar – Part-3

Lecture 21: Free Tailwind UI Components

Chapter 3: NextJS Project: Introduction and Installation

Lecture 1: Creating Next App

Lecture 2: Folder structure and working of Next app

Lecture 3: Installing MongoDB database and creating database

Lecture 4: Installing npm dependencies

Chapter 4: NextJS Project: Developing Frontend with Tailwind CSS and NextJS

Lecture 1: Creating NavBar component

Lecture 2: Styling the navigation bar with tailwind css

Lecture 3: Create the Item List component

Lecture 4: Styling the ItemList component – Part-1

Lecture 5: Styling the Delete Item button

Lecture 6: Styling the ItemList component – Part-2

Lecture 7: Create Add New Item Page

Lecture 8: Styling the Add Item page

Lecture 9: Creating Edit Item dynamic page

Lecture 10: Creating and Styling the Edit Item component

Chapter 5: NextJS Project: Developing the Backend with NextJS, Mongoose and MongoDB

Lecture 1: Establishing connection with mongodb

Lecture 2: Create new mongoose schema for Item model

Lecture 3: POST API to create new item and save it into database

Lecture 4: GET API to fetch all items created so far

Lecture 5: DELETE an item with provided id as url search param

Lecture 6: PUT update an item with dynamic id passed in url path

Lecture 7: GET details of one item with matching id

Lecture 8: Call getAll Items API from Frontend

Lecture 9: Displaying the data from API on UI

Lecture 10: Testing the Item List functionality and Verifying Server Side Rendering for SEO

Lecture 11: Adding state variables and submit handler to Add Item component

Lecture 12: Integrating Create Item API with frontend, routing to home on success, the funct

Lecture 13: Integrating Delete item with backend and testing the functionality

Lecture 14: Getting the Item ID inside the Edit Page via the dynamic route params

Lecture 15: Getting Item Detail from API and passing it to Edit Item Component

Lecture 16: Binding the state variables to the form

Lecture 17: Calling Update Item API and test the functionality

Chapter 6: Source Code

Lecture 1: Code Base