Research fun facts feature

AS A user I WANT to click on a card of a historical figure with an image, and see it flip and show a fact about that figure. SO THAT I have a fun way to learn more about black history

Acceptance criteria

[x] Research packages and libraries required (Axios, Tailwind and other React libraries, e.g. for animation)
[x] Visualise random fact generator, how does it look and how does it function? What packages would it require for the functionality
[x] Research how we would obtain images for random fact generator. What service/API would this use? Is it free? Can you test it?
[x] Can each wild card just be a random fact generator button
[x] Research Rick & morty and GOT activity - go through it again and look at the functions. Which code is relevant to our app. Add this to pseudo code
[x] What code would be needed to enable the flipping of the cards?
[x] How would the search feature work
[x] Draw a rough layout if the visualised product looks different to our wireframe.

Packages and Libraries

Axios

In our project, Axios serves as a powerful JavaScript library, simplifying interactions with the Black History API:

Effortless API Requests: Axios streamlines HTTP requests to external APIs like the Black History API. Its user-friendly syntax allows easy creation of various requests.

Async/Await Simplicity: As a promise-based library, Axios simplifies asynchronous code with clear async/await syntax, making asynchronous operations appear more synchronous.

Robust Error Handling: Axios includes built-in support for handling errors, ensuring a reliable mechanism to catch and manage potential issues during API requests.

Header Configuration: Proper header setup is crucial for API interactions, and Axios provides a convenient way to configure headers for authentication and content type specifications.

Check out this YouTube tutorial, "Fetch Data with Axios - Example in React."

Tailwind and other React Libraries

Tailwind: A utility-first CSS framework, Tailwind facilitates rapid development with pre-defined classes directly applied in the markup. Its benefits include consistent styling, responsiveness, flexibility for customization, and seamless integration with React. For a quick overview, watch "Tailwind CSS Introduction."

StyleX: Is a new CSS-in-JS library from Meta (2022), StyleX optimizes web application styling with atomic and reusable CSS styles in JavaScript. Key features include scalability, predictability, composability, speed, and type safety. Explore APIs like stylex.create and stylex.props for defining styles in components. Utilize stylex.defineVars for global variables supporting dynamic layouts, theming, and more. Watch this YouTube video to learn more about StyleX.

Animation

Framer Motion: A React animation library, Framer Motion offers a clean and declarative syntax, making animation creation easy. It introduces 'variants' for defining animation states, providing controls for smooth transitions. With built-in gesture support, Framer Motion aligns well with our project's goal of creating an interactive card flipping feature. Check out this Awwwards-worthy Link Hover Effect tutorial using React, Tailwind, and Framer Motion: Link. It could provide valuable insights and inspiration for our animation implementation in the project.

Game Overview:

The Fun Facts Card Game is an interactive and educational web application designed to engage users, particularly children aged 7-14, in learning about key historical figures. The game features two modes: Easy Mode and Hard Mode, each offering a unique gameplay experience.

Core Elements:

1. Card Layout and Interaction: • The game page displays either in 3x3 or 3x4 grid configuration. • Cards have images of historical figures in Easy Mode, while all cards look the same in Hard Mode. • Users click on a card to flip it, revealing a fact on the other side. • Clicking again flips the card back. 2. Game Modes: • Easy Mode: • When a user clicks on a card in easy mode, it flips over, grows in size, and reveals the fact. • Cards stay flipped, allowing users to click on multiple cards to learn more facts. • The round ends when all cards have been selected. • Hard Mode: • All cards look the same on the image side. • Cards reshuffle after a predetermined number of flips. • The round ends after a set number of flips.

Wild Cards: • Design the wild cards to appear with a distinct animation or effect, creating anticipation when they are drawn. • Three types of wild cards: • Random Fact Wild Card: Provides a random fact about a historical figure not in the current set. • Reward Wild Card: Grants bonus points or a badge to the user. • Pop Quiz Wild Card: Triggers a bonus quiz round.
Game Modes: • Three game modes: • Random Facts Mode: Allows users to explore random figures or use a search bar for specific inquiries. • Themed Categories Mode: Offers categories such as key civil rights figures, inventors, and artists. Using tabs to select a category. • Pop Quiz Mode: Randomly initiated by the Pop Quiz Wild Card, with a potential timer in Hard Mode.
Scoring System: • Users earn points for correctly answering quiz questions, flipping cards, and completing rounds. Gameplay:
Starting the Game: • Users choose between Easy Mode and Hard Mode. • They can also select a game mode: Random Facts or Themed Categories.
Playing the Game: • In Easy Mode, users click on cards to reveal facts. The round ends when all cards are selected. • In Hard Mode, users navigate through reshuffling cards and try to complete the round within a set number of flips.
Wild Cards: • Wild cards add excitement: • Users can identify the presence of a wild card in Easy Mode but won't know the type. • In Hard Mode, all cards look the same, and the wild card type is revealed only upon flipping.
Scoring and Progression: • Users earn points for various actions, including answering quiz questions and using reward wild cards. • A leaderboard may display top-scoring users.
End of Round: • Easy Mode ends when all cards are selected. • Hard Mode ends after a predetermined number of flips. Educational Value: The Fun Facts Card Game aims to make learning about historical figures enjoyable and interactive, offering users a variety of gameplay options and challenges. The inclusion of random facts, themed categories, and pop quizzes enhances the educational experience, fostering engagement and curiosity. The game provides a balance of entertainment and learning, making it suitable for educational settings or individual exploration.

libraries that might be helpful for specific functionalities in Fun Facts Card Game project:

React.js:

Since you're using JavaScript, consider using the React.js library if you're not already. React is widely used for building user interfaces, and it works seamlessly with Node.js. Express.js:

If you need to set up a backend server (e.g., for handling API requests, managing user sessions, etc.), Express.js is a lightweight and fast web application framework for Node.js. Axios:

For making HTTP requests, Axios is a popular and easy-to-use JavaScript library that works both in the browser and Node.js. MongoDB (optional):

If you plan to store user data, game scores, or any other persistent information, MongoDB could be a suitable NoSQL database. However, for a simpler project, you might not need a database. dotenv:

If you use any environment variables, dotenv is a handy library to load environment variables from a .env file into process.env. Concurrently:

If you have a backend server and a frontend React app, Concurrently can help you run both simultaneously during development. Nodemon (development dependency):

Nodemon is a utility that will monitor for any changes in your source code and automatically restart your server. React Router:

If you plan to have multiple pages or views within your React app, React Router is a standard library for routing in React. classnames:

For dynamic styling with Tailwind CSS, classnames can help you conditionally apply styles based on certain conditions. react-query:

If you need to manage state and fetch data from your API efficiently, react-query can be a powerful tool for handling data fetching, caching, and state management. PropTypes (development dependency):

For runtime type checking of your React props during development, PropTypes can be a valuable library. Jest and React Testing Library (development dependencies):

If you plan to write tests for your components, Jest and React Testing Library are commonly used tools for testing React applications.

ClaireFraser121 / tbt-education-app