Build Instagram clone - React TailwindCSS Firebase

Set up an Instagram clone project with Create React App, configure the workspace in VS Code, and install essential dependencies like date-fns, firebase, and react loading skeleton.

Delete unnecessary files and refactor the React instagram clone project, cleaning readme, src, and public assets, and streamline index.js and app.js for a clean setup.

Install and configure the essential VSCode extensions for the Instagram clone project, including ESLint, ES7 React/Redux snippets, and Prettier, to enable linting, formatting, and format on save.

Create app’s folder structure with components, context, helpers, lib, services for Firebase functions, pages, and books, using Tailwind for styling; a seed file will be provided in the next video.

Create a seed.js in the src folder to populate the database with four users and image links, do not store images in Firebase, and run once to avoid duplicates.

Set up Firestore as the database for your Instagram clone by signing up with Gmail, creating a Firebase project in the console, and enabling Firestore in Mumbai with test mode.

Enable Firebase authentication with email and password, create a user, and replace seed user IDs to connect authentication with Firestore data for followers in the Instagram clone.

Create a Firebase context with createContext, export it, and wrap the app with the provider to supply Firebase, Firestore, and authentication values to components.

Register your app in Firebase, copy and paste the SDK config to initialize the project, then import and run the seed script to populate Firestore and fix duplicates.

Install React Router Dom and configure client-side routing with login route using browser router, routes, and route. Enable lazy loading with suspense for on-demand login page bundle.

Create a centralized routes constants file for a React app, defining login, dashboard, sign up, dynamic profile routes, and a not found page, then import and use them across pages.

Learn to install and configure Tailwind CSS in a Create React App, including npm install -D tailwindcss, npx tailwindcss init, update tailwind.config.js, and import styles to enable flex and centering.

Begin building the login page by configuring Tailwind CSS intellisense and managing email, password, and errors with React hooks; navigate to the dashboard using Firebase context.

Continue building login page with a two-column responsive layout in tailwindcss, placing an iPhone image with instagram app in 3/5 column and form in 2/5 column at md breakpoints.

Continue building the login page by creating a tailwind-styled login form with Instagram logo, email and password inputs, error messaging, and a submit button that enables with valid input.

Learn to set a Tailwind theme by adding a colors object in tailwind.config, defining white, blue, gray, black light, background, and primary red, then extend shades for the login page.

Develop a complete login flow using Firebase authentication by wiring a form submit with event.preventDefault, async/await signInWithEmailAndPassword, and navigation to the dashboard, with error handling and field resets.

Learn to tailor login errors on the login page by inspecting Firebase error codes and displaying custom messages for invalid credentials and badly formatted emails, while preserving input state.

Build a signup page in a React app by adapting the login page, adding username and full name inputs, and a sign up route with a login link.

Learn to prevent duplicate usernames in a Firebase-backed signup flow by querying Firestore for existing users, creating new users, updating profiles, and wiring navigation to the dashboard.

Create a dedicated not found page for a React Tailwind CSS app by adding a not-found route and page, styling with Tailwind CSS, and dynamically setting the document title with useEffect.

Create a dashboard page in a React app by building header, timeline, and sidebar components, wiring imports in dashboard.js, and using useEffect to set the document title to Instagram.

Implement a use auth listener hook to track login status with Firebase Auth, persist the user in local storage, and clear it on sign-out for a React Instagram clone.

Create a user.js in the contacts folder and wire it to a user context with useAuthListener. Wrap the app with the user context provider to access login user across routes.

Build and refine the header component using Firebase and user contexts, implement sign out, and display the logged-in user's avatar and display name with route-based login and sign up.

Style the dashboard page by fixing the home icon spacing and updating SVG class names, then implement a three-column grid with gap and centered timeline.

Create a use user hook to fetch Firestore data by user id and wire it into the sidebar, displaying the authenticated user's profile in a React Firebase app.

Modify the sidebar by restructuring its folder, creating user and suggestions components, updating imports, and moving files into a dedicated sidebar folder to streamline the React layout.

Pass username and full name as props to the user component, implement prop types validation, and render a loading skeleton before displaying a linked avatar.

Span the first two columns in a three-column layout using container and col-span-2 in timeline.js, shifting the suggestion column to the right, and remove isRequired prop type and console statements.

Develop the suggestions page in a React app by fetching suggested profiles using the user id from Firebase, and manage loading with a React loading skeleton while data loads.

Learn to implement get suggested profiles in a React Firebase Instagram clone, using skeleton loading, fetch and filter profiles by user id and following, with a ten-profile limit.

Create the Instagram clone's suggested profiles panel by mapping profiles to a suggested profile component and passing user doc id, username, profile id, and user id, with a follow action.

Remove a followed user from the suggestion block by updating the logged-in user's following list and the followed user's followers in Firebase, using doc IDs passed via props.

Implement toggle of following and followers in a Firebase Firestore-based Instagram clone by updating the logged-in user's following list and the followed user's followers list with array union and removal.

Create a timeline by building a post component and a usePhotos hook to fetch logged-in user photos, render with React skeleton, and guide users to add photos if none.

Create a getPhotos function in Firebase JS to fetch photos from Firestore for followed users, map data with user details and like status, and prepare timeline content.

Render and display photos in a React app by sorting by date created, newest first, and using a React skeleton loader for loading states.

Create a post component and export a post function, passing content as a prop and defining a prop-types shape for user name, image source, caption, and date created.

Build a header component for a post in a React app using a user name prop. Render a link with an avatar from /images/avatars/{username}.jpg and display username with prop types.

Create an image component in a React project by defining src and caption props, validating with prop types, and rendering an image with alt text and spacing tweaks.

Create an actions.js file to toggle photo likes in a firebase firestore collection, updating likes with array union or remove, driven by user context and a heart ui.

Develop an interactive Instagram-like UI that toggles likes with a heart icon and shows comments, using React, Hero Icons, and Firebase, with focus management and a caption footer.

Create a React comments component for the instagram clone, wiring props and state, validating prop types, and rendering user comments with names, links, and timestamps using date-fns and tailwind CSS.

Implement add comment functionality in a React Firebase instagram clone by building a comment form, handling input, and updating Firestore with arrayUnion of display name and comment.

Implement protected routes to auto-redirect authenticated users to the dashboard and guard login and signup pages from access when not logged in, using React Router navigation and user props.

Builds the profile page for the instagram-clone app using react, react router dom, and firebase; fetches user by username, handles not found redirects, and displays the user's full name.

Continue working on the profile page by integrating the common header and fetching user photos by user ID from Firebase, while managing photos and followers state.

Build and wire a header component for the profile page, create a photos component, pass props for photos and followers, and implement a Firebase-based follow status check.

Develop and finalize the profile header, implement a follow/unfollow toggle with live follower count using Firebase updates, and handle profile picture rendering with default image fallbacks.

Build a photos component for a profile page in a React TailwindCSS Firebase Instagram clone, rendering photo grids with conditional skeletons, image cards, overlays showing likes and comments.