In this article, we are going to create a chat app in a simple way. We do not need to use many crazy stuff to create this chat page. It can display the time, the avatar, the messages.
This app also include the signin , signout and register function. …
To get the latest Udemy coupon and news, subscribe our telegram channel
https://twitter.com/ckmobilejavasc1
React native Expo for multiplatform mobile app development
Complete NodeJS course with express, socket…
In this article, we focus on creating the heart tooltip and position it right below the heart icon.
Create a component called “HeartTip.js” under the components folder.
In this article, we are going to add the icons group to the header.
We have to use the fontawesome icon. So, inside the terminal, enter
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/react-fontawesomeThen we import the HomeIcon from heroicon, faFacebookMessenger
, faHeart, faCompass, faPlusSquare and faCompass from…
In this article, we are mainly focusing on setting the visibility of the search icon and the cross icon.
If you look at the real instagram website, you can see if the user clicks on the input box, the search icon will disppear and the cross icon pop up, vice…
In previous article, we already placed the logo at the header. This time we want to place the searchbar inside the header.
Now we go to the header and import Image from 'next/image' . Then we add another <div>
import Image from 'next/image';const Header = () => {return (<div className="shadow-sm border-b bg-white top-0 fixed w-full"><div className="flex justify-between max-w-6xl mx-5 xl:mx-auto p-2"><div className="relative w-24 h-8 lg:inline-grid "><Image…
In this series, we are going to create an Instagram header and tooltips with Next.js and TailWind.
This is a bonus part that in this WhatsApp clone project, when you search your friends, instead of just displaying all the friends. You want to display according to your input, we can do some fuzzy search by employing an npm package called fuse.js.
We can add by typing
yarn…In this article, we are going to talk about how to make the app scroll to bottom when there is a lot of messages. We hope the app will automatically scroll to bottom when the message box does not have enough space.
Import the useRef from react.
import { useRef…
