Project Description • Learning • Requirements • Stacks • How to run the application
Descrição do Projeto • Aprendizado • Requisitos • Tecnologias Utilizadas • Rodar a Aplicação
This was the second group project I helped develop while studying at Trybe. The application is a question and answer game based on Trivia, developed using React and Redux.
In this project, we also learned and practiced agile methodologies using a Kanban board where the project tasks were defined.
The use of Slack and Zoom was also crucial for the group's communication.
Much of the development was done in a pair-programming-like style, but with all of us helping each other.
At other times, each member coded some parts separately, along with corrections and small modifications.
The group had colleagues with varying knowledge levels, and we contributed to development in the best way each of us could.
I learned a lot from each of them
- Creating a Redux store in React applications.
- Creating reducers in Redux in React applications.
- Creating actions in Redux in React applications.
- Creating dispatchers in Redux in React applications.
- Connecting Redux to React components.
- Creating asynchronous actions in React applications using Redux.
- ✅ [LOGIN SCREEN] Create the login screen where the player must enter information to start a game.
- ✅ [LOGIN SCREEN] Create the "Start Game" button.
- ✅ [LOGIN SCREEN] Create a button on the home screen to go to the settings screen.
- ✅ [GAME SCREEN] Create a header containing player information.
- ✅ [GAME SCREEN] Create the game screen displaying information related to the question.
- ✅ [GAME SCREEN] Develop the game where only one correct answer can be selected per question.
- ✅ [GAME SCREEN] Style the correct answer in green and the incorrect ones in red when clicked.
- ✅ [GAME SCREEN] Develop a timer where the player has 30 seconds to answer.
- ✅ [GAME SCREEN] Create a score tracker with specific characteristics.
- ✅ [GAME SCREEN] Create a "Next" button that appears after an answer is given.
- ✅ [GAME SCREEN] Develop the game so that the player answers five questions in total.
- ✅ [FEEDBACK SCREEN] Develop the feedback header containing player information.
- ✅ [FEEDBACK SCREEN] Create a feedback message to be shown to the player.
- ✅ [FEEDBACK SCREEN] Display results information to the player.
- ✅ [FEEDBACK SCREEN] Create an option for the player to play again.
- ✅ [FEEDBACK SCREEN] Create an option for the player to view the ranking screen.
- ✅ [RANKING SCREEN] Create a button to return to the home screen.
- ❌ [RANKING SCREEN] Create the content of the ranking screen.
Note: Some requirements were not completed due to the accelerated pace of the course, not because I didn’t know how to do them. At the time, I just needed a little more time.
I haven’t decided yet if it’s better to leave it this way to show my progress during my learning or if I should complete the unfinished course project requirements.
Feedback is welcome.
- HTML
- CSS
- JavaScript
- React
- Redux
- Clone the repository:
git clone git@github.com:prtpj1/project-trivia.git - Navigate to the project folder:
cd project-trivia - Install dependencies:
npm install - Start the application:
npm start
⚠️ Wait for the app to open in your browser. If it doesn't, typehttp://localhost:3000/in your browser's address bar.
Note:
At the time of this project, I wasn’t familiar with Conventional Commits. Only from the Back-End module of Trybe’s course did I learn and start writing better commits.
This project currently lacks CSS, as I couldn’t complete it during the course. I will add CSS and the missing features as soon as possible.
If you have any difficulties with the instructions or want to provide feedback, feel free to send me a message
Este foi o segundo projeto em grupo que ajudei a desenvolver enquanto estudava na Trybe. Esta aplicação é um jogo de perguntas e respostas baseado no jogo Trivia e foi desenvolvida utilizando React e Redux.
Neste projeto, também aprendemos e praticamos metodologias ágeis usando um quadro de Kanban onde estavam definidas as demandas do projeto.
O uso do Slack e Zoom também foram muito importantes para a comunicação do grupo.
Boa parte do desenvolvimento foi feito em algo similar ao pair-programing, mas com todos nós nos ajudando mutuamente.
Em outros momentos cada membro fez algumas partes do código em separado e também algumas correções e pequenas modificações.
O grupo possuía colegas de diferentes níveis e conhecimento e com isso fomos desenvolvendo com cada um contribuindo da melhor maneira que conseguia.
Aprendi bastante com cada um deles
- Criar um store Redux em aplicações React
- Criar reducers no Redux em aplicações React
- Criar actions no Redux em aplicações React
- Criar dispatchers no Redux em aplicações React
- Conectar Redux aos componentes React
- Criar actions assíncronas na sua aplicação React que faz uso de Redux.
- ✅ [TELA DE LOGIN] Criar a tela de login, onde a pessoa que joga deve preencher as informações para iniciar um jogo
- ✅ [TELA DE LOGIN] Criar o botão de iniciar o jogo
- ✅ [TELA DE LOGIN] Criar um botão na tela inicial que leve para a tela de configurações
- ✅ [TELA DE JOGO] Criar um header que deve conter as informações da pessoa jogadora
- ✅ [TELA DE JOGO] Criar a página de jogo que deve conter as informações relacionadas à pergunta
- ✅ [TELA DE JOGO] Desenvolver o jogo onde só deve ser possível escolher uma resposta correta por pergunta
- ✅ [TELA DE JOGO] Desenvolver o estilo que, ao clicar em uma resposta, a correta deve ficar verde e as incorretas, vermelhas
- ✅ [TELA DE JOGO] Desenvolver um timer onde a pessoa que joga tem 30 segundos para responder
- ✅ [TELA DE JOGO] Criar o placar com as seguintes características
- ✅ [TELA DE JOGO] Criar um botão de "Next" que apareça após a resposta ser dada
- ✅ [TELA DE JOGO] Desenvolver o jogo de forma que a pessoa que joga deve responder 5 perguntas no total
- ✅ [TELA DE FEEDBACK] Desenvolver o header de feedback que deve conter as informações da pessoa jogadora
- ✅ [TELA DE FEEDBACK] Criar a mensagem de feedback para ser exibida à pessoa usuária
- ✅ [TELA DE FEEDBACK] Exibir as informações relacionadas aos resultados obtidos para a pessoa usuária
- ✅ [TELA DE FEEDBACK] Criar a opção para a pessoa jogadora poder jogar novamente
- ✅ [TELA DE FEEDBACK] Criar a opção para a pessoa jogadora poder visualizar a tela de ranking
- ✅ [TELA DE RANKING] Criar um botão para ir ao início
- ❌ [TELA DE RANKING] Criar o conteúdo da tela de ranking
OBS: Em alguns projetos alguns requisitos não foram feitos devido a dinamica acelerada do curso e não por eu não saber como fazê-los. Na época eu apenas precisaria de um pouco mais de tempo.
Ainda não decidi se é melhor deixar desta forma para demonstrar o meu progresso durante meu aprendizado ou se seria melhor completar os requisitos que ficaram faltando nos projetos do curso.
Feedbacks são bem vindos.
- HTML
- CSS
- JavaScript
- React
- Redux
- Clone o repositório:
git clone git@github.com:prtpj1/project-trivia.git - Acesse a pasta do projeto:
cd project-trivia - Instale as dependências:
npm install - Inicie a aplicação:
npm start
⚠️ Aguarde a aplicação abrir no seu navegador. Caso não ocorra, coloque na barra de endereços do seu navegador:http://localhost:3000/
OBS:
Na época que fiz este projeto eu ainda não conhecia os Conventional Commits. Somente a partir do módulo de BackEnd do curso da Trybe que aprendi e comecei a fazer commits melhores.
Este projeto ainda não possui CSS, pois não pude fazer durante o curso. Assim que possivel estarei adicionando o CSS e as funcionalidades que ficaram faltando.
Se tiver alguma dificuldade com as instruções e quiser dar um feedback me mande uma mensagem