Fazza Razaq Amiarso

@fazzaamiarso

All comments

@SoulRvr29

Submitted about 1 year ago

It was easy, but a good challenge. It's the first time I've combined React with Tailwind and I'm happy with the result. I'm still not entirely sure how data fetch works, but I managed to get it done.

Advice generator app

Fazza Razaq Amiarso• 2,340

@fazzaamiarso

Posted about 1 year 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• 940

@JustANipple

Submitted about 1 year ago

Hi everyone! i made it through this challenge!

The hardest part was to manage states for every component and passing everything to the "add to cart" button to fill the cart list

Hope you will like it!

I would like to get any tip on how to improve my solution!

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

Fazza Razaq Amiarso• 2,340

@fazzaamiarso

Posted about 1 year 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 about 1 year ago
Very fun project. Hoping to get some advice with localstorage and how I can use things such as .env, backend api's, etc in order to protect API Key's and other various things. Thanks.
IP Address Tracker
1
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year 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!
0
P
Aleksander Tysklind• 860
@outerpreneur
Submitted about 1 year ago
My second project with tailwindss how do you do grid template areas with Tailwind CSS? This is the only way I have found out. The slider has a working solution at the moment but is not yet perfect
Single Page Design Portfolio Project
1
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year 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
0
MrDannie• 50
@MrDannie
Submitted about 1 year ago
Hi guys!👨‍💻 I'm super exited completing this challenge! I've a learnt a whole lot as this is first largest app I have built using React and Tailwind (I have always been an Angular developer). I encountered a lot of challenges, bugs and errors in the process of developing this application, which I learnt a lot from. And also thanks to Google, youtube & stack overflow, I would probably had been stuck on some errors forever 😂 :)

Some of major areas I encountered challenges while developing this application were State Management & Passing data btw components. However I believe was able to do a good Job at this as it pushed me to learn how to effectively utilize tools like Context Api, useRef, useEffect, props and callback.

I will love to receive feedbacks from the community :

How long did it take you to complete this project (it took me 1 and half month)?

What was the biggest thing you learnt building this project?

What were your most difficult areas?

Pls kindly also rate my work on a scale of 1-10, I would be also pleased to know what areas I should in improve on?

Thanks! 😊
Kanban task management web w/ (React + Javascript + Tailwind )
1
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year 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
0

Reymart Vigo• 960

@reymartvigo

Submitted about 1 year ago

Hi this is my solution to Job Listing w/ Filtering.

Feel free to give feedbacks and suggestions on how I can improve are very welcome!

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

Fazza Razaq Amiarso• 2,340

@fazzaamiarso

Posted about 1 year 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

Leone DaVinci• 340
@Leone-Ricardo
Submitted about 1 year ago
In this challenge, I changed some parts to make it as professional as possible, and one of the features I added was the success message that appears after completing the registration, it was not in the original documentation, but I thought it would look more stylish this way haha. Better solutions and tips are always welcome!
Intro component with sign up form
1
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year ago
Hi @Leone-Ricardo! Nice solution and great addition!

I have some suggestion for you

For Submit Button, it's better to use a <button> as it can have image, icons, elements, and text as a display value, whreas <input> can only have text as value. So it become

// <button> by default have "submit" type <button id="formSubmit" class="btn_submit">Claim your free trial</button>

If you implemented the suggestion above, then you can also refactor the inputs looping like this.

// select all input elements const inputElements = document.querySelectorAll("input"); // loop all input with forEach, where `inputEl` is the actual input element inputElements.forEach((inputEl, idx) => { inputEl.classList.remove("error"); formError[idx].style.display = "none"; //... other codes })

I hope it helps! Cheers!
1
Jared Brown• 90
@JaredBrown1
Submitted about 1 year ago

What did you find difficult while building the project?

What was difficult for me was getting the state in order. I had to really sit back and think about how to get all this state to load in one bigger component. Dark mode was a little struggle as well.

Which areas of your code are you unsure of?

