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](#-overview) > - [πŸ“¦ Features](#-features) > - [πŸ“‚ Repository Structure](#-repository-structure) > - [🧩 Modules](#-modules) > - [πŸš€ Getting Started](#-getting-started) > - [βš™οΈ Installation](#️-installation) > - [πŸ€– Running S2ImpactTriviaReactTSRefactor](#-running-S2ImpactTriviaReactTSRefactor) > - [🀝 Contributing](#-contributing) > - [πŸ“„ License](#-license) --- ## πŸ“ 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 ```sh └── 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](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/tsconfig.json) | β–Ί TS config files | | [index.html](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/index.html) | β–Ί HTML main file | | [postcss.config.js](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/postcss.config.js) | β–Ί postcss config | | [encryptAnswers.js](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/encryptAnswers.js) | β–Ί utility for encrypted answer | | [vite.config.ts](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/vite.config.ts) | β–Ί vite config file | | [package.json](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/package.json) | β–Ί package json | | [tsconfig.node.json](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/tsconfig.node.json) | β–Ί config file | | [tailwind.config.js](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/tailwind.config.js) | β–Ί tailwind config | | [package-lock.json](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/package-lock.json) | β–Ί lock |
src | File | Summary | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------- | | [EndGame.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/EndGame.tsx) | β–Ί Ennd-game page | | [ScorePopup.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/ScorePopup.tsx) | β–Ί Score pop-up component | | [Header.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/Header.tsx) | β–Ί Header component | | [Footer.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/Footer.tsx) | β–Ί Footer component | | [Success.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/Success.tsx) | β–Ί Succes component | | [Logo.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/Logo.tsx) | β–Ί logo component | | [Modal.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/Modal.tsx) | β–Ί Modal component | | [main.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/main.tsx) | β–Ί main | | [vite-env.d.ts](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/vite-env.d.ts) | β–Ί | | [UserInput.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/UserInput.tsx) | β–Ί UserInput component | | [Layout.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/Layout.tsx) | β–Ί Main layout component | | [App.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/App.tsx) | β–Ί App component | | [Quiz.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/Quiz.tsx) | β–Ί Quiz component | | [index.css](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/index.css) | β–Ί main style css file | | [QuizQuestion.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/QuizQuestion.tsx) | β–Ί QuizQuestion component |
src.quiz.level1 | File | Summary | | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | | [solutionEncrypted.json](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/quiz/level1/solutionEncrypted.json) | β–Ί level 1 solution encrypted | | [quiz.ts](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/quiz/level1/quiz.ts) | β–Ί level 1 quiz | | [originalAnsewer.json](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/quiz/level1/originalAnsewer.json) | β–Ί no encrypted answer |
src.lib.types | File | Summary | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- | | [types.tsx](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/lib/types/types.tsx) | β–Ί GmameStatus and TUser types declarations |
src.lib.hooks | File | Summary | | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | [useGame.ts](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/lib/hooks/useGame.ts) | β–Ί custom hook useGame/code> | | [useQuiz.ts](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/lib/hooks/useQuiz.ts) | β–Ί custom hook useQuiz | | [useDecryptedAnswers.ts](https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor/blob/master/src/lib/hooks/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: ```sh git clone https://github.com/boobaGreen/S2ImpactTriviaReactTSRefactor ``` 2. Change to the project directory: ```sh cd S2ImpactTriviaReactTSRefactor ``` 3. Install the dependencies: ```sh npm install ``` ### πŸ€– Running S2ImpactTriviaReactTSRefactor Use the following command to run S2ImpactTriviaReactTSRefactor: ```sh npm run build && node dist/main.js ``` or in develpoment mode : ```sh npm run dev ``` --- ### πŸ€– Decrypt your answer Use the following command to decrypt your answer : ```sh 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.
Contributing Guidelines 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 ```` 3. **Create a New Branch**: Always work on a new branch, giving it a descriptive name. ```sh git checkout -b new-feature-x ``` 4. **Make Your Changes**: Develop and test your changes locally. 5. **Commit Your Changes**: Commit with a clear message describing your updates. ```sh git commit -m 'Implemented new feature x.' ``` 6. **Push to GitHub**: Push the changes to your forked repository. ```sh git push origin new-feature-x ``` 7. **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](https://choosealicense.com/licenses/mit/) License. ---