Basic Guidelines

1. Please use your favorite IDE.

2. Please create the project from scratch using CLI, and build on top of it. Don’t start with a template/theme and go backward cleaning it.

3. TypeScript Only. Please NO vanilla JavaScript.

4. Please use FlexBox or plain Flex in the SCSS.

Styling Guidelines

1. Most UI elements in the design are repeatable. So, we encourage you to create components and show that you are not an HTML designer but know Angular and why we use it.

2. Write your styles in SCSS. Try to reuse color variables and not hard-coding them everywhere.

3. The one (if not the only) to create a beautiful UI is to ensure that elements have the same properties as shown in the design. For example, ensure the color codes are the same, font-family, size and weight are the same. The font colors at #000000 don’t always look good, so ensure you pick up the right amount of grey color from the designs.

4. We heavily recommend using Flex in your styles. And we want you to take the call on when to use Flex or Grid.

5. For graphs in the UI, you can use any graph library you are comfortable with. The left graph is Area Fill graph and the right is donut Chart. Here are some suggestions of the chart libraries you can use: Fusioncharts, Charts.js, Apexcharts.

6. For icons, use Fontawesome. If you can’t find an icon, use anything you like. You don’t have to use the exact icon.

7. Use the nearest color you find fit. Or use any color picker.

API Integration Guidelines

1. You don’t need to bind the entire UI with API. There is only one specific section where API integration is required. We just want to see if you know how to integrate the APIs.

2. For the rest of the data, you can create the objects/modals in Typescript or load a local JSON.

3. You can also hard-code that in the template, but you could show your smartness by not doing so.

4. API endpoint doesn't have any authentication. If you face any difficulties accessing the APIs, please copy the content to a local JSON and make an API call to it.

API Endpoint (GET) to retrieve JSON response: api.fy23ey06.careers.ifelsecloud.com

Project Structure Guidelines

1. Keep HTML elements in the template.

2. Keep styles in the SCSS files.

3. Keep backend logic in the TypeScript.

4. This will help you keep your code clean and comprehensible.

5. Don’t return HTML from TypeScript and put CSS in the HTML file. This will make your code much harder to read. There are some exceptions to this though.

6. When you need to apply conditional styling, you can do them from TypeScript or by Ng conditions in the HTML. However, we would still recommend creating classes and applying/removing them and not changing style properties on an ad-hoc basis.

Don’t print yourself a NO card by doing silly things like -

1. Inline CSS in the templates. Nobody likes to see them.

2. Poorly structured styles.

3. Unformatted HTML template.

4. Poorly written method names, like test1(), test2(), newTest(), newTestForSure()

FAQ

1. Can I use Bootstrap/Tailwind? We don't use it though and prefer using either FlexBox or plain Flex in the SCSS. If you use FlexBox it will be an advantage.

2. Can I use Material UI? Yes, you can. We don't use it either though. We create in-house components and if you do so, you have better chances to the next round.

3. Which graph library should I use? Any. Highcharts, ApexCharts etc.

How to submit the task?

1. Take screenshot of the output from your browser.

2. Commit your code and the screenshot to a git repository and make it public.

3. Open the Github link in the Incognito mode to ensure it's public. If we can't access it, we won't be able to review it.

4. Reply to the original invitation email you have received to complete the technical task. Include #1 and #2 in the email. We will review.

One last thing

We get many responses where we can see the efforts but the required output is nowhere close to requirements. This is in fact, more than 50% of the total applications. We provide the extensive details to see if you can follow guidelines when you work with our team. We feel this provides every applicant an equal opportunity to demonstrate their skills.

So if you are a junior, who has the skills we need, we would love to work with you and bring you to our team. However, more than anything, our product is designed with very high standards to provide an amazing experience to our users. That's one of our key strengths. You can check our product on the website. And this is something we want to keep doing and we look forward to see the quality in your work!

Before you submit the task, put your screenshot next to the task screenshots and compare. If you think it's missing out on something, we encourage you to fix it. Otherwise we unfortunately end up rejecting the application because we can't see your skills we need. We will try to provide the feedback to each candidate though.

Good Luck!

We hope to work together and make manufacturing industries driven by ML and AI and not through papers or Excel sheets.