2024-04-19.14-38-14.mp4
This React application is designed to provide users with a unique tarot card experience by generating a lucky tarot card and additional insights. The application leverages asynchronous API calls to fetch tarot card details and relevant quotes, followed by a deeper analysis of the card's meaning in the context of the fetched quote.
- Get Lucky Number: Users can generate a random lucky number by clicking a button. This number is then used to fetch a tarot card from a remote API (
https://tarotapi.dev/api/v1/cards/search?value=${num}
). - Display Tarot Card: Once the card is fetched, it is displayed along with its name and upright meaning.
- Fetching a Quote: When a tarot card is displayed, users can opt to fetch a quote related to happiness from the API (
https://api.api-ninjas.com/v1/quotes?category=happiness
), using an API key for authentication. - Analyzing Tarot Card: Post fetching the quote, users can request an analysis of how the tarot card’s themes relate to the quote. This analysis is performed by making a request to the OpenAI API, incorporating the card’s name, meaning, and the quote into a cohesive interpretative text.
- LuckyGenerator: This component handles the generation of the lucky number and the fetching of the tarot card. It maintains states for the lucky number, fetched tarot card data, loading status, and any errors encountered.
- TarotCardMessage: Responsible for displaying the tarot card information, fetching quotes, and triggering the analysis. It handles multiple states for managing the quote data, analysis results, and their respective loading states.
- useState: Used to manage state across the application, including data handling and UI states (like loading indicators).
- useEffect: Reacts to changes in state, such as the updating of the lucky number or the need to fetch a new quote or analyze the tarot card.
- The application gracefully handles errors from API requests by setting an error state and displaying appropriate error messages to the user.
To run this application:
- Ensure you have Node.js installed.
- Clone the repository and navigate into the project directory.
- Install dependencies with
npm install
. - Start the application with
npm run dev
.
Make sure to set up the necessary environment variables (NEXT_PUBLIC_REACT_APP_API_KEY_NINJAS
and NEXT_PUBLIC_REACT_APP_OPENAI_API_KEY
) to ensure API functionality.
To use the application, simply access the main page, click the "Get Lucky!" button to generate a lucky number and fetch a tarot card. Optionally, you can fetch a related quote and request an analysis of the card in relation to the quote.