06_MexFlix

---

Índice

1. Description
2. User Definition & User Stories (UX)
3. Aceptance Criteria
4. Technical Requirements
5. Hacker edition
6. Expected Learning Outcomes

---

1. Description

Application to see a Movie Cathalogue designed for a specific group of users interested in a movie topic or gender.

---

2. User Definition:

User: will be defined for you ---

User Stories:

• The users wants to read a proper selection of movies recommended for their interests

• The user wants to see a nice cathaloge of movies already pre-selected.

• The user wants to be able to search to find more movies by title, gender and actors.

3. Acceptance Criteria

This applications should allow the users to search and find a cathalogue of movies showing at least 5 elements like, poster, title, year, actors and gender and delivery with an URL.

---

4. Technical Requeriments /

• Individual Programming

• Create a new repository from the starting using npm init.

• Install a testing framework.

• Install dependencies with npm install

• Plan and execute Unit Testing

• Run Unit testing with npm test

• Set a .gitignore file to avoid the node_modules to be uploaded in GitHub.

• Create the Release branch (to deliver and deploy) and the Development branch (to work on it daily).

• Make a full responsive website consider at least 2 types of dispositives, cellphone and desktop.

• Follow up Semantic HTML rules, have header, navigation bar, main, sections, asides, footer, etc.

• If required, create an Assets folder.

• Document every Agile SDLC steps on ReadMe.md. During the planning step document a screenshot of your Backlog.

• Use the API of OMDB (The Open Movie Database).

• Use Bootstrap Framework to speed your UI coding.

• Two sprints of 1 week each one, and 2 5m Demos on each Friday by 8:00 am.

• For the last daily plan to have a bilingual speech ready.

The boilerplate should contains a file structure as a starting point like thisas all the sample dependencies and tests configuration:

./
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── app.js
│   ├── data.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── app.spec.js
    ├── headless.js
    └── index.html

Scripts / Files

• README.md: should explain how to download, install and run the application as well as an introduction to the application, its functionality and decisions about design they took.
• src / index.html: this is the entry point to your application. This file it must contain to markup (HTML) and include the necessary CSS and JavaScript.
• src / app.js: here you must implement the web application main functionality to manipulate the data coming from data.js
• src / data.js: here you must get the data from the API and then export it to be used in the app.js module.
• src / index.js: here you must listen to DOM events, like create and add events to the DOM and get the search values to be processed to app.js
• test / app.spec.js: this file contains some sample tests and here you will have to implement the tests.

CLUES:

• API by Wiki
• [API by IBM] (https://www.ibm.com/cloud/learn/api)
• [fetch ()] (https://developers.google.com/web/updates/2015/03/introduction-to-fetch)
• [ promises ] (https://www.w3schools.com/Js/js_promise.asp)
• [ more promises] (https://web.dev/promises/)
• [ JSON ] (http://www.json.org/json-es.html)

Additional Resources

• Find about[Git branching & tools) (https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy)
• Documentación de NPM

These are some tips that can help you in organizing and carrying out your project, taking into account the development of your soft skills:

• To start an organization of your project, see with what resources accounts and the time you have to complete it.
• If there is something that you do not know, ask and try to solve it; you can start with a google search, then consulting your squad and finally your coach. If there is something that I do not know, someone else can help me. Learning is a collaborative process.
• Once you start to move forward ask for feedback, your colleagues may have excellent ideas or ways to solve the project that can help you.
• When you run into a problem, look for alternatives, and for that, consult different sources.
• If you already see yourself investing a lot of time in details, you should know how to prioritize and stick with the most important, projects have limited time and you must know how to manage it.
• Work as a team, ask questions and try to complete the project without giving up.
• Prepare your presentation, if I cannot communicate my ideas to others I do not know You will appreciate all the effort and work you put into it.

---

5. Hacker Edition

---

You are not limited to implementing only the mandatory part. You can add also other nice to have functionalities on this web application, like a authentication login, a favourites list creation using and array and storing for now, in localStoragebrowser object.

---

6. Expected Learning Outcomes

---

• npm init
• API
• fetch() method
• promises in JavaScript 
• JSON
• iterate data
• import & export modules
• HTTP Responses
• My first Unitary Testing
• My fist GitHub Branch Modeling

---

ReadMe

---

This Readme should be replaced with the project documentation following the SDLC procedures for Agile Software Development Lyfe Cycle.