Submitted 2 months ago

Advice generator app using Next.js

#next#tailwind-css#vitest#shadcn

Tesla_Ambassador•3,070

@tesla-ambassador

Preview site View code

This is a solution for...Advice generator app

HTML
CSS
JS
API

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I mainly did this project to enforce my newly-found knowledge on testing components. I used vitest and I'll probably give Jest a try in my next solution. It's pretty basic cause I was really concentrated on practicing with vitest so, no easter eggs 😭

What challenges did you encounter, and how did you overcome them?

Testing a component that had to get data from an API was challenging for me (Given that it was my first time using vitest). I tried following the tutorial I was learning from but it didn't help much cause the person obscured some important disclaimers in his videos. Also, he was using JavaScript while my solution is in TypeScript but I wasn't too proud to use AI, so a little bit of co-pilot and claude helped me figure out why my code wasn't running.

What specific areas of your project would you like help with?

Could you please look at my file structure and let me know if it's professional and yes... Please look at my testing code and... well generally my code. Let me know what I need to change. If you find problems with the UI and how I could improve it, I'm open to all your wisdom. I tried using a skeleton to prevent that blank space when the fetch API is still fetching data... Pun very much intended 😂

Community feedback

markus•2,620

@markuslewinPosted 2 months ago

Hey!

I don't mind a good-looking skeleton, but if you wanted to, you could always fetch an advice on the server in Home, and send it to AdviceCard as initialQuoteData. That way, you'd avoid the null state and the useEffect!

// page.tsx
export default async function Home() {
  const quoteData = await fetch("https://api.adviceslip.com/advice").then(
    (res) => res.json()
  );

  return <AdviceCard initialQuoteData={quoteData} />;
}

// Card.tsx
export default function AdviceCard({ initialQuoteData }: AdviceCardProps) {
  const [quoteData, setQuoteData] = useState<QuoteData>(initialQuoteData);

  const generateQuote = () => {
    /* ... */
  };

  return (
    <h1 className="text-sm sm:text-md text-primary-neonGreen">
      ADVICE #{quoteData.slip.id}
    </h1>
  );
}

Marked as helpful

Tesla_Ambassador•3,070

@tesla-ambassadorPosted 2 months ago

@markuslewin Thank you so much! This is really much neater and concise.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord