React Clone WhatsApp (w/ React Router, React Hooks) 2021

Create a login page for a whatsapp-style app with React Router and hooks, implementing static components first, then integrate Meteor-based user management and TypeScript boilerplate.

Clone the boilerplate via git clone or download, unzip, install dependencies with yarn install, then run meteor and visit localhost:3000. Next, learn thinking in React by breaking down components.

Break down the login component for a WhatsApp web clone into RightImg and FormLogin. Route between login and main pages with React Router Dom and apply styled components for theming.

Set up the app component, organize folders for components and UI, create login and main views, and wire React Router Dom with a theme provider.

Build the FormLogin component with styled components, update main.css, and apply theme-driven styles to inputs, labels, and the login button.

Build a React login form component (part 2) using styled components, rendering a styled form with labeled inputs for username, telephone, and password, and a connexion button.

Build the RightImg component in a React WhatsApp clone, using styled components and a right prop to manage full screen sizing, with an image, title, and accessible markup.

Build the static login component by wiring RightImg with FormLogin and a text message 'connect to start a conversation', ensuring children render inside RightImg.

Set up a three-field login state (username, phone, password) in FormLogin, implement a generic handleChange with TypeScript, and use React useState to manage input values.

Apply inverse data flow by wiring the login button to a handleLogin via props, saving or linking user data based on database presence, and preparing for server communication.

Learn how to manage accounts and passwords with Meteor packages, create users with username, email, password, and profile, and work with Meteor.user and Meteor.userId.

Learn to build a TypeScript user model with id, username, password, and profile (phone, picture, status), then seed dummy users via a helper and Meteor server startup.

Create a dummy users array in a TypeScript file, export it, and populate a fictitious user table for the WhatsApp clone, then verify with meteor mongo.

Learn user authentication by invoking a Meteor login method, verifying a user by username on the server, and handling password encryption and login results.

Finish implementing the login flow by handling login with password and user creation when needed. Use client-side login methods and route to the chat page on success.

Explore building a whatsapp-style clone with react router and hooks by implementing a login flow, routes, a right image panel, and controlled form fields.

Introduce a two-pane react layout for WhatsApp clone by decomposing main into left and right, focusing on left to render chats and header with styled components, flexbox, moment, and FontAwesome.

Break down the main component into left and right panels, building a header, status, search bar, and chat items on the left, with avatars, and conditional views on the right.

Build left component for the react clone whatsapp app using styled components, creating Left.tsx with a styled left container (flex column, width 35%, height 100%, right border) and exporting.

Create the right side of the chat layout with StyledRight as a flex container (65% width, 100% height) and implement the Right component using RightImg, planning a future MessageView.

Render left and right panels inside main component using Left and Right, with a flex container and styled components, creating a full screen layout and adjustable right width via props.

Design and implement a reusable header component for a WhatsApp clone, with left icons, a center title and online subtitle, and right icons, using React FontAwesome and styled components.

Build a header component featuring an avatar and font awesome icons, using avatar.tsx fed by props and profile.picture from Meteor user data; manage loading with subscribe and tracker.

Create the status component for a WhatsApp clone using styled components and a color prop to toggle orange or blue backgrounds, with an avatar and icons.

Code and style a SearchBar component with StyleSearchBar and SearchBar.tsx, importing React and FontAwesome, adding a labeled icon and input with a placeholder, then render it under status.

Build the chat list component by setting up the tChat collection, modeling chat and message structures, and defining interfaces for title, image, participants, lastChatMessage, content, created, messageType, senderId, and read.

Create dummy chats by developing a helper to populate the chat collection with dummy chat objects, using moment for timestamps and defining a DummyChat array with participants.

Create the ChatList component for a React WhatsApp clone, style it with styled components, and fetch all chats via meteor publish, planning to add ChatItem in the next video.

Create a React chat item component using StyleChatItem, featuring an avatar, two-line content with title and date, and last message with a badge, plus hover and active backgrounds.

Render chats with renderChats inside StyledChatList to produce an array of JSX, then pass all chat properties to ChatItem via spread and use chat._id as key, avatar_url from picture.

Publish a refined chats.mine publication to return only chats where the current user participates, using this.userId and participants; wire main.tsx with tracker to subscribe and render reactive chat lists.

retrieve chats and display each chat with the correspondent's username and avatar by resolving the other user id from participants, querying Meteor.users, and mapping to updated chat data.

Render the chat list by passing chats from Main.ts to ChatList and mapping to ChatItem to show title, image, and last message. Fix createdAt rendering and format dates with Moments.

