serudda/waysily-client

This is a real-world project: http://www.waysily.com (AngularJS + Typescript)

Waysily Client project

This project is the base code of: http://www.waysily.com, a platform to join students with language teachers and language school. Feel free to use the code and the information from this project, if you have any question you could write us on Twitter: @seruda or @rosa7082

Tools used

• Angular 1.5.8
• Typescript
• Sass
• Gulp

Install and run

1. npm install
2. bower install
3. gulp build-vendor
4. gulp dev

If you have any problem to run this project, feel free to ping us!

P.S. You can find the server-side of this project here:

https://github.com/sruda/waysily-server

It's based on: Django Rest Framework and REST API.

waysily-client's Issues

Crear validaciones de campos en: teacherInfoSection

Analizar la mejor manera(poco codigo, rapido, mantenible) de validar cada uno de los campos en el formulario.
Este sistema deberia poderse expandir a los demás modulos y funcionar de maravilla.

Hacer una lista de todas las escuelas de Español en Medellin

Hacer una lista de todas las escuelas de Español en Medellin,
Tomando los valores o criterios más importantes para los estudiantes

buscar numeros estadisticos más relevantes para colocar en teachers.waysily.com

En teachers.waysily.com va a haber una seccion que muestre con numeros a los profesores como esta la situacion actual al enseñar un idioma: cantidad de personas que viajan a un pais para aprender un idioma, cantidad de dinero que mueve el enseñar un lenguaje, etc.

Conseguir los valores más relevantes, y plasmarlos en la pagina

Crear Nueva Landing Page Principal

• Hacer los mockups de esta section
• Crear la estructura base del lado del FE (html, styles, config, controller, service).

Investigar subir imagenes de perfil a Amazon S3

Investigar como subir imagenes desde Angular hasta un servidor de imagines como Amazon S3.
No tiene que pasar por Python, leyendo me di cuenta que hay plugins como:
http://angular-file-upload.appspot.com/
https://github.com/flowjs/ng-flow
Que redimensionan la imagen, y la suben inmediatamente al servidor S3.

Estudiar cual es mejor: TypeForm o Google Doc Form

Investigar cual es mejor para nosotros: Google Doc Form o TypeForm, con el fin de poder cumplir todos los campos requeridos: subir foto, Pais, MultiChoice, conexión con la BD, etc.

Crear el paso: teacherPriceSection en createTeacherPage

• Hacer los mockups de esta section
• Crear la estructura base del lado del FE (html, styles, config, controller, service)
• Crear el modelo del lado FE
• Crear el modelo de datos del lado BE
• Crear los metodos create y update del lado del BE

Activar y desactivar el header y footer dependiendo la pagina

Buscar la forma de activar y desactivar el header y footer dependiendo la pagina, hay paginas que deberian tener footer y otras no.

Desmembrar el blog: http://medellinliving.com/author/jssr18/

• Analizar todas los post que se hagan sobre Medellin, Español, Colombia, etc. Tomar fragmentos de textos que podamos pegar en nuestra landing page (OJO: Despues de recopilar la info, no podemos copiar y pegar, ya que si nos ponemos en contacto con el bloguero, se va a dar cuenta de inmediato, y va a ser un caos).
• Mirar todos los comentarios, no informacion de contacto (email, celular, etc) de estudiantes, viajeros, profesore, blogueros o escuelas. Crear un Excel con varias pestañas: Estudiantes, Profesores, Escuelas, guardar datos relevantes: Nombre, pais de origen, actividad, celular, email, etc.
• Guardar links de los post del blog, para poder compartirlos de a pocos en la redes de Waysily.
• Estudiar como funciona https://buffer.com/ para gestionar todas las redes de Waysily.

Buscar imagenes para la nueva Landing Page

Buscar imagenes grandes (1600x1200) con alta resolución sobre:
Profesores, Reuniones, Lugares, Escuelas, etc

Crear el paso: teacherFinishSection en createTeacherPage

• Hacer los mockups de esta section
• Crear la estructura base del lado del FE (html, styles, config, controller, service)
• Crear el modelo del lado FE
• Crear el modelo de datos del lado BE
• Crear los metodos create y update del lado del BE

Modificacion+Add Inmersiones

