Modern MES Platform - Product and Engineering

if else cloud logo

Hiring Positions

4 Permanent Full-Time

Product and Engineering Team

Fully (100%) Remote or Hybrid

How does our Manufacturing Execution System (MES) Platform enable Production Workflows?

We provide software to manufacturers so they can understand their manufacturing better, in real-time. We integrate our software product with their machines and other subsystems and fetch data through TCP/IP, IoT, etc. We then bring this data over to a multi-cloud environment and run some ML and AI on hundreds of millions of data points. Users then see real-time analytics on client applications - the web, mobile/tablet/watch apps, Alexa, Microsoft Teams, etc.

And we do all this with a latency of less than 100ms. That's less than the time it took you to read this text. Impressive, isn't it? Yeah, our customers love us too!

Below is the eco-system and the product suite that we offer. These are bespoke applications for each platform.

Some Helpful links

Here are some helpful pages we want you to go through to understand the level of quality we put in our products. We expect you to be as close to it as you can!

Dashboard Real-time Collaboration

Reports Manufacturing Reports and Insights

Custom Data Driven Features Shopfloor Dashboards

Web Platform Engineering Team - Senior Angular Developer

This is an immediate start job. If you meet the criteria, we can bring you on-board in 24-48 hours.

Please understand what our startup does and the product we provide to our users. The best we can recommend is to browse through the website as there are tons of product screenshots. This will help you to observe the quality we expect from the senior Angular developers in our team.


Here is our hiring process.

1. Please complete the technical task mentioned. This is the only efficient way we like to ensure you have the skills we are looking for, and we can bring you on-board swiftly!

2. Within 24 hours of the task completion, we will interview you for the final round. This is just a discussion and a chance for you to ask any questions!

3. If all goes well, and we both want to work with each other, we will bring you on board in the next 24 hours.

Key Details

We want you to design the below dashboard. Take a breath before you think it's a big task. We have broken it down into small pieces and have provided details of each section.

What is it? The dashboard shows random data which has no relevance with our product. However, we couldn't find any better relevant UI and functional elements to assess the skills we are looking for. So if you do it well, you can be confident to fit in within our team well!

Source Credit We have taken reference from a random Dribble and want to extend credit to it's Author. Thank you!

One this page

1. Details of the Dashboard

         1.1  Overview of the Dashboard

         1.2  Left Navigation of Dashboard

         1.3  Top Navigation of Dashboard

         1.4  First Static Column of Dashboard

         1.5  Total Balance Card Section

         1.6  Statistics Cards and Graph Section

         1.7  Transaction History Grid

2. Basic Guidelines
3. Styling Guidelines
4. API Integration Guidelines
5. Project Structure Guidelines
6. Practices that we don't like
7. Some FAQ
8. How to Submit the task

1.1 Overview of the Dashboard

Here is the dashboard that we want you to design. Below are steps by steps instructions. Design this in a 1920x1080 resolution. We don't want you to make it responsive if you don't want to do it.

Below we have explained each component/area of the task. There are Red Sticky Notes with more details. Feel free to open the images in a new tab if you find the text is unreadable on this page.

Make separate components and invoke them on the main dashboard.

API Endpoint with JSON Response

There is only one API with three objects in it. You can choose to create one service or three separate (preferred) and use the relevant key property. Please create a service to call the API. Do not copy paste the JSOn in your project. The API doesn't require any authentication.

Please create a service to call the API. Do not copy paste the JSON in your project. The API doesn't require any authentication.

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

smart devices running manufacturing software

1.2 Left Navigation of Dashboard

The left navigation should be full height to the page. Only the right side container scrolls up and down. The menu icons on the navigation bar has no functionality. There are no routes/navigation required.

cloud mes with real-time dashboard

1.3 Top Navigation of Dashboard

The top navigation should be full width to the page. When you scroll, it stays on the top. The menu icons on the navigation bar has no functionality. There are no routes/navigation required.

advanced MES dashboard

1.4 First Static Column of Dashboard

You can use Font Awesome icons. You can use an image for the top card, or design it in the HTML. If you think that's too difficult or time consuming, put a nice light colored grey div. It's not that important either.

For the rest of the elements, bind static values. You can also create a local JSON and use it to bind values. Up to you.

Modern Manufacturing Software Dashboard

1.5 Total Balance Card Section

You can create the progress bars using plan HTML and CSS. There is no need to use a library if you dont' want to.

API Details: Use the balance key property from the JSON Response.

Dynamic Manufacturing Dashboard

1.6 Statistics Cards and Graph Section

Try to keep the colors as similar as you can. If you can't put the gradient, don't worry. But if you want to show off, great!

The API response will only get you the values for the top three cards and the color of their texts. You can set hardcoded values for the bar graphs. Or create a local JSON if you prefer. Up to you.

API Details: Use the money_statistics key property from the JSON Response.

Real time analytics on manufacturing execution sytem

1.7 Transaction History Grid

There is an API for the Grid data. You can implement the local search functionality if you want. Also, show at least 5 rows in the grid. The cropped image only shows 2. The page can scroll down.

When you click on the three dots on the right, open a popup and display the 'Name' and the 'Type' value of that row.

API Details: Use the transactions key property from the JSON Response.

Cloud based Shopfloor dashboard

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.

help Next Generation Manufacturers enjoy the digital journey.

It's the experience that matters.

Your Analyst Friend, social app in manufacturing, and voice assistant.

Learn what's in it for your teams.

Smartness that you see everywhere else.

Kypeco introduces new ways of interacting with data, which is common in the tech industry. Now, it's in manufacturing.

A smart watch with real-time OEE monitoring

Connectivity that you see everywhere else.

We all are well connected with our teams over email, Teams, etc. Kypeco brings the same experience bespoke for the manufacturing industry.

use Kypeco to Monitor remote production sites while traveling

Innovation that you see everywhere else.

Teams love collaborating, and it's pretty advanced in many other industries. Kypeco brings manufacturing teams together to collaborate.

Real-time shopfloor monitoring on smart phone Kypeco MES

Digitalize your Shopfloor with Modern MES. Say goodbye to whiteboards and papers.

Bring Modern Cloud Platform and Smart Apps in Manufacturing

Eliminate manual data entry an streamline your shopfloor operations with our MES Platform Application Suite.

Explore Our Platform Application Suite - Transform Your Manufacturing Process!

Real-time Analytics

Boost your shopfloor efficiency with real-time production data that's accurate and up-to-the-minute. Make informed decisions and improve performance with ease.

Use Kypeco MES for production planning while travelling

Modern Application Stack for Manufacturers

Eliminate manual data entry and simplify your shopfloor processes with our MES platform.

Cloud Native

Our modern manufacturing execution system is built with Cloud Native technologies.

A smart watch app in manufacturing

Increased Productivity

Optimize production planning and reduce downtime to boost your manufacturing productivity.

Scalable SaaS Solution

See shift trends on modern Industry 4.0 application

Kypeco grows with your business, adapting to your changing needs and expanding production capabilities.

Good Luck!

@ifelsecloud

Senior Angular Developer


Best of luck tackling the task - may the force of caffeine and creativity be with you! We are eager to witness your skills in action and are keen to bring such great talent into our team!

Get started with Digital Manufacturing Solution - Kypeco