install moment and react moment, import moment, and format createdAt with a date or time display; implement a today check to render time for today or the full date otherwise.

Decompose the main component into left and right sections, wire header, status, searchbar, chatList, and ChatItem, and enable clicking avatars and chat bubbles to display the corresponding chat.

Display chats and messages by date with real-time text messaging, using FlipMove and react-meteor-data withTracker to animate and synchronize with the server.

decompose and prioritize ui into components like messageview, left and right, header, footer, message box, and message blocks (text and image), with a day component guiding component hierarchy for coding.

Build and render the MessageView component with styled-components, enabling conditional display between MessageView and RightImg based on a visible prop, and wire props through Main for dynamic UI.

Learn to implement chat selection in a React clone of WhatsApp by managing messageVisible and selectedChat with useState, and wiring reverse data flow through components via onChatClick.

Learn to implement chat selection in a React WhatsApp clone by installing lodash, using _.find to identify the selected chat, and passing selectedChat to highlight the active chat.

Display the header in the message view by importing header and avatar, passing icon props and an icon list, and rendering the selected chat's title and online status.

Build a chat footer using styled components, render FontAwesome icons on both sides of a Type a message input, and position the footer at the bottom of the chat.

Add state to the footer component by introducing input value and iconName with React.useState, wire a controlled input to handleChange, and toggle the icon between microphone and paperplane.

Create a MessageBox component for a WhatsApp clone with styled-components, style mine messages in green, and organize messages by chats and a separate messages collection.

Create and publish a messages collection in Meteor, wire a Mongo-backed collection, and seed it with dummy messages to test chat functionality.

Render messages using messageBox and MessageView, fetch chat-specific messages in Main.tsx, and update reactively with tracker.autorun as the selected chat changes.

Learn how to render chat messages by computing ownership (mine vs other) using sender IDs, for each iteration, and alternating left-right alignment to build a WhatsApp-like chat UI.

Group messages by date using lodash's groupBy, format with moment, and convert to a dictionary for rendering in a React WhatsApp clone, preparing to transform into a table.

Transform a GroupMessage object into a date-keyed array using Object.keys and map, format dates with Moment, and prepare nested loops to render dates and their messages.

Create a day component to display dates in the message box, using a blue day container and a day span driven by props.date, ready for rendering a date array.

Learn to render chat messages under each date with nested maps in a React app, creating reusable MessageText and MessageBox components that distinguish mine from others.

learn to insert a message via a meteor method by building a message object (chat id, content, created at, sender id, type text, read flag) and sending from the footer.

Fix three code errors to enable sending a message and display chats by using readiness checks (ChatReady, MessageReady) and a loading state, preparing real-time messaging.

Implement real-time messaging in a React Meteor app using withTracker to sync messages via tracker.autorun and updated props, wiring MessageView and MessageBox for instant updates.

Implement automatic scrolling to the bottom of the message box by adding a bottom anchor div and a scrollToBottom function triggered by useEffect when chats or messages update.

Learn to animate chat messages with react flip move by wrapping list items to animate on add or remove, install yarn add react-flip-move, and format timestamps with moment.

Create a helper function findLastMessage(chatId) that returns the most recent message by sorting messages by createdAt in descending order. Use it to display each chat's last message.

Sort chats in descending order by lastMessage.createdAt in ChatList before mapping, using .sort and milliseconds. Apply WithTracker to auto-update loading and chat data in real time.

Upload files and send image messages using a file picker and a confirmation modal, and decompose the UI into components like MessageImage and FAB, while using ostrio to upload files.

Break down new components to add an image upload feature with a floating action button set (FABs) and modal, including a header, body image, and send button.

Define a StyledFABs component with styled.div, apply fabVisible-driven styles and hide the file input, then scaffold FABs.tsx and export default fabs for the React WhatsApp clone.

Create the FABItem React component for the WhatsApp clone, rendering a FontAwesome icon from iconName, supporting children, with a bg prop mapped by setBg to purple, orange, blue, or lightblue.

Render four FABItems inside FABs with distinct bg colors and icons (image, camera, file, user) and implement a hidden image file input managed by fabVisible.

Toggle a fabVisible state when a header icon is clicked to reveal a FABs component in the chat, with icons as objects and onClick handlers.

Learn to trigger a hidden file input by clicking a custom component, pass onClick through FABItem to reveal the file picker, and access the selected file value with dom methods.

Implement a hidden file input in React part 2 of select a file, handle input changes, and log the selected file object to the console to prepare a modal preview.

Create a styled modal component in React, including header with an icon and title, body with image preview, and footer sections, plus a floating action button for sending images.

