Skip to content

Latest commit

 

History

History
287 lines (221 loc) · 15.3 KB

README.md

File metadata and controls

287 lines (221 loc) · 15.3 KB
Raw

S2IMPACTTRIVIAREACTTSREFACTOR

license last-commit repo-top-language repo-language-count

Developed with the software and tools below.

JavaScript HTML5 PostCSS Autoprefixer Vite React TypeScript JSON

🔗 Quick Links

📍 Overview

► this project is related to the start2Impact blockchain master specifically for the React-Typescript course. I will therefore use typescript and react mainly to create an app based on multiple-answer quizzes, the request is: You will create a web app in React to carry out a quiz dedicated to the topic of food and its impact on the environment and on people.

📦 Features and Decision

► the app will open with the request to enter a username if not already present on local host. At that point we will start with the first set of multiple answer questions, there are 10 questions . A final screen will give the score obtained, to which a "skill" level will be associated (for example, from 1 to 3 correct answers -> basic, from 4 to 7 correct answers -> intermediate, from 8 to 9 correct answers -> expert /a, 10 correct answers -> teacher) you can share the result on a social network, currently Twitter - X . For each correct or incorrect answer there will be a graphic pop up to provide feedback. the questions will have to be inserted in the quiz.ts file in the src/level1 path and will have to be encrypted before putting the app online. to encrypt them, launch as per the instructions: npm run encrypt-answers, at which point you will find a new file "solutionEncrypted.json" in the same folder which will be decrypted by a custom hook.ovviamente il fie "originalAnswers" si potrebbe cancellare ma per motivi solo di chiarezza e in questa demo lo lascio nel repo. to encrypt and decrypt I use CriptoJS and a key that is in .env. for clarity I left a ".envfake" file to give an example of how to insert the key :all this to avoid giving users the chance to discover the correct answers without creating a backend. non ho usato useReducer perché' il rpop drill non e' mai più di un livello , per organizzare e pulire il codice ho usato un paio di custom hook.

-

Repository Structure

└── S2ImpactTriviaReactTSRefactor/
    ├── README.md
    ├── encryptAnswers.js
    ├── favicon.ico
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
    │   ├── favicon.ico
    │   └── font
    │       ├── ScriptSheep.ttf
    │       ├── ScriptofSheep.eot
    │       ├── ScriptofSheep.ttf
    │       ├── ScriptofSheep.woff
    │       └── ScriptofSheep.woff2
    ├── src
    │   ├── App.tsx
    │   ├── EndGame.tsx
    │   ├── Footer.tsx
    │   ├── Header.tsx
    │   ├── Layout.tsx
    │   ├── Logo.tsx
    │   ├── Modal.tsx
    │   ├── Quiz.tsx
    │   ├── QuizQuestion.tsx
    │   ├── ScorePopup.tsx
    │   ├── Success.tsx
    │   ├── UserInput.tsx
    │   ├── index.css
    │   ├── lib
    │   │   ├── hooks
    │   │   │   ├── useDecryptedAnswers.ts
    │   │   │   ├── useGame.ts
    │   │   │   └── useQuiz.ts
    │   │   └── types
    │   │       └── types.tsx
    │   ├── main.tsx
    │   ├── quiz
    │   │   └── level1
    │   │       ├── originalAnsewer.json
    │   │       ├── quiz.ts
    │   │       └── solutionEncrypted.json
    │   └── vite-env.d.ts
    ├── tailwind.config.js
    ├── tsconfig.json
    ├── tsconfig.node.json
    └── vite.config.ts

🧩 Modules

.
File Summary
tsconfig.json ► TS config files
index.html ► HTML main file
postcss.config.js ► postcss config
encryptAnswers.js ► utility for encrypted answer
vite.config.ts ► vite config file
package.json ► package json
tsconfig.node.json ► config file
tailwind.config.js ► tailwind config
package-lock.json ► lock
src
File Summary
EndGame.tsx ► Ennd-game page
ScorePopup.tsx ► Score pop-up component
Header.tsx ► Header component
Footer.tsx ► Footer component
Success.tsx ► Succes component
Logo.tsx ► logo component
Modal.tsx ► Modal component
main.tsx ► main
vite-env.d.ts ►
UserInput.tsx ► UserInput component
Layout.tsx ► Main layout component
App.tsx ► App component
Quiz.tsx ► Quiz component
index.css ► main style css file
QuizQuestion.tsx ► QuizQuestion component
src.quiz.level1
File Summary
solutionEncrypted.json ► level 1 solution encrypted
quiz.ts ► level 1 quiz
originalAnsewer.json ► no encrypted answer
src.lib.types
File Summary
types.tsx ► GmameStatus and TUser types declarations
src.lib.hooks
File Summary
useGame.ts ► custom hook useGame/code>
useQuiz.ts ► custom hook useQuiz
useDecryptedAnswers.ts ► custom hook useDecryptedAnswers

🚀 Getting Started

Requirements

Ensure you have the following dependencies installed on your system:

  • TypeScript: version x.y.z

⚙️ Installation

  1. Clone the S2ImpactTriviaReactTSRefactor repository:
git clone https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor
  1. Change to the project directory:
cd S2ImpactTriviaReactTSRefactor
  1. Install the dependencies:
npm install

🤖 Running S2ImpactTriviaReactTSRefactor

Use the following command to run S2ImpactTriviaReactTSRefactor:

npm run build && node dist/main.js

or in develpoment mode :

npm run dev

🤖 Decrypt your answer

Use the following command to decrypt your answer :

npm run encrypt-answers

The file with noy decrypted answer must be on src/quiz/level1 directory and the name must be originalAnswers.json


---

## 🤝 Contributing

Contributions are welcome! Here are several ways you can contribute:

- **[Submit Pull Requests](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/main/CONTRIBUTING.md)**: Review open PRs, and submit your own PRs.
- **[Join the Discussions](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/discussions)**: Share your insights, provide feedback, or ask questions.
- **[Report Issues](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/issues)**: Submit bugs found or log feature requests for S2impacttriviareacttsrefactor.

<details closed>
    <summary>Contributing Guidelines</summary>

1. **Fork the Repository**: Start by forking the project repository to your GitHub account.
2. **Clone Locally**: Clone the forked repository to your local machine using a Git client.
   ```sh
   git clone https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor
  1. Create a New Branch: Always work on a new branch, giving it a descriptive name. 
    git checkout -b new-feature-x
  2. Make Your Changes: Develop and test your changes locally.
  3. Commit Your Changes: Commit with a clear message describing your updates. 
    git commit -m 'Implemented new feature x.'
  4. Push to GitHub: Push the changes to your forked repository. 
    git push origin new-feature-x
  5. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.

Once your PR is reviewed and approved, it will be merged into the main branch.

📄 License

This project is protected under the MIT License.