Revisar paso 6 ya que hay una caja de texto que indica escribir algo, pero este no debería estar ahí ya que en esta opción es solo para agregar “+Add”. El usuario profesor se confunde.

Para este caso sugiero hacer lo mismo que hacemos en el paso 3. Que desaparezca el agregar.

Validar que todos los campos tengan un min y un max de caracteres

El error ocurre cuando estas agregando una educacion al profesor, y en el "campo de estudio" escribes mas de 50 caracteres. El deja escribir, y cuando le da enviar, lo que hace es dar el error generico de BackEnd.

Hay que estudiar la mejor manera para los usuarios, y aplicarlos a todos los campos de texto.

Revisar todas las pantallas en Safari y Firefox

• Validar todas las pantallas en Safari
• Validar todas las pantallas en Firefox

Crear teacherProfile Page

• Hacer los mockups de la pagina del perfil del profesor
• Maquetar la pagina basados en los mockups
• Crear la estructura base de la pagina (html, styles, config, controller)
• Conectar los datos del profesor con su perfil.
• Crear el boton "Reservar Clases", donde conecta con un google doc form.

Analizando la mejor estrategia para el landing page 2

Estamos analizando la mejor versión del landing page 2:

• Crear mockups
• Analizar como vamos a llegar a los early adopters
• Obtener de la mejor forma los datos de los profesores, y escuelas.
• Analizar el proceso más rapido, si encontramos un camino corto, podemos empezar lanzando en dos paises o ciudades : Medellin y otro.

Crear validaciones de campos en: teacherLanguageSection

Agregar las respectivas validaciones a 'teacherLanguageSection'

Validar Reproducción video Android

Validar Posible mejora:

Reproducción del video de las calificaciones para dispositivos Android ya que en la actualidad se muestra como una imagen la calificación.

Validar y dar tu version de los textos en Landing Page de profesores y la principal

Revisar la pagina: landing Page Principal:
http://waysily-client-dev.herokuapp.com/#/page/main

y revisar la pagina: lading Page Profesores:
http://waysily-client-dev.herokuapp.com/#/page/main/teacher

Revisar todos los textos, y si algo no te gusta, dar tu version de estos en un documento aparte.

Crear el formulario para tomar los datos más relevantes del estudiante

Despues de haber decidido si trabajar con google doc form o typeform, lo siguiente es crear el cuestionario de preguntas, que nos ayuden a a contactar al profesor y pasarle los datos mas relevantes, para que nosotros seamos los intermediarios en el proceso de conexión.

Por ahora los campos serian: nombre completo (Nombre, Apellido), Es local o viajero, cuando es o fue su fecha de viaje, cuando desearia tomar las clases, que dias y que horario le convendrian más, que tipo de clase desea: Grupal o Privada.

Y si conoce a un profesor (de esa ciudad o de otra ciudad) que desearia recomendar para que haga parte de Waysily.

BACK pagina y navegador

• Validación de la opción de back en la página ya no permite en este momento. Debería dejar retroceder al paso anterior aun cuando no se haya completado la información requerida en esa parte del formulario.

• Validar el back de navegador ya que en el momento borra la información anteriormente digitada.

Create EditTeacherPage (html, controller, service, config, styles)

Es necesario crear el formulario donde se van a cargar los datos del profesor, con el fin de tener una sección desde ya, para poder ir guardando datos de personas reales, por lo menos mientras estoy trabajando en como se verian los profesores, poder captar información de los profesores que ya conocemos, o de estudiantes que quieran invitar algún profesor a la plataforma.

Hacer una versión inicial muy lite, (sin subir certificados, sin subir estudios, etc) esto lo iremos validando con los profesores que llenen el formulario, les preguntaremos que campos sobran y que campos faltan, asi vamos organizando bien el formulario.

Las tareas serian:

• Crear el sketch (el proceso de como se va a acceder a esta pantalla, que pasa cuando el usuario guarda y se va, enviarles recordatorios que aún falta información por completar, comentarles al finalizar que el perfil entrara en validación).
• Crear los mockups: Hacer algo muy parecido a el proceso de Airbnb al momento de crear un anuncio, sabemos que son muchos campos, pero ellos dividen el proceso en secciones, asi es más facil para el profesor llenar el formulario completo.
• Crear la estructura de la pagina en el FE (html, controller, service, config, styles).

Blanquerar Formulario