Show and hide a modal in a React app using modalVisible and setModalVisible, with conditional rendering of the modal versus MessageView and Footer, and close via onClose.

Display a selected image inside a modal by managing a selectedImage state, handling file input, and using FileReader to render a data URL in the modal.

Create an images collection with the ostrio:files package, configuring FilesCollection (storagePath, collectionName) and a 10MB upload limit; enable client interaction with ImagesCollection.allowClient.

Learn how to upload a file using the insert method with file parameters, configure autostart, and handle FileUpload events: start, progress, end, and error while binding to a button.

Test the uploadFile flow via the Modal onUpload, pass fileInput to upload, and track start to end progress, then fetch the image URL with images.url and prepare image messages.

Build a MessageImage component using styled components with StyledMessageImage. Implement conditional rendering for mine messages with an image overlay showing the createdAt date via Moment and a FontAwesome check-double icon.

Learn to send image messages by updating the message flow to handle text and image types, upload the image, store its url in Session, and update the message via Tracker.autorun.

Explore sending image messages in a React WhatsApp clone by fixing the modal flow, wiring onUpload to handleSend, and rendering image messages in MessageBox with MessageImage and accurate mine determination.

fix the content of the last picture message by showing a camera icon and the word photo instead of the image url, using lastMessage.type to decide between text and photo.

Send text messages, upload images and files, and display a photo label for the last picture. Click avatars to show a right-side panel with name, avatar, news, and details.

Learn to break down React components, manage state, and communicate with a Meteor server, using OtherProfile, Avatar, and styled components to arrange Left, Right, and Main.

Break down and prioritize components for the OtherProfile view, detailing header, avatar, name title, News, and ActuItem blocks within the main layout.

Create the OtherProfile component for a React WhatsApp clone using styled components, exporting StyledOtherProfile, and conditionally rendering the other user with findOtherUser from helpers.

Import the header component and render it with props iconClass and icons, configure a FontAwesome close icon, and display the header title Info.

Display the avatar below the header using an importable avatar component, wrap the content in a scrollable container, and show the other user’s username with an online label via flexbox.

Create a news component with a styled wrapper, render the news title and content from props, add a divider and phone, and pass actu and phone from otherUser.profile.

Create the ActuItem component using StyledActuItem, with hover styling and a red prop that toggles text and icon color; render three items in OtherProfile with ban, thumbs-down, and trash icons.

Click the avatar in the chat to compute the correspondent's id with findOtherId, lift it up to the Main ancestor via props, and conditionally render the OtherProfile component with otherUserId.

Learn how to close the OtherProfile component by clicking the icon, wiring onClick to props.onClose, and implementing handleClose to hide the panel and clear otherId.

Learn to dynamically adjust left, right, and other profile widths with styled components by toggling OPVisible for left 30%, right 40%, and other profile 30%, creating 100% layout with borders.

Enlarge the avatar by passing a big prop and applying styled css to set width and height to 20rem, border-radius 50%, and toggle OtherProfile visibility via OPVisible.

Apply the think in React approach to decompose and build the LeftSide profile component, enabling editing of name, news, and profile picture, with a hover overlay for image upload.

Break down the left side of a WhatsApp clone into LeftSide with LSHeader, avatar, and LSForm, using conditional rendering to switch between header, status, search, and chat list.

Build the LeftSide component for a React WhatsApp clone using state to toggle visibility. Create styled components, render conditional content with renderLSComponents, and wire it into the Left container.

Create the LSHeader component for the left side header, reuse styles from StyledLeftSide, render a line and an arrow-left icon with the 'Profile' label, and export LSHeader by default.

Display an avatar under the header using a div with class 'LS - header' and render the Avatar component with a big size and the avatar_url from Meteor.user().profile.picture.

Create the LSForm component with a styled container and a read-only input. Drive the title from the type prop (news or username) and include a descriptive left-side separator.

Learn to load and toggle the LeftSide component in a WhatsApp clone using the toggleLS function and LSVisible state, triggered by avatar clicks and LSHeader actions.

Learn to make input fields editable by toggling edit mode with a pen icon using React.useState. Use conditional rendering and a toggleEditable function to switch readOnly and allow writing.

This lecture demonstrates controlled input fields in React, updating the user name on the server with a username method and handling news edits on the client via onChange and value.

Fix the issue by using React state to manage inline edits, toggling editable mode with useState and setState, and saving username and status changes.

Explore how to display a hover-activated avatar overlay in React, using a renderOverlay function, FontAwesome camera icon, and restricting the overlay to the LeftSide component via the inLS prop.