I am unsure of the way I handled the state of the dark mode toggle button. I want to get it to where it can toggle depending on the users system dark mode settings, if that makes sense because right now it can load in with dark mode but the button isn't toggled.

3)Do you have any questions about best practices? I would appreciate any advice on best practices regarding the way I handled the state in my application.
Dictionary application built with NextJS, Tailwind and ContextAPI
1
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year ago
Hi @JaredBrown1! Great work on finishing your project!

I think I can help answer your questions:

State management is definitely hard. My recommendation is to read this article by Kent C. Dodds as a starting point. I also encourage you to read his other articles on React because I learnt a lot of best practices from him.

In next-themes, You can get the user's system theme returned by useTheme. Here's the documentation reference. Example:

const { systemTheme } = useTheme() useEffect(() => { // set toggle state based on user's theme }, [])

To keep your codebase clean and formatted nicely, you always want to have ESLint combined with Prettier. Here is a simple tutorial

I hope it helps! Cheers!
Marked as helpful
0
Anslem Nnakwe• 160
@ansman58
Submitted about 1 year ago
I’d appreciate corrections on what aspects of the code I should improve on
Space tourism website built using React
1
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year ago
Hi @ansman58! Great job on finishing the project!

I have some suggestions for you

Currently you are navigating by rendering component conditionally with State. I recommend you to use a routing library instead. The most popular is React Router

In your Crew page, rather than using useEffect to find the selected crew, you can achieve the same result by doing it in render. Example:

// by doing this, you don't need `data` state anymore const { crewMember, setCrewMember } = React.useContext(CurrentNavContext); // this will be re-calculated everytime `crewMember` changes. const crewInfo = crew.find((item) => item.role === crewMember) ?? null; <Section subtitle={crewInfo?.role} title={crewInfo?.name as string} description={crewInfo?.bio as string} titleClass={style.sectionTitle} subtitleClass={style.sectionSubtitle} />

I hope it helps! Cheers!
0
P
Andrija• 560
@andrijaivkovic
Submitted about 1 year ago
Hi! This is my solution to this challenge. Any and all feedback is appreaciated! :)
IP Tracking App
1
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year ago
Hi @andrijaivkovic! Great work!

I have some suggestion for you

Since this project require you to use an API Key which anyone can exploit if exposed to public (especially paid services). You can utilize Netlify functions in conjuction with environment variables to hide your API Key. Here are tutorials for Netlify Functions and environment variables.

I hope it helps! Cheers!
0
Gii• 310
@giiancarlonv
Submitted about 1 year ago
badly need help! i got this error after deploying, did everything to fix it

error message - Loading module from “https://giiancarlonv.github.io/assets/index-66f0fd8a.js” was blocked because of a disallowed MIME type (“text/html”).

*edit fixed. thanks everyone!!
using react + vite
2
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year ago
Hi @giiancarlonv!

I've taken a look at your code and I suspect it's because of the Script tag in index.html that contains the attributes below which not suppose to be there

type="module" src="https://giiancarlonv.github.io/assets/index-66f0fd8a.js"

I hope it helps! Cheers!
1
Jiwon Suh• 210
@suhjiwon95
Submitted about 1 year ago
I'm open to all suggestions! :D
Advice generator app
2
Fazza Razaq Amiarso• 2,340
@fazzaamiarso
Posted about 1 year ago
Hi @suhjiwon95! Great work!

I have some quick tips for you

To improve user experience, you can fetch an initial advice so the UI doesn't feel empty. You can also insert an Empty State UI.

When naming in Javascript, especially Frontend, it's primary convention is to use camelCase. If I'm not mistaken, snake_case is Python's convention.

const advice_id = data.slip.id; const adviceId = data.slip.id; 👍

You can also do Object destructuring.

const { advice } = data.slip;

I hope it helps! Cheers!
Marked as helpful
0

Fazza Razaq Amiarso

All comments

Advice generator app

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

IP Address Tracker

Single Page Design Portfolio Project

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

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

Intro component with sign up form

Dictionary application built with NextJS, Tailwind and ContextAPI

Space tourism website built using React

IP Tracking App

using react + vite

Advice generator app