Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
19
Comments
144

Fazza Razaq Amiarso

@fazzaamiarsoIndonesia2,320 points

I love building stuff on the web. I focused on building websites that's inclusive for all users, so everyone can enjoy the website. I've worked as a Front-end Code Reviewer in an Indonesian Tech Education Company for 1+ year. I've also contributed to Indonesia's Ministry of Education

I’m currently learning...

Learning all about Frontend and currently focusing on Web Design with interactions.

Latest solutions

  • Interactive Pricing with HTML, SCSS, and Typescript

    #accessibility#sass/scss#typescript#vite

    Fazza Razaq Amiarso•2,320
    Submitted over 2 years ago

    0 comments
  • Accessible Card Details Form

    #accessibility#bem#typescript#vite#gsap

    Fazza Razaq Amiarso•2,320
    Submitted over 2 years ago

    0 comments
  • Interactive Rating Component

    #accessibility#typescript#vite

    Fazza Razaq Amiarso•2,320
    Submitted over 2 years ago

    1 comment
  • Product Feedback with Nextjs T3 stack (Typescript, Tailwind, Trpc)

    #next#react#tailwind-css#typescript#node

    Fazza Razaq Amiarso•2,320
    Submitted almost 3 years ago

    0 comments
  • Loops Landing Page HTML + Tailwind CSS

    #tailwind-css

    Fazza Razaq Amiarso•2,320
    Submitted over 3 years ago

    0 comments
  • Space Website with Typecript, React, and Styled-components

    #react#react-router#typescript#styled-components

    Fazza Razaq Amiarso•2,320
    Submitted over 3 years ago

    0 comments
View more solutions

Latest comments

  • Paweł Chudecki•860
    @SoulRvr29
    Submitted almost 2 years ago

    Advice generator app

    #react#tailwind-css#vite
    2
    Fazza Razaq Amiarso•2,320
    @fazzaamiarso
    Posted almost 2 years ago

    Hi @SoulRvr29! Great work on your project, the README is fantastic!

    You can use 1 state for this project. Example

    // `advice` become an object
    const [advice, setAdvice] = useState({});
    
    // then you can get the advice data
    const adviceContent = advice.advice;
    const adviceId = advice.id
    
      useEffect(() => {
        clickHandler();
      }, []);
    
      const clickHandler = () => {
        fetch("https://api.adviceslip.com/advice")
          .then((response) => {
            if (response.ok) {
              return response.json();
            } else {
              console.log("no data");
            }
          })
    
          .then((data) => {
            setAdvice(data.slip)
          })
    
          .catch((err) => {
            console.log("Something went wrong!", err);
          });
      };
    

    I hope it helps! Cheers!

    Marked as helpful
  • Sam•1,190
    @JustANipple
    Submitted almost 2 years ago

    🟠E-commerce product page | React | Mobile-first | Interactive🟠

    #react#animation
    1
    Fazza Razaq Amiarso•2,320
    @fazzaamiarso
    Posted almost 2 years ago

    Hi Sam! Great job on completing the project!

    I have a quick tip for you.

    The vote state is excessive because you can derive the Vote value from the cart's quantity. Here's how

    // `cart` is cartItems and `setCart` is setCartItems
    const Vote = ({ cart, setCart }) => {
      function handlePlusClick() {
    // increment the quantity directly
        setCart((prevCart) => ({ ...prevCart, quantity: prevCart.quantity + 1 }));
      }
    
      function handleMinusClick() {
        if (cart.quantity <= 0) return;
    // decrement the quantity directly
        setCart((prevCart) => ({ ...prevCart, quantity: prevCart.quantity - 1 }));
      }
    
      return (
        <div className={styles.container_vote}>
          <button className={styles.vote_plus} onClick={handleMinusClick}>
            <img src="icon-minus.svg" alt="downvote" />
          </button>
          <p className={styles.vote_score}>{cart.quantity}</p>
          <button className={styles.vote_minus} onClick={handlePlusClick}>
            <img src="icon-plus.svg" alt="vote" />
          </button>
        </div>
      );
    };
    

    I hope it helps you! Cheers!

    Marked as helpful
  • Bryan Li•3,530
    @Zy8712
    Submitted almost 2 years ago

    IP Address Tracker

    1
    Fazza Razaq Amiarso•2,320
    @fazzaamiarso
    Posted almost 2 years ago

    Hi @Zy8712! Nice solution!

    Since you use Vercel to deploy your project, you can take a look at Vercel Serverless function to create a simple API endpoint which have access to Environment Variable. Documentation Reference.

    I also highly recommend you to use a bundler like Vite for your projects.

    I hope it helps! Cheers!

  • Aleksander Tysklind•860
    @outerpreneur
    Submitted almost 2 years ago

    Single Page Design Portfolio Project

    1
    Fazza Razaq Amiarso•2,320
    @fazzaamiarso
    Posted almost 2 years ago

    Hi @outerpreneur!

    I think Tailwind doesn't have support for grid template area. If you really want to do it with template area, then you may have to resort to write custom CSS. Docs reference.

    Cheers!

    Marked as helpful
  • MrDannie•50
    @MrDannie
    Submitted almost 2 years ago

    Kanban task management web w/ (React + Javascript + Tailwind )

    #react#tailwind-css#react-router
    1
    Fazza Razaq Amiarso•2,320
    @fazzaamiarso
    Posted almost 2 years ago

    Hi @MrDannie! It's awesome that you complete this complex project while learning a new framework!

    I just have a couple suggestions for you:

    • I noticed that you use react-hooks-global-state for Global State. I suggest to take a look at Jotai which do the same thing and same maintainer, but still active and maintained.
    • For some side-effects like inserting item into LocalStorage, it's better to first do it inside Event Handler, rather than useEffect that can be tricky to track. You can refer to this docs. For example in App.jsx
    // instead of this
    useEffect(() => {
        localStorage.setItem("BoardData", JSON.stringify(boardData));
      }, [boardData]);
    
    // do this
      const updateAppData = (data) => {
        setAppBoardData(data);
        // here, what trigger the side effect is immediately obvious
         localStorage.setItem("BoardData", JSON.stringify(data));
      };
    

    I hope it helps! Cheers!

    Marked as helpful
  • Reymart Vigo•960
    @reymartvigo
    Submitted almost 2 years ago

    Job Listing w/ Filtering (ReactJS + Vite + Tailwind + HTML)

    #react#tailwind-css#vite#accessibility
    1
    Fazza Razaq Amiarso•2,320
    @fazzaamiarso
    Posted almost 2 years ago

    Hi ! Nice Solution!

    I have some quick tips for you

    • For deleting item, you can use .filter to avoid array mutation.
    const handleDeleteItem = (itemToDelete) => {
        const updatedItems = selectedItems.filter(item => item !== itemToDelete)
        setSelectedItems(updatedItems);
        setFilterVisible(updatedItems.length !== 0)
      }
    
    • You can utilize spread operator to pass props to a component if the props is the same as the object. Example
    // instead of this
                <Jobs
                  key={job.id}
                  id={job.id}
                  company={job.company}
                  logo={job.logo}
                  new={job.new}
                  featured={job.featured}
                  position={job.position}
                  role={job.role}
                  level={job.level}
                  postedAt={job.postedAt}
                  contract={job.contract}
                  location={job.location}
                  languages={job.languages}
                  tools={job.tools}
                  openFiltered={handleOpenFilter}
    
    // more concise, with the tradeoff of must lookup `job` to know what you passing
    <Jobs key={job.id}  {...job} openFiltered={handleOpenFilter} />
    

    I hope it helps! Cheers!

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub