Skip to content

full-stack-challenge.md

Latest commit

 

History

History
132 lines (89 loc) · 8 KB

full-stack-challenge.md

File metadata and controls

132 lines (89 loc) · 8 KB

Dynamox Full-Stack Developer Challenge

< back to README

In order to contribute to the enhancement of our Corporate Channels and asset condition monitoring platform, DynaPredict, we present you with the following challenge:

Build a robust and intuitive application developed using React and TypeScript. It should include authentication, machine management, sensor management, and general user-friendly features.

While going through the challenge, you should be able to handle ambiguous situations, adhere to best practices in front-end development, and demonstrate excellent problem-solving skills. Effective communication through well-documented code, code quality, readability, and maintainability will also be evaluated.

User Stories and Functional Requirements

Here you have the functional requirements for the application. You are free to make any assumptions you consider necessary to complete the challenge.

It is not mandatory to implement all the listed requirements before submitting your implementation. Just keep in mind that the more requirements you implement, the more you will be able to demonstrate your skills and knowledge.

We will expect candidates applying to more senior levels to demonstrate a deeper understanding of the requirements and to implement more of them for the same deadline.

You can use the following user stories as a guide to implement the application features:

1 - Authentication

  1. As a user, I want to log in using a fixed email and password so that I can access private routes.
  2. As a user, I want to be able to log out of the system so that I can prevent unauthorized access to my account.
  3. No private routes should be accessible without authentication.

2 - Machine Management

  1. As a user, I want to create a new machine with an arbitrary name and with a type selected from a list ["Pump", "Fan"] so that I can manage it later.
  2. As a user, I want to change the attributes (name and type) of a machine after creating it so that I can keep the machine information updated.
  3. As a user, I want to delete a machine when it is no longer in use so that it doesn't clutter the system.

3 - Monitoring Points and Sensors Management

  1. As a user, I want to create at least two monitoring points with arbitrary names for an existing machine, so that I can monitor the machine's performance.
  2. As a user, I want to associate a sensor to an existing monitoring point so that I can monitor the machine's performance. The sensor should have a unique ID, and the sensor model name should be one of ["TcAg", "TcAs", "HF+"].
  3. As a user, I want the system to prevent me from setting up "TcAg" and "TcAs" sensors for machines of the type "Pump".
  4. As a user, I want to see all my monitoring points in a paginated list so that I can manage them. The list should display up to 5 monitoring points per page and should include the following information: "Machine Name", "Machine Type", "Monitoring Point Name", and "Sensor Model".
  5. As a user, I want to sort the monitoring points list by any of its columns in ascending or descending order, so that I can easily find the information I'm looking for.

4 - Ambiguity Handling

  1. Make reasonable assumptions and design the application accordingly for any ambiguities in the challenge.
  2. Document your assumptions in the README file.

5 - Technical requirements

  1. Use TypeScript.
  2. Use React.
  3. Use Redux for managing global states.
  4. Use Redux Thunks or Redux Saga for managing asynchronous side effects.
  5. Use Next.js or Vite.
  6. Use Material UI 5 for styling the application.
  7. Create reusable components.
  8. The code is well-organized and documented.
  9. The application layout is responsive. The choice of remaining tools is at your discretion.

6 - Bonus

  1. Implement unit tests for the application (let us know how to run them, otherwise we won't be able to evaluate).
  2. Implement your own back-end code. If you pick this option, write it using NodeJS JavaScript runtime (not Java, not PHP...). Although we also work with Python here, we are looking for JavaScript related skills in this test.
  3. If you choose to implement your own back-end, we encourage you to use either PostgreSQL or MongoDB as a persistence layer.
  4. If you choose to use PostgreSQL, use Prisma ORM (or even try Drizzle, or Kysely) to interact with PostgreSQL.
  5. If you choose to use MongoDB, use Mongoose ORM to interact with the database;
  6. Use Nest.js Framework for the back-end (we are moving some services to that tool).
  7. Use Nx to manage the whole application as a monorepo (we use that tool a lot here).
  8. Add e2e tests with Cypress (use it to test a full user flow).
  9. If you were provided with a baseline code, identify any areas of bad code or suboptimal implementations and refactor them.
  10. Deploy your application to a cloud provider and provide a link for the running app.

7 - Tips

  1. There is no need to reinvent the wheel. You can use a Material UI 5 free template like Devias Kit to speed up the development process.
  2. Not familiar with Redux? Check out this tutorial to get started.
  3. Not familiar with Cypress? Check out these tutorials to get started.
  4. You can mock your back-end using a package like json-server, which creates a fake REST API. Bear in mind that those implementing their own back-end will check more boxes in the evaluation process.

Evaluation Criteria

The items listed above will have different weights in the evaluation process. Each one of them will be evaluated as "Not Implemented", "Implemented with Issues", "Implemented", or "Implemented with Excellence". Use your judgement to prioritize the requirements you will implement in the time you have available.

In general we will be looking for the following:

  1. Anyone should be able to follow the instructions and run the application.
  2. User stories were implemented according to the functional requirements.
  3. Front-end code is successfully integrated with a back-end API (either a fake one, or one you built yourself).
  4. Ability to refactor existing code (if applicable) and write unit tests for the written code.
  5. Adherence to best practices in front-end development.
  6. Problem-solving skills and ability to handle ambiguity.
  7. Code quality, readability, and maintainability.

Ready to Begin the Challenges?

  1. Fork this repository to your own Github account.
  2. Create a new branch using your first name and last name. For example: caroline-oliveira.
  3. After completing the challenge, create a pull request to this repository (https://github.com/dynamox-s-a/js-ts-full-stack-test), aimed at the main branch.
  4. We will receive a notification about your pull request, review your solution, and get in touch with you.

Frequently Asked Questions

  1. Can I use create-react-app to complete the challenge? No, create-react-app is not acceptable for this challenge.

  2. Can I use Next.js or Vite to complete the challenge? Yes, you should use of either Next.js or Vite for this challenge.

  3. Is it necessary to fork the project? Yes, this allows us to see how much time you spent on the challenge.

  4. Can I use Material UI in the project? Yes, the use of Material UI 5 is mandatory for this challenge.

  5. If I have more questions, who can I contact? Please reach out to Calil (Development Coordinator).

  6. Can I build my own back-end API? Yes, you can build your own back-end API, but it needs to use NodeJS.

  7. Can I use any NodeJS framework to the back-end? Yes, but we encourage you to use Nest.js. We are currently migrating away from pure ExpressJS and from Adonis.


Good luck! We look forward to reviewing your submission. 🚀