HERE'S HOW TO

@222nizzy

15.7K followers · usually 3.0K views a post

Views

18.5K

Likes

805

Comments

5

Shares

19

SoundTikTok sound · original sound - 222nizzy

Promoted product

Nizzy

Why it worked

The video provides a practical solution to a common developer pain point (repetitive coding for authentication forms) by showcasing a reusable component. The use of a 'native mention' promo subtlety, where the product is integrated naturally into a helpful tutorial, likely contributed to its reach.

Summary

This video demonstrates how to save development time by creating a reusable boilerplate component for authentication forms. The creator shows how to build a 'CardWrapper' component that can be customized for login, registration, and password reset pages, including social login options and navigation buttons.

Structure

1Introduction to saving time on coding authentication
2Showing the need for register, login, and password reset pages
3Explaining the inefficiency of copy-pasting code
4Introducing the concept of a reusable boilerplate component
5

Original caption

Save HOURS when coding ⏰🧑🏽‍💻 #fyp #coding #ai #website #chatgpt

More from @222nizzy

Product placement

The video showcases a React component called 'CardWrapper' which is presented as a reusable solution for building authentication forms (login, register, password reset). The component includes props for social login buttons (Google, GitHub) and navigation links, demonstrating its versatility.

On-screen text

HERE'S HOW TO SAVE YOURSELF HOURS WHEN CODING TO ADD AUTHENTICATION INTO OUR APP WE NEED LIKE A REGISTER PAGE A LOGIN PAGE LIKE A FORGOT PASSWORD PAGE ON THE ONE COPY AND PASTE CODE ON EACH THE LOGIN PAGE SPECIFIC TYPE OF CODE REGISTRATION PAGES TYPE OF CODE WE'RE DEVELOPERS AND WE WANNA SAVE WHAT YOU CAN DO INSTEAD RIGHT JUST CREATE A PIECE OF CODE THAT YOU CAN REUSE IN THE COAT WE HAVE A CARD WRAPPER WE HAVE THINGS SUCH AS THE WHICH WILL ALLOW GOOGLE AUTH AND WE HAVE LIKE A BACK BUTTON LABEL AND A HEADER TITLE GO INTO OUR LOGIN FORMS AT REGISTRATION FORMS JUST CALL IT HERE THE LOGIN TITLED WE'D HAVE THE BACK BUTTON THE SO SOCIAL THAT WHEN WE PAGE US 10 TIMES MORE TIME A BOILERPLATE PIECE OF CODE JUST REUSE THROUGHOUT OUR ENTIRE APP AND ONLY DOES BUT IT'S ALSO COMPANIES TO LOOK IT'S A GREAT TIP

Transcript

HERE'S HOW TO SAVE YOURSELF HOURS WHEN CODING Imagine we wanted to add authentication into our app. So we need like a register page, a login page, as well as like a forgot password page. On the one hand, we could just copy and paste code on each page, you know, so the login page will have its specific type of code and the registration pages have its specific type of code. However, we're developers and we wanna save time. So what you can do instead right is just create a boilerplate piece of code that you can reuse in the coat of your code. So for example, here we have a card wrapper and in it we have things such as the show social which will allow us to have Google auth and GitHub auth. We have like a back button label and a header title. So when we go into our login forms at registration forms, we could simply just call it here, the login titled, we'd have the back button label as well as the show social. That when we're making each page, it just saves us 10 times more time because we have a boilerplate piece of code that we can just reuse throughout our entire app. And only does it save you time, but it's also good practices for companies to look at. It's a great tip.