Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice generator app using React and TypeScript

@kanuos

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my solution to Advice-generator app. The tech stack used in this project are as follows:

  • React for UI-UX and logic
  • Tailwind CSS for styling
  • TypeScript for type checking
  • Vite as build-tool
  • Vitest and React Testing Library for unit testing the app

The app was built with mobile first approach in mind.

In addition to the challenge, I've also implemented the following -

  1. Welcome screen - for users visiting the app for the first time
  2. Load Screen - a placeholder message displayed when the user clicks the button and the advice is being generated
  3. Error screen - if the server is down or some other error props up in production

Please check out my solution as well as code. Feel free to leave your valuable feedback. Happy coding 👨🏾‍💻

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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