• La información después de creado el perfil debería blanquearse en el formulario, ejemplo
  cada vez que yo entre me dé la opción de ver mi perfil o de crear uno distinto. (Actualmente queda cargada la última información guardada).

Cambiar las imagenes del paso a paso, que tengan consistencia

Las imagenes del paso a paso deberian tener una secuencia y una conexión. Cambiar las imagenes para que cada una representen en verdad un paso a paso.

Crear el paso: teacherMethodSection en createTeacherPage

• Hacer los mockups de esta section
• Crear la estructura base del lado del FE (html, styles, config, controller, service)
• Crear el modelo del lado FE
• Crear el modelo de datos del lado BE
• Crear los metodos create y update del lado del BE

Mejorar el footer de Waysily

Podriamos hacer una version mucho más avanzada del footer: igual a:
https://nomadprojects.io/ o https://www.airbnb.com/

Agregar una seccion donde muestre el logo de Waysily, con una breve descripcion de que es Waysily. Una seccion con varios link a varias partes de Waysily, un formulario para unirse a nuestro newsletter, y una sección de Social Media.

Escribir a nuestros contactos para validar cuales son los criterios más importantes a la hora de buscar una escuela

Enviar un whatsapp, email o chat a nuestros contactos (incluyendo a las personas que estan pendientes de nosotros) para preguntarles que factores creen que son los más importantes a la hora de buscar una escuela de español en otro pais.

Crear los contenedores de profesores en el mapa del searchPage

