Coderflix
Coderflix
  • 84
  • 135 278
Recipe Sharing Web App || React JS, Tailwind CSS, MongoDB, Express JS & Node JS | Part - 2
Part 2: Recipe Website - Popular Category Section & Blog with Filter
In this video, we'll add a popular category section and blog with filter functionality to our recipe website. We'll start by creating a CategorySection component to showcase popular recipe categories with images and descriptions. Then, we'll implement a Blog component to display blog posts, along with a BlogFilter to allow users to filter posts by category and search terms. We'll manage the filtering logic using state and map over arrays to display the filtered results. Finally, we'll add some basic styling to make everything look great.
🔔Subscribe @coderflix
มุมมอง: 17

วีดีโอ

Recipe Sharing Web App || React JS, Tailwind CSS, MongoDB, Express JS & Node JS | Part - 1
มุมมอง 51714 ชั่วโมงที่ผ่านมา
The first part of creating a recipe website with React.js involves setting up a navigation bar (navbar) and a banner. The navbar will offer intuitive navigation, featuring links to different sections like Home, Recipes, About, and Contact. It will be designed with a modern aesthetic using CSS to ensure a consistent appearance across various screen sizes, enabling a seamless user experience. The...
How to Use SweetAlert For Delete Confirmation Dialog || React js
มุมมอง 3021 ชั่วโมงที่ผ่านมา
SweetAlert can be used to display a confirmation dialog before submitting a form. First, include the SweetAlert library (via CDN or npm). Next, intercept the form's submit event using JavaScript to show the confirmation dialog. If the user confirms, the form will submit; otherwise, it will not. This adds an extra layer of user verification before completing actions.
Login Form in React JS || Very easy and simple
มุมมอง 12614 วันที่ผ่านมา
we'll create captivating login page using cutting-edge web technologies. Leveraging React with Vite as the build tool. Tailwind CSS for styling, and React Icons for illustrative elements, we'll craft an immersive and user-friendly experience. 🔔Subscribe @coderflix code Link: www.buymeacoffee.com/coderfli... Login Page Design: th-cam.com/video/7y-YyEH-eF8/w-d-xo.htmlsi=EnhP3l4MVqiTlvvV React Res...
Stunning Animated Navbar with React & Framer Motion
มุมมอง 8321 วันที่ผ่านมา
Create a beautiful, fully animated navigation bar using the power of React and Framer Motion. Framer Motion offers smooth transitions and animations that can take your project to the next level. Whether you're building a startup agency or refining your design skills as a developer, this will help you achieve an engaging user interface. Dive in to explore how to combine dynamic animations with R...
Smooth Scroll Card Animation for Engaging User Interfaces || React js || tailwind CSS
มุมมอง 117หลายเดือนก่อน
Description: Create an interactive and dynamic user experience with smooth scroll card animations. This animation technique allows content cards to seamlessly transition as users scroll through a webpage, providing an engaging visual effect. Whether for product showcases, image galleries, or information cards, this animation enhances the user interface by adding fluidity and depth, encouraging ...
Modern Slider using Tailwind CSS
มุมมอง 50หลายเดือนก่อน
Learn how to create a modern, responsive image slider in React.js using Tailwind CSS! This step-by-step tutorial covers everything you need to build a sleek slider that enhances your web design projects. Whether you're looking to showcase a portfolio, display featured content, or add an interactive element to your website, this video will guide you through the process with clean code and best p...
Create A Slider Crazy Effects Using React js and tailwind css
มุมมอง 2.3K2 หลายเดือนก่อน
Welcome to this exciting tutorial on creating a slider with crazy effects using React and Vite! In this video, we'll walk you through building an interactive and visually stunning image slider from scratch. We'll use React for the UI components and Vite for a fast and modern development environment.
2-minute Firebase Deploy React ⚛️ Vite Project 🔥.
มุมมอง 5304 หลายเดือนก่อน
2-minute Firebase Deploy React ⚛️ Vite Project 🔥.
Animated Login And Register | React, Vite, and Tailwind CSS.
มุมมอง 1.8K5 หลายเดือนก่อน
Animated Login And Register | React, Vite, and Tailwind CSS.
Personal Portfolio Website using React || Vite || Tailwind CSS || GSAP ✨
มุมมอง 9436 หลายเดือนก่อน
Personal Portfolio Website using React || Vite || Tailwind CSS || GSAP ✨
Quiz Web Application Using React || Vite || Tailwind CSS
มุมมอง 2597 หลายเดือนก่อน
Quiz Web Application Using React || Vite || Tailwind CSS
Sidebar Menu using React vite and Tailwind CSS | Step by Step Beginner Friendly
มุมมอง 6547 หลายเดือนก่อน
Sidebar Menu using React vite and Tailwind CSS | Step by Step Beginner Friendly
How To Design a Simple Login Page Using React vite and Tailwindcss.
มุมมอง 4877 หลายเดือนก่อน
How To Design a Simple Login Page Using React vite and Tailwindcss.
Responsive Prompt Library with React, Vite, and Tailwind CSS
มุมมอง 1258 หลายเดือนก่อน
Responsive Prompt Library with React, Vite, and Tailwind CSS
Responsive Restaurant Website Design Using React || Vite || Tailwind css
มุมมอง 5628 หลายเดือนก่อน
Responsive Restaurant Website Design Using React || Vite || Tailwind css
Responsive Navbar Using Tailwindcss || React || Vite
มุมมอง 2108 หลายเดือนก่อน
Responsive Navbar Using Tailwindcss || React || Vite
Effortless Login and Register Form Design Using React vite | Step-by-Step Guide with useState
มุมมอง 1.2K9 หลายเดือนก่อน
Effortless Login and Register Form Design Using React vite | Step-by-Step Guide with useState
Personal Portfolio Hero Section|| React || Vite || Tailwindcss.
มุมมอง 9919 หลายเดือนก่อน
Personal Portfolio Hero Section|| React || Vite || Tailwindcss.
How to Download PDF Files in React | React CV or Resume Download Tutorial
มุมมอง 2.2K9 หลายเดือนก่อน
How to Download PDF Files in React | React CV or Resume Download Tutorial
Testimonial Slider On Website ।। Using React ।। Tailwindcss
มุมมอง 1.2K11 หลายเดือนก่อน
Testimonial Slider On Website ।। Using React ।। Tailwindcss
How To Make E-Commerce Website Using React JS | React vite and tailwind CSS.
มุมมอง 84111 หลายเดือนก่อน
How To Make E-Commerce Website Using React JS | React vite and tailwind CSS.
Testimonial Section with React Vite & Tailwind CSS || Fully Responsive
มุมมอง 243ปีที่แล้ว
Testimonial Section with React Vite & Tailwind CSS || Fully Responsive
Glass Effect Banner Design react || vite || Tailwind CSS
มุมมอง 132ปีที่แล้ว
Glass Effect Banner Design react || vite || Tailwind CSS
The Easy Way to Create a File Upload Button with Vite and Tailwind CSS
มุมมอง 420ปีที่แล้ว
The Easy Way to Create a File Upload Button with Vite and Tailwind CSS
Contact Form Design || React || Vite || Tailwind CSS
มุมมอง 2.4Kปีที่แล้ว
Contact Form Design || React || Vite || Tailwind CSS
Responsive Curved Footer with Tailwind CSS | Step by Step Tutorial
มุมมอง 6Kปีที่แล้ว
Responsive Curved Footer with Tailwind CSS | Step by Step Tutorial
Responsive Navbar with a Mega menu using React Vite & Tailwind CSS
มุมมอง 4.7Kปีที่แล้ว
Responsive Navbar with a Mega menu using React Vite & Tailwind CSS
Responsive Modern Shopping Card Using React || vite || Tailwind CSS
มุมมอง 382ปีที่แล้ว
Responsive Modern Shopping Card Using React || vite || Tailwind CSS
Image slider using React || React slick carousal
มุมมอง 97ปีที่แล้ว
Image slider using React || React slick carousal