search

muksitur / push-pop

0 stars 0 forks source link

Documentation for the challenge #1

Open muksitur opened 3 years ago

muksitur commented 3 years ago

Let us take a look at the challenge and see if we finished all the points one by one. I have tried to finish all the points/tasks from version 1 & 2 (frontend & api both). I will give screenshots for each point. Feel free to git-pull the project, then run npm install, then start the service by running npm run serve, and then play for yourself. You might need to build the project (by running npm run build) once, to init the environment file (.env). If you change the environment file later, you need to build the project again to make new changes in the environment file effective.

The .env file has a JSON file defined. I wanted to make sure that there is no hardcoded elements. So I used the errorList.json file. List of Errors, Messages and Operators are defined in the JSON file. Now let's take a look at the frontend.

This is the overview of the app image

This is how it looks when we expand the three sections (Resolved, Unresolved and Backlog). Each section has the code and text visible for each error. Individual buttons for individual errors to commit actions such as Resolve and Unresolve are available as required. image page break, so another screenshot. image

All the actions are able to undo and confirm both. image

If you play with it, you will see that each action button, operator button and message button in the notification sidebar has the click and hover animation/effect available. And you will see the shadow effect with the notification sidebar. image This is how the whole app looks with the notification sidebar. image A notification message may or may not be sent from the backend each 3 seconds. That 3 second was hardcoded.

This is the mobile layout. image and image and image and image and image

Luckily I had a finished sidebar element from a previous project. So this helped speeding up a lot. Also each message in the notification sidebar has the option to select Mark As Read. With this option the message will disappear. image

As mentioned before all the actions are able to undo. Also after undo the element remains in the same position.

Now we talk a little about the backend api. I chose to create a store.js file to handle the backend. This file uses VUEX to manage the local storage. The local storage idea is based on the MVVM (Model View view-model) software design pattern. We could use a logging framework such as VueJS Logger to make it more complex but I chose the console log instead.

A logging functionality is available for individual operator request count and total request count. image

This is the get_list_intersection_counts and how many times a certain error.code was resolved. image

Finally, it felt like a 3-4 weeks job/task, if someone wants to finish this properly. But I had to rush and finish it during the Easter Holidays because I already have a full-time job. I looked at the problem definition during last weekend. So I could do the planning in between. Yet I had to hurry and finish it by now and some of my own-ready-to-use-elements like Sidebar helped speeding up the process. If you ask my opinion about further development (Weiter Entwicklung), I would recommend to start refactoring the project. The App.vue could be broken down into at least 3-4 components. This will make the code more clean and increase its re-usability for future. Feel free to let me know if I missed some points.

muksitur commented 3 years ago

Also a cool addition is the sidestream logo as the favicon. image

muksitur commented 3 years ago

If you have Node.js and npm installed in a machine https://phoenixnap.com/kb/install-node-js-npm-on-windows (you can follow this link to install Node.js and npm), then clone my project/solution, open a terminal/command line, change directory to the project folder (more simple way is to open a terminal inside the project folder). Now

  1. run npm install to install all the node modules
  2. run npm run build to activate all environment variables inside .env file
  3. run npm run serve to start the app in your localhost:8080(port number)
muksitur commented 3 years ago

Further Development (Weiter Entwicklung)

I believe the task requirements were met, and it would be helpful to the users (Operators and their Managers). But I would like to make some critical suggestions regarding the development of the project/application. These should take couple months to plan an architecture and implement but it should be very useful in future works in this same project or even in different projects. So please consider these suggestions carefully.

1. Refactoring the App.vue:

Right now this project is very small, so maybe this is OK for now. But in future when you will be needing to scale up this project, or reuse some part of this project in another project, it will be very hard. So the App.vue should be broken into few components. For example: Resolved.vue, Unresolved.vue, Backlog.vue, etc.

2. Backend and Frontend should be in different app/service:

Now this is only a coding challenge, so now the backend (store.js) and frontend (App.vue) can be in the same machine (localhost) and even in the same application. But in real project the backend server and web server might need to be separated. And there must be a communication between both the services. This communication might be implemented via web-socket, or via API. First start with building the services in the same machine and establish a communication. A Fullstack developer should be able to handle this. Then you can put them on different machines in the same network. This should also involve a DevOps specialist, I lack my expertise there.

3. Make the frontend app dynamic:

This might sound like a little far-fetched idea. But this will be very useful in terms of scaling up the project and reusing bits of this project in other projects. For example consider this element in the picture image

Now you should construct a JSON or YAML file that will have the structure of this view defined. After reading the structure, the app will create something like in the picture. And the structure definition should look like this in JSON. { "element":{ "type":"CollapsibleList", "columns":["Code","Error"], "content":{ "item":"forEach", "datapoint":"resolved", "rowContent":[ {"element":"Code", "position":1}, {"element":"Error", "position":2, "label":"resolved.text"}, {"element":"ActionButton", "position":2, "text":"Unresolve"} ] } } } Now remember this is a very complex idea to implement, which needs a lot of planning and time (hopefully several months). So you should think how often you would use/reuse this solution/part of solution, or how much you want to scale up this solution/project.

Finally, feel free to let me know about your thoughts on these ideas. PS: We all know a project never ends if you keep working on it. So there could be more new ideas. But it is important to know your thoughts on them.