Challenge for Xhockware

My apologies for the inconvenience, today I just read "Notes" in the final part of the project and I see that the estimated time for the project was 6 hours or 1 day of work. The project that I want to present to you was developed in 6 days of work. Before starting the project I studied framework7 and created a template where framework7 is used within a vue-class-component and typescript environment, here I leave the template in case you want to review it: Template framework7-typescript

This framework allows you to reduce the development time in a web app with mobile features and then maybe convert it to an app for android or io with cordova, but I felt a bit limited to develop a slightly more complex design, and differentiated the devices , so I opted to use the following stack.

Stack

The stack that I chose for this project that seems to me so far the most modern, professional and scalable within the vuejs environment is:

Vue.js 3
Vue-class-component
Vue-router
Vuex
Typescript
Sass
Pug
PWA
Jest
Cypress
i18n

I also thought it was a good option to use vue 3 with options-api but vue-class-component is much more friendly with typescript. Due to time issues, I could not separate the store into modules, so the project is centralized in a single main store :(.

Design

To develop this project I chose a professional design of a news app, as you can see:

If you want to see the design with greater precision I also leave you the link of this Go to design figma

I have added some modifications to the design such as animations and a responsive design for tablets and pc since the original design is only for cell phones, finally the design in the 3 devices as follows.

Project

CSS

I used the web design pattern Layout shifter for responsive design, i choose this pattern because its more adaptable for complex responsive designs.

In addition to using css within each component and there is a main file with the main project variables related to the design.

Vue

As I mentioned use vue-class-component because it is more typescript friendly and allows to implement some complex js features inside vue more easily.

I also forgot to mention that the app has support for multiple languages with the i18n library.

PWA

In addition, the project was developed as a pwa so you can see the main features of the project offline, I did not have time to take the API data to firestore to make them persistent, so for the moment it loads the main features of the project but not the data .

Unit testing

The unit tests were carried out with jest and typescript, in total there were 10 test suites and 42 unit tests, you cannot completely test the entire application but test the main components, among the different tests there are tests on:

Asynchronous test for newsService
Components in Vue
Router or $router.push
Vuex (state, getters, mutations, actions)
Test in i18n

As you can see all the tests pass satisfactorily:

npm run test:unit

In addition, by convention, the structure of the main project was followed for the structure of the tests.

E2E testing

Finally, I performed 4 integration tests with cypress to evaluate the correct functioning of the project, these tests perform:

Test the change of category of the project and the result of this.
Test the search for a word in the project search engine and enter a news item.
Test bookmark a news item and then unmark it.
Test the change of language of the project to portuguese.

As you can see all the tests pass satisfactorily:

npx cypress run

And finally our in order how the videos of the integration tests performed by cypress were written.

category-change.js.mp4

search-news.js.mp4

favorite-news.js.mp4

change-language.js.mp4

Run the Project

Local

To see the local operation of the project it is only necessary to run the project with:

npm run serve

But in the conexion to the api is very recommended connect with my backend,my backend is the original backend but added with id for the news and defining a category per news.

It is very important to use this backend for testing and for the correct functioning of the application.

Go to my Backend

Production

Also add a static content server to the backend to be able to serve the application, so to test the behavior of the application in production we only have to execute the command:

node start

With this automatically the application is served in production mode on localhost:8000

Extra

I would have also liked to add modules as I mentioned in addition to vuex-persistence-data.

Finally this application meets the standards to become cross-platform and desktop thanks to cordova. Probably tomorrow or the day after tomorrow I will upload in this repository the apk of the Android application and the .exe installer of the Windows desktop application.

Also in the next few days it is likely that I will upload the application and the api server to my personal server to be able to observe the perfect behavior of the application in production mode.

Questions

Please if you have any questions about the project, I will gladly answer you, just write to me at luisangel2895@gmail.com or wasap +51957888660.

And finally, thank you very much for letting me be part of your selection process, I hope you like the project :).

luisangel2895 / xhockware-frontend