Batches documentation & index

Academy Batches

View the Project on GitHub empathyco/academy-batches

Frontend Path - Winter 2023

Content Table

Week 1

First week on the Frontend path of the Academy program at Empathy.co was focused on HTML, CSS & JS. We received several classes regarding these topics, as well as some more in depth ones, like responsive CSS or JSDOM. The following were the people in charge of delivering said classes.

Path Owner Content Deliverers
Beltrán García Pedro Ondiviela
  Antonio Cuenca
  Guillermo Cancheda


Key learning points

  1. Basic HTML & CSS.
  2. Responsive Design
  3. JavaScript & Basic TypeScript
  4. JSDOM & DevTool

Rick&Morty JavaScript

Week one was a warmup for what it is to come. We came back to basics going over HTML, CSS & JS properties and main functionalities. The idea behind these classes was mostly to learn about useful CSS properties like Grid or Flex. The task to be done was a Web Browser that would make calls to a Rick&Morty API, displaying its characters in a responsive fashion.

Week 1 Screenshot

These are some examples made by the Academy Fellows:

Week 2

In the second week the Frontend path of the Academy program at Empathy.co was learning how to use vue. For this we received a class about the basics of it. After that we were given a practical exercise with the objective of reinforcing the contents seen in the aforementioned class. The following were the people in charge of delivering said class.

Path Owner Content Deliverers
Beltrán García Alonso Garcia


Key learning points

  1. Learn how to use vue components
  2. Learn the use of vue instructions such as v-for, v-bind
  3. Learn the communication between components
  4. Become familiar with the use of slots

Rick&Morty Vue

Continuing with the work done in week 1 we had to move it to transform the HTML, CSS and Javascript project into a Vue project.

Week 2 Screenshot

These are some examples made by the Academy Fellows:

Week 3

In the third week we learned how to create a store using Vuex library to manage every state existing in the application. This includes changing our repository logic into a more compact one and adding getters, mutations and actions to complete the state’s managing mentioned before.

Path Owner Content Deliverers
Beltrán García Manuel Navarro

Key learning points

  1. Learn how the Vuex framework works
  2. Define states for the application
  3. Implement getters and mutation in order to correctly apply good coding practices
  4. Change every module’s logic to make them access to the states in the store

Rick&Morty Vuex

Continuing with the work done in week 2 we had to add the Vuex library to simplify our code.

Week 3 Screenshot

You can see their work here:

Week 4

In the fourth week we learned about TypeScrip to implement types to JavaScript.We received a class about basic and some stuff advantage TypeScript.After that we were given some exercises with the objetive of reinforcing the contents and The Path Owner recommended us to tried to apply TypeScript in our Vuex Project

Path Owner Content Deliverers
Beltrán García Manuel Navarro

Key learning points

  1. What is TypeScript?
  2. How to adding ts into existing project
  3. Learn about basic types
  4. Learn about Interfaces
  5. Advance types (any, generic, union, intersection)

Rick&Morty TypeScript

Continuing with the work done in week 3 we had to add TypeScript for add type in our code.

Week 4 Screenshot

Some examples from our Academy Fellows:

Week 5

In the fifth week we already had practice with TypeScript and, waiting to have another front session, we started our IMDb front-back project. In addition, we received information about how to apply TypeScript in our Rick&Morty project and, therefore, in the IMDb project as well

Path Owner Content Deliverers
Beltrán García Manuel Navarro

Key learning points

  1. Applying TypeScript to a larger project
  2. Starting your own project from scratch

IMDb project

Based on what we learned with the different Rick&Morty practice projects, we started our own project

Week 5 Screenshot

Some examples from our Academy Fellows:

Week 6

In the sixth week, we keep developing our IMDb front-back project, which we started to develop the week before. Also, we had a session where we learn how to implement unit tests in a Vue project using the test runner vitest, this tool will help us to test Vue components in our Vue projects.

Path Owner Content Deliverers
Beltrán García Manuel Navarro

Key learning points

  1. Applying TypeScript to a larger project
  2. How to test a Vue project
  3. Learn about unit testing
  4. How to test Vue components
  5. How to use vitest for testing Vue components

