Eu recomendo React Native em conjunção com o Vercel,mas no caso,o desenvolvimento tem de ser feito via notebook e com celular, é a minha prática pessoal.
Esse mini projeto abaixo,eu tenho guardado a meses,em HTML CSS e Javascript,para transformar o código para a sintaxe do React Native.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Game</title>
<style>
body {
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.quiz-container {
background-color: #333;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 90%;
max-width: 600px;
}
.quiz-question {
font-size: 1.5em;
margin-bottom: 20px;
color: #a39ad7;
}
.quiz-options button {
background-color: #a39ad7;
color: black;
border: none;
padding: 10px 20px;
margin: 10px 0;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
width: 100%;
max-width: 200px;
}
.quiz-options button:hover {
background-color: #8e85b4;
}
#result-message {
color: #a39ad7;
margin-bottom: 20px;
font-size: 1.5em;
}
#result button {
background-color: #a39ad7;
color: black;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
#result button:hover {
background-color: #8e85b4;
}
</style>
</head>
<body>
<div class="quiz-container">
<div id="quiz">
<div class="quiz-question" id="question">Question text</div>
<div class="quiz-options">
<button onclick="selectOption(0)">Option 1</button>
<button onclick="selectOption(1)">Option 2</button>
<button onclick="selectOption(2)">Option 3</button>
<button onclick="selectOption(3)">Option 4</button>
</div>
</div>
<div id="result" style="display: none;">
<div id="result-message">You scored X out of Y!</div>
<button onclick="restartQuiz()">Restart Quiz</button>
</div>
</div>
<script>
const questions = [
{
question: "What is the capital of France?",
options: ["Berlin", "Madrid", "Paris", "Lisbon"],
answer: 2
},
{
question: "Who wrote 'To Kill a Mockingbird'?",
options: ["Harper Lee", "Mark Twain", "J.K. Rowling", "Ernest Hemingway"],
answer: 0
},
{
question: "What is the largest planet in our solar system?",
options: ["Earth", "Mars", "Jupiter", "Saturn"],
answer: 2
}
];
let currentQuestionIndex = 0;
let score = 0;
function loadQuestion() {
const currentQuestion = questions[currentQuestionIndex];
document.getElementById('question').textContent = currentQuestion.question;
const options = document.querySelectorAll('.quiz-options button');
options.forEach((button, index) => {
button.textContent = currentQuestion.options[index];
});
}
function selectOption(selectedIndex) {
const currentQuestion = questions[currentQuestionIndex];
if (selectedIndex === currentQuestion.answer) {
score++;
}
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
loadQuestion();
} else {
showResult();
}
}
function showResult() {
document.getElementById('quiz').style.display = 'none';
document.getElementById('result').style.display = 'block';
document.getElementById('result-message').textContent = `You scored ${score} out of ${questions.length}!`;
}
function restartQuiz() {
currentQuestionIndex = 0;
score = 0;
document.getElementById('quiz').style.display = 'block';
document.getElementById('result').style.display = 'none';
loadQuestion();
}
loadQuestion();
</script>
</body>
</html>
Se quiser @RamonVSBR , veja este modelo em uma IDE em seu celular, coloquei tudo em um só corpo HTML para facilitar para você,com uso de div nesse projeto, caso queira adicionar fotos, fica a seu critério,se quiser, claro.
Como Javascript foi minha primeira linguagem de desenvolvimento que aprendi,eu recomendo React Native com a plataforma Vercel para a finalização total do seu app.
É só uma sujestão a mais.

