A React-based personality quiz website that determines a user’s element based on their answers to a series of quiz questions. The site then fetches and displays a piece of artwork related to the user’s element from the Met Museum API.
- User Form: Collects the user’s name before starting the quiz.
- Interactive Quiz: Presents a series of questions to identify the user's element.
- Results Display: Shows the user’s determined element and a piece of related artwork.
- Loading State: Displays a message while fetching the artwork.
- React
- React Router
- Tailwind CSS
- Met Museum API
To set up and run the project locally:
- Clone the Repository
git clone https://github.com/freddyfavour/personality-quiz-website.git
- Navigate to the Project Directory
cd personality-quiz-website - Install Dependencies
npm install
- Start the Development Server
The app will be available at
npm start
http://localhost:3000.
- Enter Your Name: On the home page, input your name and click "Start Quiz".
- Complete the Quiz: Answer the questions to determine your element.
- View Results: After completing the quiz, view your element and a related artwork.
-
App.jsx: Main component managing routes and state. -
fetchArtwork.js: Function to fetch artwork from the Met Museum API. -
components/:Header.jsx: Displays the header of the application.Question.jsx: Renders quiz questions and options.Results.jsx: Shows the quiz results and fetched artwork.UserForm.jsx: Form for users to enter their name.UserContext.jsx: Context provider for managing user’s name.
-
constants/data.js: Contains quiz questions, element mappings, and keywords.
The application uses the Met Museum API to fetch artwork. More information can be found here.
This project is licensed under the MIT License. See the LICENSE file for details.
Feel free to fork the repository and submit a pull request for any improvements or fixes.
For questions or feedback, please open an issue on the GitHub repository or reach out to me via email.