IMDb project

Continuing with the work started in week 5, we keep improving our IMDB projects.

Week 6 Screenshot

Some examples from our Academy Fellows:

Week 7

During the seventh week of the Academy Program, the frontend fellows kept adding new features to the IMDb project. There wasn’t any new lessons given this week so we were able to dedicate full time to the project.

Some of the fellows received the APIs from the backend path whilst the rest tried to integrate other APIs such as TMDB or previous patches ones into their projects.

Those who had extra time made a first approach to try and implement testing into their projects.

Path Owner Content Deliverers
Beltrán García  

Key learning points

  1. Code organization on larger projects
  2. Creation of new features
  3. Importance of user experience inside a webpage

IMDb project

Most of the projects were now almost fully developed and ready to integrate the APIs

Week 7 Screenshot

Some examples from our Academy Fellows:

Week 8

During the eighth week of the Academy Program, the frontend fellows successfully completed all tasks related to the IMDb project and began consuming their backend partners’ API. On Thursday, all academies presented their applications to the rest of the program, showcasing the progress they had made on their respective projects. This was a valuable opportunity for everyone to learn from each other’s experiences and gather feedback to improve their work further.

Path Owner Content Deliverers
Beltrán García  

Key learning points

  1. Learn from other experiences
  2. Cooperation with backend
  3. In the real world, databases are not perfect, and one must know how to adapt

IMDb project

Most of the projects were almost fully developed, and some of them had already integrated with the APIs, while others were still awaiting progress from the backend teams.

Week 8 Screenshot

Some examples from our Academy Fellows:

Week 9

By week 9 of our Academy path, each member of the group is assigned one project from the four existing ones in the second phase. The four porjects to achieve are known as play-experience, retail-trust-index, My-Motive-Search and Playboard-Restyling

Play-Experiences

It consists of creating a new feature within the playboard that allows modifying the styles of the page of the customer who uses it without having to contact Empathy support. Within the feature, the client has access to four separate panels depending on the aspect they want to modify (general: logo, colors, font, searcher, product card and layout).

Retail-Trust-Index

An application whose main objective is to create a ranking that gives a score of a page’s “trustworthiness”, which is a project within the sector of another large project called Open Innovation.

It is a web application called My Motive Search where you can search through all the client stores of Motive.

My motive search prototype

Playboard-Restyling

It a part of the main proyect of Playboard-Restyling where here we will adapt the playboard page to make it modern and adapted to the new times of UI.

Old playboard interface New playboard prototype with all the changes
Path Owner Content Deliverers
Beltrán García  

Key learning points

  1. Learn to work on bigger teams
  2. Get prototypes quick
  3. How to adapt to huge product and how to work on it.

The projects fellows are working on :

Week 10

Week 10 of the 2023 Winter Batch was the starting point of the new projects. This week was mainly focused on data and information gathering from different stakeholders in order to properly kick off the new tasks. Jira Boards were created for each team to create and refine the tasks to be performed.

Play-Experiences

The Play Experience team contacted both X and Play teams in order to learn about the design guides of each team. They also contacted Mario Ortas from Motive to learn about how they implemented this functionality in their project. Las but not least, they spent the remaining time analyzing repositories and learning the new technologies to use.

Retail-Trust-Index

My-Motive-Search

Playboard-Restyling

Two tasks were assigned to the playboard restyling fellows this week. Miguel Juncal was tasked with updating the text styles found in the app, while LuisMi Alonso was focused on updating the buttons in the application in order to unify its style throughout the whole project. Both tasks were significantly delayed due to design concerns.

Week 11

Week 11 of the 2023 Winter Batch was the ending point of the first sprint of the project. This week was mainly focused on developing the different projects

Play-Experiences

The Play Experiences team created a new section in the playboard and was able to add all the panels and required functionalities for the style’s modifications

Retail-Trust-Index

My-Motive-Search

The Motive search team created a first prototype following the Leticia’s design

Playboard-Restyling

Two tasks were assigned to the playboard restyling fellows this week. Miguel Juncal was tasked with updating the text styles found in the app, while LuisMi Alonso was focused on updating the buttons in the application in order to unify its style throughout the whole project. Both tasks were significantly delayed due to design concerns.

