🔮 Test Assignment for Strategy Risk Company (Vladikavkaz)

🎯SCAM vacancy on HeadHunter

🌐 Language: 🇷🇺 Russian | ✅ 🇺🇸 English (current)

---

✨ Table of Contents

• ✨ Table of Contents
  • ✨ Run
    • 🚀 System Requirements (Runtime):
    • 🚀 System Requirements (Development):
  • ✨ Technical Specifications
  • ✨ Task Requirements
  • 🤖 Implementation Result
  • 👾 Important Notes

✨ Run

🚀 System Requirements (Runtime):

1. Visual Studio 2022

🚀 System Requirements (Development):

required for embedded Grunt functionality in the project

1. Extract the node_modules folder from the project
2. In PowerShell, in the project root, run:

cmd /c mklink /D node_modules node_modules

3. Restart the project

✨ Technical Specifications

• Backend

  • ASP NET MVC

• Frontend

  • TypeScript

• Database

  • EntityFrameworkCore

✨ Task Requirements

The text in the "Company Name" column should be a link that opens "Details" for its object

1. The text in the "Company Name" column must be a link that opens company "Details"

   Use EntityFramework, store data in memory (add code to generate initial data at application startup)

2. Use EntityFramework and store data in memory (add code to create initial data on application startup)

   Set a fixed width for groups in "Details"

3. Set a fixed width for groups in the "Details" section

   Use CSS Flex to align groups in "Details", there should be 1 column of groups if browser window is narrow

4. Use CSS Flex to align groups in "Details"; there should be 1 column if the browser window is narrow

   Use CSS Grid to align items inside groups in "Details"

5. Use CSS Grid to align elements inside groups in "Details"

   Avoid duplication of CSS and HTML markup that generates "Details" in C#/markup code (each group should have the same layout for 'caption', 'toolbar', and 'content')

6. Avoid duplication of CSS and HTML markup that generates "Details" in C#/markup code (each group should share the same layout for 'caption', 'toolbar', and 'content')

   Implement behavior for 'Refresh' button: reload data from server and recreate DOM in browser

7. Implement 'Refresh' button behavior: reload data from the server and rebuild the DOM in the browser

   Adjust the "Employees" group to be nearly twice as wide as other groups while maintaining vertical alignment

8. Adjust the "Employees" group to be nearly twice as wide as other groups, keeping vertical alignment

   Don't render grids on the server side. Instead, render an empty grid and perform a new fetch request on page load, then build rows in JavaScript in the browser. Implement necessary server-side API

9. Do not render grids on the server side. Instead, render an empty grid and perform a fetch request when the page loads, building rows in JavaScript in the browser. Implement the required server-side API

🤖 Implementation Result

👨🏽‍💻 Desktop Version

💫 Main 💫

💫 Details 💫

👨🏽‍💻 REST API created for group data population

👨🏽‍💻 Example of filled 💫Details💫

👨🏽‍💻 Mobile Version Example 💫Details💫

💫 870px 💫

💫 500px 💫

👾 Important Notes

• The task did not specify the behavior of edit buttons or the add button logic
• The task did not impose any restrictions on the technology stack for faster development
• There were no requirements regarding complexity or simplicity, nor a strict format for implementation
• As a bonus, TypeScript support and automatic minification of JavaScript and CSS were implemented
• As a bonus, an API capable of processing batch data was implemented

✨Dvurechensky✨