4 | 
5 | 
6 | **CodeChallengeQuiz** es una aplicación interactiva diseñada para mejorar tus habilidades de programación a través de cuestionarios y retos de algoritmos. Esta aplicación es ideal para preparar entrevistas técnicas, desafiar tus conocimientos y aprender nuevas tecnologías.
7 |
8 | ## Características
9 |
10 | - **Quizzes Interactivos:** Preguntas de opción múltiple sobre diversos lenguajes de programación, frameworks y tecnologías. Ideal para practicar para entrevistas técnicas.
11 | - **Retos de Algoritmos:** Genera, escribe y envía algoritmos para ser validados y corregidos por la IA.
12 | - **Playground:** Una sección donde puedes elegir entre preguntas o retos de algoritmos para practicar y mejorar tus habilidades.
13 | - **Tecnologías Soportadas:** Incluye soporte para lenguajes como JavaScript, Python, Java, C++, y más, así como frameworks y herramientas populares.
14 |
15 | ## Tecnologías Utilizadas
16 |
17 | - **Front-End:** Next.js, HTML, CSS
18 | - **IA:** Google Gemini, Vercel AI SDK
19 |
20 | ## Instalación
21 |
22 | 1. **Clona el repositorio:**
23 | ```sh
24 | git clone https://github.com/AletzMan/code_challenge_and_quiz.git
25 | cd CodeChallengeQuiz
26 | ```
27 |
28 | 2. **Instala las dependencias:**
29 | ```sh
30 | npm install
31 | ```
32 |
33 | 3. **Ejecuta la aplicación:**
34 | ```sh
35 | npm run dev
36 | ```
37 |
38 | 4. **Accede a la aplicación:**
39 | Abre tu navegador y ve a `http://localhost:3000`
40 |
41 | ## Uso
42 |
43 | - **Página Principal:** Explora las funcionalidades principales y selecciona entre quizzes interactivos y retos de algoritmos.
44 | - **Playground:** Elige entre responder preguntas o resolver algoritmos para practicar de forma interactiva.
45 | - **Quizzes:** Responde preguntas de opción múltiple sobre diferentes tecnologías y recibe feedback inmediato.
46 | - **Algoritmos:** Escribe y envía tu código para ser validado y corregido por la IA.
47 |
48 | ## Contribuciones
49 |
50 | ¡Contribuciones son bienvenidas! Por favor, sigue estos pasos para contribuir:
51 |
52 | 1. **Fork el repositorio**
53 | 2. **Crea una nueva rama:**
54 | ```sh
55 | git checkout -b mi-rama
56 | ```
57 | 3. **Realiza tus cambios y haz un commit:**
58 | ```sh
59 | git commit -m 'Añadir algo increíble'
60 | ```
61 | 4. **Envía tus cambios a tu repositorio remoto:**
62 | ```sh
63 | git push origin mi-rama
64 | ```
65 | 5. **Abre un Pull Request**
66 |
67 | ## Licencia
68 |
69 | Este proyecto está bajo la licencia MIT. Ver el archivo [LICENSE](LICENSE) para más detalles.
70 |
71 | ## Contacto
72 |
73 | Para cualquier consulta o sugerencia, puedes contactar al autor del proyecto:
74 |
75 | - **Email:** [MAIL](mailto:alejandro.ga.dev@gmail.com)
76 |
--------------------------------------------------------------------------------
/app/(pages)/algorithms/components/AlgorthmsSetUp/styles.module.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | display: flex;
4 | flex-direction: column;
5 | align-items: center;
6 | margin: 0em 0 0 0;
7 | padding: 2em;
8 | border-radius: 0.25em;
9 | //border: 1px solid #2b2b2b;
10 |
11 | @media (width < 600px) {
12 | margin: 0;
13 | padding: 0.5em;
14 | gap: 0.5em;
15 | }
16 | }
17 |
18 | .options {
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | gap: 1.5em;
23 | margin: 1em;
24 |
25 |
26 | }
27 |
28 | .selects {
29 | display: flex;
30 | gap: 1em;
31 |
32 | @media (width < 600px) {
33 | flex-direction: column;
34 | align-items: center;
35 | }
36 | }
37 |
38 | .difficulty {
39 | display: flex;
40 | align-items: center;
41 | flex-direction: column;
42 |
43 |
44 | &_label {
45 | font-size: 0.8em;
46 | color: var(--fontsecond-color);
47 | }
48 |
49 | &_buttons {
50 | display: flex;
51 | gap: 1em;
52 | padding: 1em;
53 | border-radius: 0.25em;
54 | background-color: var(--black-color);
55 |
56 | @media (width < 600px) {
57 | flex-direction: column;
58 | }
59 | }
60 |
61 | &_icon {
62 | width: 1.5em;
63 | height: 1.5em;
64 | }
65 |
66 | &_button {
67 | display: flex;
68 | align-items: center;
69 | justify-content: center;
70 | gap: 0.5em;
71 | min-width: 8.5em;
72 | padding: 0.25em 0;
73 | background-color: #a5a5a510;
74 | border-radius: 0.25em;
75 | font-weight: 400;
76 | border: 1px dashed #FFFFFF25;
77 | color: var(--fontsecond-color);
78 | background: var(--gray-color);
79 | font-family: var(--font-family);
80 | text-transform: capitalize;
81 | transition: all 0.3s ease-in-out;
82 | text-shadow: 0 0 3px #000000;
83 | filter: brightness(80%);
84 |
85 |
86 |
87 | &:not(.difficulty_buttonActive) {
88 | cursor: pointer;
89 | }
90 |
91 | &:hover:not(.difficulty_buttonActive) {
92 | filter: brightness(140%);
93 | box-shadow: 0 0 5px 2px #CCCCCC30;
94 | }
95 |
96 | &Easy:is(.difficulty_buttonActive) {
97 | //color: #40d940;
98 | //border-color: #028207;
99 | background: linear-gradient(-15deg, #02550480, #06980b80, #06980b80, #02550480);
100 | }
101 |
102 | &Medium:is(.difficulty_buttonActive) {
103 | //color: #3399FF;
104 | //border-color: #9a8b05;
105 | background: linear-gradient(-15deg, #1c6ab780, #3399FF80, #3399FF80, #1c6ab780);
106 | }
107 |
108 | &Hard:is(.difficulty_buttonActive) {
109 | //color: #FF8C00;
110 | //border-color: #925902;
111 | background: linear-gradient(-15deg, #5b370280, #b16c0480, #b16c0480, #5b370280);
112 | }
113 |
114 | &Expert:is(.difficulty_buttonActive) {
115 | //color: #FF0000;
116 | //border-color: #bd1206;
117 | background: linear-gradient(-15deg, #720b0480, #c11a0e80, #c11a0e80, #720b0480);
118 | }
119 |
120 | &Active {
121 | filter: brightness(140%);
122 | box-shadow: 0 0 5px 2px #CCCCCC30;
123 | color: var(--font-color);
124 | }
125 | }
126 | }
--------------------------------------------------------------------------------
/app/components/QuizBot/QuizBot.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | import { Message, useChat } from "ai/react"
3 | import { useEffect, useRef, useState } from "react"
4 | import { GetCodeBlock, parseTextToJSX } from "./ParseTextToJSX"
5 | import styles from "./styles.module.scss"
6 | import { CodeBlock, atomOneDark } from "react-code-blocks"
7 | import { useSetupQuiz } from "@/app/utils/store"
8 | import { BotIcon, SendIcon, StopIcon, UserIcon } from "../Icons"
9 | import { IQuestion } from "@/app/interfaces/quiz"
10 | import { StyleCodeEditor } from "@/app/utils/const"
11 |
12 |
13 | interface Props {
14 | quiz: IQuestion
15 | }
16 |
17 | export function QuizBot({ quiz }: Props) {
18 | const { language } = useSetupQuiz()
19 | const { messages, handleSubmit, handleInputChange, input, isLoading, stop } = useChat()
20 | const chatContainerRef = useRef
51 |
52 | {message.role === 'user' ?
67 | ))}
68 |
56 | {parseTextToJSX(message.content)}
57 | {GetCodeBlock(message.content) &&
58 |
66 |