Okteto Frontend Exercise

okteto-frontend-exercise.md

Okteto Frontend Offline Exercise

Thank you for your interest in joining our team!

As part of our process we propose this exercise, to be completed in a week. While you are working on it, don’t hesitate to contact Ramon Lamana via e-mail (ramon@okteto.com) if you have any questions or suggestions about the exercise.

We have prepared an application with a basic structure to help you get going. You can clone the repository privately (https://github.com/okteto/filemanager) and share your code with us via Github.

Scenario

As a proof of concept you and your team have been tasked with the development of a simple File Manager web application for a remote file system. The infra team has provided you the necessary structure to run the application on Kubernetes and your colleagues have finished the API implementation. In order to collaborate with them and easily replicate the entire application for development, your team uses a remote Kubernetes namespace in Okteto Cloud.

The frontend service is based on babel-transpiled ECMAScript 2015+ code, CSS modules, React, and Redux. All the necessary configuration is set and ready, providing you:

• A Redux store.
• A basic layout and the initial React components.
• Webpack bundler and dev server.

Development

The exercise consists of three parts:

1. Deploy the application in a namespace in Okteto Cloud (https://cloud.okteto.com). Install the Okteto CLI and activate your development container against the remote frontend service to start working. You can follow this guide to get familiar with Okteto CLI and Okteto Cloud if you need it: https://okteto.com/docs/getting-started. If you follow the steps, you should end up launching the okteto up command and using the provided remote console to develop the application.

   ℹ Don’t hesitate to contact us (ramon@okteto.com) if you find any issues setting up Okteto. It’s not the goal of this exercise to evaluate your knowledge of our product. We just think it is a great way to get to know us and get the advantage of some of our great features!

2. Retrieve the list of files from the API and populate the Redux store, using the /api/files endpoint. This endpoint can be accessed from the same domain of your frontend. You can find a detailed specification of the endpoint here: https://github.com/okteto/filemanager#api-specification

   ℹ One of the advantages of developing with Okteto is that your services are all available in the same namespace in the cloud and they can be accessed directly just by calling the endpoint /api/files without the need to specify a domain or run into any cross-domain issues.

3. Render the file system tree in the FileExplorer component based on the specifications given by the designers: https://github.com/okteto/filemanager#ui-specification. Make sure a file can be selected from the FileExplorer sidebar and that its contents are properly shown in the FileContent component.

The basic structure provided should be enough to accomplish these tasks. You may however add any files, change the code or the configuration of the stack in any way you want or need.

Happy coding!