The teams

|Play Experience|Retail Trust Index|My Motive Search|Playboard Restyling| |—————|——————|—————-|——————-| |Andreu Montagut|Pablo Benítez|Mario Rey|Miguel Juncal| |Hugo García|Alberto Monedero|Raúl Arca|LuisMi Alonso|

Week 12

[ToDo]

Play-Experiences

[ToDo]

Retail-Trust-Index

About the RTI Project, our goals and project have undergone significant changes. We are now focusing on the development of the Lookup table, which is a crucial component within RTI. The Lookup table will contain information about cookies that will be compared with the Cookie Analyzer from the OpenPrivacy Team. Our new goals include populating the Lookup Table and creating an intuitive interface that allows users to perform basic operations such as creating, modifying, or deleting entries .

My-Motive-Search

[ToDo]

Playboard-Restyling

[ToDo]

The teams

|Play Experience|Retail Trust Index|My Motive Search|Playboard Restyling| |—————|——————|—————-|——————-| |Andreu Montagut|Pablo Benítez|Mario Rey|Miguel Juncal| |Hugo García|Alberto Monedero|Raúl Arca|LuisMi Alonso|

Week 13

Week 13 of the 2023 Winter Batch was the ending point of the second sprint of the project. This week was mainly focused on developing the different projects to present the outcomes of the sprint in the Sprint Review. This week also started the third sprint and each team have done a Sprint Retrospective of the second sprint and Sprint Planning of the third sprint.

Play-Experiences

This team was able to add a Live Preview in which the Shop Manager can see the visual customisation changes that are done in the Playboard, applied on their pages and shown on it at the moment.

Retail-Trust-Index

This team have changed the scope of the project and the name of this, now the name of the project is Lookup Table. They defined how is going to be the UX of the Lookup Table design.

My-Motive-Search

The frontend fellows of this team have finished a prototype following the designs made by Leticia Amores.

Playboard-Restyling

[ToDo]

The teams

|Play Experience|Retail Trust Index|My Motive Search|Playboard Restyling| |—————|——————|—————-|——————-| |Andreu Montagut|Pablo Benítez|Mario Rey|Miguel Juncal| |Hugo García|Alberto Monedero|Raúl Arca|LuisMi Alonso|

Week 14

During the fourteenth week of the Academy Program, the fellows continued working on their projects. The entire week was dedicated to progressing in the third sprint.

Play-Experiences

Andreu and Hugo developed two different methods that allowed the shop manager to switch between the device type shown in the Live Preview. First method consisted in a button selector component that switched between views whilst the other was a sliding bar that allowed shop managers to change the width of the preview freely.

Retail-Trust-Index

Lookup Table was renamed again to MarTech Atlas. The main goal for the frontend team was to add animations add the posibility to add new entries and create form validations.

My-Motive-Search

The main focus for this third sprint was to create animations, refine the styles, and connect with backend to fetch categories and display results. It was also added a new column for product display.

Playboard-Restyling

[ToDo]

The teams

|Play Experience|Retail Trust Index|My Motive Search|Playboard Restyling| |—————|——————|—————-|——————-| |Andreu Montagut|Pablo Benítez|Mario Rey|Miguel Juncal| |Hugo García|Alberto Monedero|Raúl Arca|LuisMi Alonso|

Week 15

During this week of the Academy Program, the fellows continued working on their projects, completing the third sprint and conducting the sprint review. In this review, the different teams presented their progress as follows:

Play-Experiences

This team worked to allow shop managers to change the device shown in the live preview.

Retail-Trust-Index

This team implemented the lookup table app including CRUD, filters, animations and validations. Also they developed a module to interact with OCD.

My-Motive-Search

This team focused on improving search time, search by categories and improving categories interface.

Playboard-Restyling

[ToDo]

The teams

|Play Experience|Retail Trust Index|My Motive Search|Playboard Restyling| |—————|——————|—————-|——————-| |Andreu Montagut|Pablo Benítez|Mario Rey|Miguel Juncal| |Hugo García|Alberto Monedero|Raúl Arca|LuisMi Alonso|