Update README.md with Screenshots

README.md

@@ -15,38 +15,72 @@ DEV Challenges are like miniature Hackathons, and provide a fun opportunity for
 
 ## What I Built
 
-The app that I built for this challenge is a Trivia App that allows users to answer multiple-choice trivia questions. The app features a backend built with FastAPI and a frontend using HTML, CSS, and JavaScript. The backend serves trivia questions and handles user answers, while the frontend provides an interactive interface for users to engage with the trivia questions.
+The app that I built for this challenge is a Trivia Game that allows users to answer multiple-choice trivia questions. The app features a frontend using HTML, CSS, and JavaScript. The frontend provides an interactive interface for users to engage with the trivia questions.
 
-### Features Flag
+### Question Screen 
 
-- Time Limit - A question must be answered within a given time limit. Based on the user's difficulty level, the time limit is adjusted.
-- Difficuliy - When a user answers a question correctly, they add to their answer streak. Based on the user's streak, the app adjusts the difficulty of the questions.
-- Score Multiplier - When a user answers a question correctly, they earn points. The score multiplier feature allows users to earn more points for answering questions within the given time limit.
+![Trivia Question](images/devcycle-feature-flag-challenge-question-screen.png)
+
+### Mechanics Screen
+
+![Game Mechanics](images/devcycle-feature-flag-challenge-mechanics-screen.png)
+
+### Accessibility Screen
+
+![Game Accessibility](images/devcycle-feature-flag-challenge-accessibility-screen.png)
+
+### Accessibility Feature
+![Accessibility Feature](images/devcycle-feature-flag-challenge-accessibility.png)
+
+### Power-Ups Feature
+![Power-Ups Feature](images/devcycle-feature-flag-challenge-power-ups.png)
+
+### Progression System Feature
+![Progression System Feature](images/devcycle-feature-flag-challenge-progression-system.png)
+
+### Scoring System Feature
+![Scoring System Feature](images/devcycle-feature-flag-challenge-scoring-system.png)
+
+### Time-Based Mechanics Feature
+![Time-Based Mechanics Feature](images/devcycle-feature-flag-challenge-time-based-mechanics.png)
+
+### Features
+
+- **Time-Based Mechanics**: Control the availability of timers, speed bonuses, and time-based challenges.
+- **Scoring System**: Configure scoring logic for the trivia app, including streak bonuses and difficulty-based points.
+- **Power-Ups**: Allow players to use tools like 50/50, hints, or skip functionality.
+- **Progression System**: Manage levels, XP, achievements, and content unlocks.
+- **Accessibility**: Manage user accessibility options.
 
 ## Live Demo
 
 You can view the live demo of the app [here](https://bert-cafecito.github.io/devcycle-feature-flag-challenge/).
 
 ## My DevCycle Experience
 
-Integrating DevCycle into my app was an insightful experience. Initially, understanding how to effectively use feature flags was challenging. Feature flags allow you to enable or disable features without deploying new code, which is powerful but requires a good grasp of the system.
+Integrating DevCycle into my application proved to be an insightful and valuable experience. Initially, understanding how to effectively leverage feature flags presented a challenge. Feature flags enable the activation or deactivation of specific features without requiring a code deployment—a powerful capability that necessitates a solid understanding of the system to fully utilize.
 
-One of the key challenges was learning and understanding how to properly set up a feature with the DevCycle platform. After a few attempts, I was able to gain a better understanding of how to create and manage features using the DevCycle platform. I accomplished this by setting up variations for variables on features to create a more dynamic experience for users.
+A key challenge was learning how to properly configure and manage features within the DevCycle platform. After several attempts, I developed a deeper understanding of how to create and control features. This process involved setting up feature variations to deliver a more dynamic and tailored user experience.
 
-Another key challenge was learning how to use user targeting to personalize the experience for different users. By leveraging DevCycle's user targeting capabilities, I was able to create a more dynamic and engaging trivia experience. Here's how I accomplished this:
+Additionally, I encountered the challenge of utilizing user targeting to personalize the user experience. I believe that leveraging user targeting could have significantly enhanced the interactivity and engagement of the trivia experience.
 
-- **Feature Flag Evaluation**: I used targeting rules based on custom properties that I set up for the project. This enabled me to present different variables for each feature based on the user's progress in the trivia game.
+- **Feature Flag Evaluation:** By implementing targeting rules based on custom properties, I could have presented different feature variables based on the user’s progress in the trivia game.
 
-- **Dynamic Adjustments**: Based on the feature flag values, I adjusted the trivia questions' difficulty and time limits to create a personalized experience for each user. This made the app more engaging and challenging for users with different skill levels.
+- **Dynamic Adjustments:** Using feature flag values, I could have adjusted trivia question difficulty and time limits to create a personalized experience for each user. This would have made the app more engaging and challenging for users of varying skill levels.
 
-Overall, using DevCycle's feature flags evaluation and user targeting capabilities allowed me to create a more personalized and dynamic trivia app, enhancing the user experience.
+- **User Accessibility Options:** A great idea I had at the last minute, but didn't implement, was managing user accessibility options via a feature flag. This would have allowed me to dynamically adjust accessibility features, such as font size, color contrast, or other visual adjustments, based on user preferences. This could greatly enhance the user experience for individuals with specific needs or preferences.
+
+As a software engineer primarily focused on backend (server-side) development, I found that DevCycle is more tailored to frontend applications. However, I aimed to create the best static website possible that would leverage the advantages of DevCycle.
 
 ## Suggestions for Improving DevCycle
 
 Based on my experience, here are a few suggestions for improving DevCycle:
 
-- **Enhanced Documentation**: Providing more detailed documentation and examples on setting up and managing feature flags would help new users get up to speed more quickly.
-- **SDK Key Permissions**: I would to see a section explaining how to the client SDK key permissions is set up. Looking at the documentation, I couldn't find a clear explanation on the permissions for SDK keys. At enterprise level, I feel that CISOs would like to know what permissions are being granted to the SDK keys.
+- **Enhanced Documentation:** Providing more detailed documentation and examples for setting up and managing feature flags would help new users get up to speed more quickly.
+
+- **SDK Key Permissions:** I would appreciate a section that explains how to configure client SDK key permissions. In reviewing the documentation, I found limited information on the permissions granted to SDK keys. For enterprise-level implementations, especially for CISOs, having clear details on SDK key permissions is essential.
+
+- **Discord Community:** The DevCycle Discord community felt somewhat lackluster and could benefit from more engagement and resources. A more active and resourceful Discord channel would help users feel more connected and supported. If you’d like to reach out, feel free to connect with me through your Discord server..
 
 By addressing these areas, DevCycle can further enhance its platform and provide an even better experience for its users.