Lección : Proyectos

Si has llegado hasta aquí, es que estas preparado para crear tus primeros Pets Projects, un proyecto que no esta orientado a un cliente real sino a aportarte valor y experiencia. Una excelente forma de demostrar laboralmente tus habilidades como desarrollador. Por ello voy a listarte, ordenado por dificultad, retos que simularán futuros encargos y otros que te forzarán a explorar otras áreas de conocimiento que no cubre el curso.

Un último consejo: “Terminado es mejor que perfecto”

Calculadora de propinas

Usa JavaScript plano.

Indica el precio y el porcentaje de la propina que quieres dar. Los campos serán los siguientes.

Cantidad.
Porcentaje a dar de propina.

Un ejemplo:

Cantidad: 23 euros
Porcentaje a dar de propina: 10%

Resultado: La propina será 2,3 euros (23 / 10), por lo que tendré que dar 25,3 euros (23 + 2,3).

Reloj

Usa JavaScript plano.

Da la hora, fecha y el día de la semana con un diseño agradable.

Carrito de compra

Crea un carrito de compra lo más completo que creas necesario. Algunas características podrían ser:

Añadir productos.
Seleccionar la cantidad.
Calcular precio final.
Contar unidades.
Calcular gastos de envío.
Añadir descuentos.

Puedes ver un ejemplo de carrito ya construido.

Gestor de tareas: To-do

Usa JavaScript plano.

Debes ser capaz de crear un flujo CRUD.

Línea de tiempo

Timeline

Usa un framework, como puede ser VueJS.

A partir de un JSON con los siguiente campos:

Empresa.
Puesto.
Fecha.
Descripción.

Genera una línea de tiempo en HTML.

Trivial

Usa un framework, como puede ser VueJS.

Realiza un juego para realizar preguntas y sumar puntos con cada acierto.

Las preguntas, sus correspondientes respuestas y solución, deben provenir de un JSON.
Incluye un marcador con puntos y tal vez una gráfica.

Pregunta de trivial

Pareja de cartas

Usa un framework, como puede ser VueJS.

Construye un juego para buscar parejas de cartas.

Tiempo de la semana

Usa AJAX y conectate a un API apropiada.

Muestra el tiempo que hará a lo largo de la semana en la zona donde vives.

Blog

Usa AJAX y conectate a un API apropiada. Puedes usar Airtable, Supabase o el API de WordPress.

Crea tu propio blog con características como:

Crear.
Buscar.
Listar.
Paginar.
Dejar un comentario.

Generador de ticket

Usa AJAX y conectate a un API apropiada. Puedes usar Airtable, Supabase o el API de WordPress.

Crea un ticket a patir de la información que esta almacenada en una base de datos.

Sistema de reservas de un hotel

Usa AJAX y conectate a un API apropiada. Puedes usar Airtable, Supabase o el API de WordPress.

Lista una serie de habitaciones con sus correspondientes características.

¿Esta libre?
Número de habitación.
Número de camas.
¿Tiene baño?
¿Cama suplementaria?
Precio

Debe poder reservarse cada habitación por separado, con la limitación de entrar en el mismo día (no se puede reservar en una fecha concreta en el futuro). Para ello incluye un formulario para que el cliente introduzca sus datos y una falsa pasarela de pagos.

Contador Geiger

Crea un contador Geiger, cuyos datos sean aleatorios, con diferentes partes dinámicas.

Número de partículas por segundo.
Gráfica con su histórico.
Sonido característico por cada partícula.
Posibilidad de silenciar.
Controles para aumentar o reducir el número de partículas por segundo.

Contador Geiger

Bingo

Usa WebSockets y conectate a un API apropiada. Puedes usar Supabase.

Genera aleatoriamente un carton con 15 números entre el 1 y el 100 cuando un visitante entre en la web.
Crea un botón que cuando sea pulsado genere un número y sea notificado a todos los usuarios conectados.
Tacha automáticamente los números.

Chat en tiempo real

Usa WebSockets y conectate a un API apropiada. Puedes usar Supabase.

Crea un sencillo chat como puede ser Signal o similares para hablar en salas privadas o grupales.

Pong

Usando la etiqueta canvas, dibuja figuras simples para recrear el juego del Pong.

Mueve arriba y abajo cada una de las palas usando el teclado.
Mueve el circulo.
Determina cuando el circulo esta colisionando o no.
Automatiza el movimiento del circulo para que se desplace hasta que cambie de dirección al colisionar con una pala o límite.
Crea un marcador de puntos. Si llega al límite izquierdo o derecho se sumará un punto al jugador correspondiente.