• Hacer el mockup de los contenedores de los resultados que arroja el mapa en el searchPage
• Hacer la maquetación de los contenedores (html y estilos)
• Conectar los contenedores con los datos traidos de la base de datos
• Crear los filtros por zonas en el mapa de Waysily (Si estoy en Envigado, en una zona especial, solo deberia traerme los profesores de esa zona, no todos los profesores (Esto puede ser como mejora futura, no es necesario hacerlo ahora ya que no vamos a tener muchos profesores. Por ahora podemos traernos todos los profesores de la base y dibujarlos, asi se vera más lleno el mapa

Create DEV environment in order to Test each new functionality

IMPORTANTE: Cuadro flotante - Barra fija de arriba - estrellas - valor fijo.

• Validar que los cuadros de ayuda sea flotante.
• Validar cuadro con el valor de la clase sea flotante.
• Validar que la barra superior (Unirse) sea fija.
• Quitar el campo de buscar y la foto ya que en esta version eso no va.
• Valores fijos como (70 successful classes y estrellas (Recomendaciones) deben desaparecer. ya que en el momento están por defecto.

Buscar estadisticas relevantes para el landing de profesores

• Cuantos estudiantes en promedio viajan cada año para aprender un idioma? (Dependiendo la zona, Sur America, Norte America) Información actualizada, de una pagina confiable para poderla linkear en nuestra landing Page de profesores.
• Cuanto gana en promedio un profesor privado (que se enfatise en estudiantes extranjeros) al mes.

Investigar más que son los pipeline en Heroku

Investigar más este tema, ya que habla de los buildpack, y script que se corren antes y despues del deploy.
Esto con el fin de solucionar las demoradas subidas al server

Solucionar el problema de estilos en Safari - landing page

Type: Major

Cuando abrimos el landing page en Safari, la explicacion de cada paso se rompe, y los textos se ubican debajo de la imagen.

Navegador: Safari

Crear un nuevo componente: toolstips

• Investigar un tooltip en angular, facil de usar, mantener y personalizar.
• Incluir ese componente en Waysily
• Crear varios tipos de tooltips: primary (fondo blanco, letras verdes), alert (fondo blanco, letras rojas), negro.

Crear Welcome Section Page en la pagina de crear profesor

• Hacer los mockups de esta section.
• Redactar los textos en español.
• Crear la estructura base del lado del FE (html, styles, config, controller, service).
• Traducir los textos a Inglés.

Crear un sistema de notificaciones para mostrar al usuarios algun error con el server

Crear Landing Page v2 - FrontEnd

• Diseñar mockups: Pagina captación de profesores y pagina principal de Waysily.
• Crear un nuevo repositorio, y una nueva app en heroku.
• Estudiar la forma de minificar y uglificar el codigo para hacero más optimo y rapido el sitio.
• Diseñar html y css (Uno de los dos sitios).
• Desarrollar el FE de cada modulo (config, controller, html, sass).

Se ve unos bordes negros en el video del landing page

type: Minor

Ya que tengo el dock de la MAC abierto, me quita espacio en la parte inferior, y por ende se redimensiona el video.

Navegador: Chrome

Asignación permisos base escuelas

Sergio debe asignarme una pagina para llenar información de escuelas.

Error al cambiar de lenguaje en el landing page

Cuando le doy click al boton superior derecho del landing page (cambiar idioma) algunas veces se presenta un cuadro color blanco.
Es esporadico, y duraunos 3 segundos.

---

Se visualiza en: Moto Play, Chrome, Mozilla, Safari

Crear el paso: teacherEducationSection en createTeacherPage

• Hacer los mockups de esta section
• Crear la estructura base del lado del FE (html, styles, config, controller, service)
• Crear el modelo del lado FE
• Crear modal para cuando el usuario quiere agregar un nuevo certificado o estudio.
• Crear el modelo de datos del lado BE
• Crear los metodos create y update del lado del BE

Crear Landing Page v2

Crear la versión 2 del landing page, con las siguientes pantallas (ver adjunto):

1. Seccion Hero con la imagen y con el formulario de registrarse (nombre, email).
2. Agregar mapa de google con informacion de mentira (Rosa deberia ayudarme a agregar informacion de profesores, escuelas y personas cercanas, para un intercambio cultural y de idiomas, puntos de encuentro). con los filtros respectivos.
3. Agregar un video donde muestre como funciona la plataforma (desde el momento en que buscas un usuario en el mapa, ves el perfil de un usuario, le envias invitación, etc).
4. Footer con el contactenos.

Hacer que los textos en el paso 1: teacherInfoSection sean dinamicos

Pensar en donde ubicariamos el boton de cambiar el idioma, y hacer que todos los textos en 'teacherInfoSection' sean dinamicos (colocar opciones en español e ingles, despues se corrigen)

Crear el paso: teacherExperienceSection en createTeacherPage

• Hacer los mockups de esta section
• Crear la estructura base del lado del FE (html, styles, config, controller, service)
• Crear el modelo del lado FE
• Crear modal para cuando el usuario quiere agregar una nueva experiencia.
• Crear el modelo de datos del lado BE
• Crear los metodos create y update del lado del BE

Crear Nueva Landing de Profesores

• Hacer los mockups de esta section.
• Redactar los textos en español.
• Crear la estructura base del lado del FE (html, styles, config, controller, service).
• Traducir los textos a Inglés.

Texto Landing Page

• Descripción del Slogan:
  (Probemos haciendo un salto de pagina después del punto, ya que creo que la idea cambia después del punto)
  Cuando aprendes un idioma con gente de verdad, aprendes más que un idioma.
  Estarás expuesto a una cultura diferente y verás el mundo de otra forma.

• Busca personas locales
  Solo tienes que indicar en la barra de búsqueda tu destino o lugar donde te hospedas y podrás descubrir lugareños con los que puedes encontrarte para aprender su idioma sumergiéndote en su cultura.

• Elige una persona
  Conoce amigos locales con pasatiempos e intereses similares y practica el idioma.

• Se el primero en sumarle una nueva experiencia a tu viaje.

Create_Map_of_Teachers_and_Schools

• Crear el mockup de como se veria cada cuadro en los resultados mostrados del mapa (profesores, y escuelas).
• Diseñar el html de cada cuadro de información: Profesor y Escuela. (responsive).
• Crear cada cuadro de información como un componente reusable (sass).
• Crear datos Fake en el 'server Fake' para poder crear la conexión con el BE.
• Crear el modelo de datos en BE real (apuntar a DEV DB).
• Migrar a Heroku y ver como se comportaria en el Server.

Información Basica

Validar error del paso 1 información Básica ya que no permite almacenar correos que contienen puntos, rayas, etc.

Crear validaciones de campos en: teacherLocationSection

Agregar las respectivas validaciones a 'teacherLocationSection'

Solucionar el problema Video en Safari - landing page

Type: Major

Cuando abrimos el landing page en Safari, El video se redimensiona dejando espacios de pantalla negra en todos los lados.
Adjunto pantalla.

Navegador: Safari