Implement a Meteor method to update a user's profile picture by saving the uploaded image URL to profile.picture. The video covers file uploads, avatar overlays, and isMessage logic.

Update a profile picture in real time using the left component withTracker, binding Meteor.user().profile.picture so the picture updates instantly as the context changes.

Display an alphabetical list of users with avatars, names, and news, applying thinking in React to decompose, prioritize, and manage state. Create UsersList and UserItem to start chats by clicking.

Decompose the interface into a clear component hierarchy, featuring LeftSide, LSHeader, SearchBar, UserList, and UserItem, to display the user list. In the next video, we'll build the static UserList.

Create the static left side by adding a state called UListVisible to toggle the user list, pass dynamic title and placeholder via props, and prepare the user list component.

Create the users list component by extending StyledChatList into StyledUsersList, applying 80% height, 72px items, 1.6rem font, uppercase, color #009688, and padding. Export default; the next video builds UserItem.

Create a user item component with a styled wrapper and bottom divider, reusing chat item styles, and render avatar, username, and news in a two-line content area.

Group users alphabetically by username, excluding the current user with a $ne filter, by fetching and sorting Meteor users via withTracker, then rendering the UsersList.

Group users in alphabetical order with lodash groupBy, creating a dictionary keyed by the uppercase first letter of each username, then prepare an array for rendering in the list.

Learn to render a combined users list by mapping users to letters and corresponding UserItem cards, with proper keys and profile data like username and picture.

Learn how to close the users list by wiring the LSHeader onClose to toggle LS visibility and hide the list, while widening avatars via StyledAvatar wide prop in UsersList.

Learn to respond to a user click by reusing an existing chat found with findOne on participants (otherUserId and Meteor.userId), or create a new chat with ChatsCollection.insert.

Fixes errors in a React WhatsApp clone by replacing the $ in check with $ all for participants, updates the findLastMessage logic, and handles empty messages and new chat creation.

Think in React to break down components, manage state, and connect with the Metero server. Build BigOverlay and ImageViewer to display or hide a profile picture via the OtherProfile avatar.

Break down the app into components with a BigOverlay overlay containing ImageViewer above Left, RightImg, and OtherProfile. Center a wide image with a close icon.

Build a static BigOverlay component in a React WhatsApp clone using styled components. Create StyledBigOverlay and BigOverlay.tsx, render children, and apply fixed full-screen, transparent background, and high z-index.

Build a static version of ImageViewer with styled-components, creating StyledImageViewer and a centered image container with a close icon. Implement the React ImageViewer to accept imageUrl and render an img.

Show and hide the ImageViewer overlay by clicking avatars, using React state with a BigOverlay and conditional rendering that passes imageUrl and handles onClose.

Correct errors and css bugs, add a favicon, and display dynamic unread message counts and badges while enabling message deletion and user search, plus practical challenges.

Modify the time display in the MessageImage component by adjusting the __date class in detailsContainers to render correctly. Next, replace the hard-coded badge with a dynamic unread count.

Implement a dynamic unread messages badge in chat items by creating getBadges and updateBadges, querying ChatCollection and MessageCollection for unread messages and marking them read via Meteor.call.

Learn how to render unread message badges in a chat item with React hooks, using getBadges and updateBadges, and refresh counts when the chat becomes active.

Demonstrates displaying unread message badges by updating badges on chat entry and using scroll-to-bottom in the message box, resetting from 1 to 0 as chats are opened.

Display the WhatsApp favicon by linking whatsapp.ico in the public folder to the main.html head as a rel icon with image/x-icon, then verify it shows in the app.

Implement a user search system using mongodb regex and react state, wiring the search bar input to handleChange, filter users by pattern (case-insensitive), and display results in UsersList.

Take on a challenge to implement a search system for cats using the same logic as the user search, demonstrating reusable search concepts in the React clone WhatsApp project.

Create a popup component inside the BigOverlay to delete a message, using StyledPopup with a title prop and two buttons (to cancel and delete), implemented in TypeScript with styled-components.

Learn to display a popup in a React clone chat by adding popup object with visible and title, render it via BigOverlay and Popup, and toggle visibility with a click.

Hide the popup by wiring the cancel button to onCancel, toggle visibility, and reset the title. Enable deleting messages and images, restricting deletions to the current user's messages.

Learn to delete a text message in a React WhatsApp clone by handling click events, passing the message id, and invoking a Meteor method to remove it.

Learn how to delete an image message by wiring onImgClick through components, pass the message id and type, and display a popup window to manage the action.

Explore challenges in managing chats and media: delete conversations and image messages, remove image references from the database, and navigate to a correspondent's profile with simple, reliable interactions.