#1 Screening Challenge (S21) 200.00

Closed
opened 1 year ago by Anonymous · 3 comments
Anonymous commented 1 year ago

Why hello there! This challenge is an opportunity for you to demonstrate your coding skills by writing a piece of real-world software and earn money in the process. A few admitted students will get to continue working with us. Best screening bounty submissions will each be rewarded the bounty amount!

In this coding task, you will implement a table showcasing the students in the Algora community. The mock-ups that you’ll find in this post (check attachments to see all) will provide you with a general direction. Note that they are meant as more of a guideline than a strict target.

In addition, there should be a text field somewhere on the page that enables the visitor to filter students as they type out a keyword, such that a student is displayed if and only if they have an entry in their tech stack that matches the keyword.

Some important notes:

  • The table should display its loading state. Note that you don’t need any fancy animations or graphics for this, it can literally say “Loading…” or that some error has occurred in plain text.
  • To retrieve the relevant data from the server, refrain from writing your own fetch/axios/XHR code from scratch. Instead, use the existing API client found in api.ts, which will assure me that you are comfortable with using functional abstractions such as Either1, Task2, map, chain and fold. If you’re not familiar with these idioms, don’t worry! To complete this task, you only need a basic working knowledge of them, and here’s a brief primer on functional programming to get you started.
  • For styling purposes, feel free to write your own custom CSS or use the tailwindcss3 framework provided in the package.
  • I’d suggest paying attention to any errors or warnings that your browser console, IDE, command-line, linter/language server etc. might throw your way. Definitely make sure that your code compiles without any errors!

Let me know in this thread if you have any questions. Since this is a screening repository, your messages will be posted anonymously here (names will be revealed when we close the issue), so don’t hesitate to ask literally anything!


  1. https://gcanti.github.io/fp-ts/modules/Either.ts.html

  2. https://gcanti.github.io/fp-ts/modules/Task.ts.html

  3. https://tailwindcss.com/docs

Why hello there! This challenge is an opportunity for you to demonstrate your coding skills by writing a piece of real-world software and earn money in the process. A few admitted students will get to continue working with us. Best screening bounty submissions will each be rewarded the bounty amount! In this coding task, you will implement a table showcasing the students in the Algora community. The mock-ups that you'll find in this post (check attachments to see all) will provide you with a general direction. Note that they are meant as more of a guideline than a strict target. ![](https://app.algora.io/attachments/2d81941b-f4a4-4895-9c56-339d3f9c6ca1) In addition, there should be a text field somewhere on the page that enables the visitor to filter students as they type out a keyword, such that a student is displayed if and only if they have an entry in their tech stack that matches the keyword. Some important notes: - The table should display its loading state. Note that you don't need any fancy animations or graphics for this, it can literally say "Loading..." or that some error has occurred in plain text. - To retrieve the relevant data from the server, refrain from writing your own fetch/axios/XHR code from scratch. Instead, use the existing API client found in `api.ts`, which will assure me that you are comfortable with using functional abstractions such as `Either`[^1], `Task`[^2], `map`, `chain` and `fold`. If you're not familiar with these idioms, don't worry! To complete this task, you only need a basic working knowledge of them, and [here's a brief primer on functional programming](https://blog.algora.io/post/2021-02-fp-primer/) to get you started. - For styling purposes, feel free to write your own custom CSS or use the tailwindcss[^3] framework provided in the package. - I'd suggest paying attention to any errors or warnings that your browser console, IDE, command-line, linter/language server etc. might throw your way. Definitely make sure that your code compiles without any errors! Let me know in this thread if you have any questions. Since this is a screening repository, your messages will be posted anonymously here (names will be revealed when we close the issue), so don't hesitate to ask literally anything! [^1]: https://gcanti.github.io/fp-ts/modules/Either.ts.html [^2]: https://gcanti.github.io/fp-ts/modules/Task.ts.html [^3]: https://tailwindcss.com/docs
Anonymous started solving the bounty 1 year ago
Anonymous started solving the bounty 1 year ago
Anonymous started solving the bounty 1 year ago
Anonymous changed title from Screening Challenge (W21) to Screening Challenge (S21) 1 year ago
Anonymous started solving the bounty 1 year ago
Anonymous started solving the bounty 1 year ago
Anonymous started solving the bounty 1 year ago
Anonymous started solving the bounty 1 year ago
Anonymous commented 1 year ago
Owner

Hey folks, I’d like to clarify a couple points and give you some tips.

This exercise intentionally contains few bits that most of you are probably not familiar with, and this serves two purposes. First, it helps me determine who “really” wants to work with us. Attitude is often as important as ability, and I only want to work with students who are willing to put in the work and self-study when needed. Given that we are a very small startup team, this is really important for us. Second, it lets me see how you adapt when you are stuck. Now, I definitely don’t expect that you will figure out everything on your own. But, I want to see that you can overcome roadblocks by asking questions. As I said in the original post, you can ask literally anything – either here or in your own PR thread*. You should think of me not so much as a distant interviewer as a mentor who wants you to succeed.

* You can (and you probably should) create a PR even if your solution is incomplete.


Now for some tips. If you haven’t already been doing that, definitely take advantage of the type system. An optional but recommended prerequisite for this is to use an IDE (or a text editor with some plugins) that can display types as you code. I’ll show you some examples using VSCode.

Say we want to use the listPreUserStudents method but we don’t know how the heck we can use the thing it returns. Hovering over the variable we see that it returns something of type TaskEither<Error, PreUserStudent[]>.

If we still have no idea, we can go to its type definition.

…which brings up a new file with this rather unhelpful definition.

But we can keep going and check out how Task is defined.

Hopefully now we are in a familiar territory. A Task is just a function that returns a Promise.

So we can just get a Promise first and process that as we normally would.

Or, we can use the methods defined on the Task datatype directly (see above blog post) to transform our task into a task that does exactly what we want (say, print response to console), and call our task only at the very end, which is how it is intended to be used.

Either way, as you can see, we’ve already made a significant progress by just examining types and letting them guide our coding.

Hey folks, I'd like to clarify a couple points and give you some tips. This exercise intentionally contains few bits that most of you are probably not familiar with, and this serves two purposes. First, it helps me determine who "really" wants to work with us. Attitude is often as important as ability, and I only want to work with students who are willing to put in the work and self-study when needed. Given that we are a very small startup team, this is really important for us. Second, it lets me see how you adapt when you are stuck. Now, I definitely don't expect that you will figure out everything on your own. But, I want to see that you can overcome roadblocks by asking questions. As I said in the original post, you can ask literally anything -- either here or in your own PR thread\*. You should think of me not so much as a distant interviewer as a mentor who wants you to succeed. \* You can (and you probably should) create a PR even if your solution is incomplete. --- Now for some tips. If you haven't already been doing that, definitely take advantage of the type system. An optional but recommended prerequisite for this is to use an IDE (or a text editor with some plugins) that can display types as you code. I'll show you some examples using VSCode. Say we want to use the `listPreUserStudents` method but we don't know how the heck we can use the thing it returns. Hovering over the variable we see that it returns something of type `TaskEither<Error, PreUserStudent[]>`. ![](/attachments/b045e68a-d8f8-40c0-ac25-bf4cab08a447) If we still have no idea, we can go to its type definition. ![](/attachments/bfc2019d-e241-402f-9e96-f2b3505c95bd) ...which brings up a new file with this rather unhelpful definition. ![](/attachments/83e3d7c2-56fb-45d2-a3c3-b9dc139dbf9d) But we can keep going and check out how `Task` is defined. ![](/attachments/bf2e16de-1729-4246-b448-7e63cbc77d18) Hopefully now we are in a familiar territory. A `Task` is just a function that returns a `Promise`. ![](/attachments/c454cce6-ddbf-475d-95a4-c2c43ffe69c2) So we can just get a `Promise` first and process that as we normally would. ![](/attachments/f116bdc9-e33f-46d1-a33a-d68b2939cf3d) Or, we can use the methods defined on the `Task` datatype directly (see above blog post) to transform our task into a task that does exactly what we want (say, print response to console), and call our task only at the very end, which is how it is intended to be used. ![](/attachments/74ab5d0d-2122-42ce-8fda-498dd73e572b) Either way, as you can see, we've already made a significant progress by just examining types and letting them guide our coding.
Anonymous commented 1 year ago
Collaborator

Hey Zafer, I appreciate these helpful tips! I’ve been reading up on the Either data type with different resources for a while but am struggling to figure out how to actually get the PreUserStudent array from the Either ‘right’ value.

From my understanding, the state and value properties of the Promise object are internal, which is why we need to use the .then method to access them. The purpose of the ‘handleResponse’ method is to run when the promise is resolved and then receive the result. However, I can’t seem to figure out how to actually extract the ‘right’ value from the Either object in the handleResponse method. In the example code you posted above, I had expected the ‘s’ parameter in the handleResponse to have a .right property because it has type Either, but unfortunately, it did not when I tried. In fact, VSCode shows me that ‘s’ can only access a ’_tag’ property, which is confusing me a lot because when I console.log(s) it shows that ‘s’ also has a ‘right’ property. Why is only ’_tag’ accessible?

I tried using the link you shared (the brief primer on functional programming) to try to figure things out, and although it did make me understand Either better, the examples using Either in the article all returned things of type E.right(…) or E.left(…), not the values of right or left themselves. How do I actually extract those values (if it’s even necessary)?

Thank you for the help!

Hey Zafer, I appreciate these helpful tips! I've been reading up on the Either data type with different resources for a while but am struggling to figure out how to actually get the PreUserStudent array from the Either 'right' value. From my understanding, the state and value properties of the Promise object are internal, which is why we need to use the .then method to access them. The purpose of the 'handleResponse' method is to run when the promise is resolved and then receive the result. However, I can't seem to figure out how to actually extract the 'right' value from the Either object in the handleResponse method. In the example code you posted above, I had expected the 's' parameter in the handleResponse to have a .right property because it has type Either, but unfortunately, it did not when I tried. In fact, VSCode shows me that 's' can only access a '_tag' property, which is confusing me a lot because when I console.log(s) it shows that 's' also has a 'right' property. Why is only '_tag' accessible? I tried using the link you shared (the brief primer on functional programming) to try to figure things out, and although it did make me understand Either better, the examples using Either in the article all returned things of type E.right(...) or E.left(...), not the values of right or left themselves. How do I actually extract those values (if it's even necessary)? Thank you for the help!
Anonymous commented 1 year ago
Owner

Great questions!

I had expected the ‘s’ parameter in the handleResponse to have a .right property because it has type Either, but unfortunately, it did not when I tried. In fact, VSCode shows me that ‘s’ can only access a ’_tag’ property, which is confusing me a lot because when I console.log(s) it shows that ‘s’ also has a ‘right’ property.

s would indeed have a right prop when the API call succeeds, but what if it doesn’t? In that case we’d end up with a Left<Error>, which has a left prop instead. Since it depends on the runtime value, the compiler doesn’t let you access it as that would be unsafe (that is, doing so may result in runtime errors). Note that both cases have the common _tag prop, which is why it is accessible regardless of the runtime value of s.

How do I actually extract those values (if it’s even necessary)?

Yep, you need to access those values at some point since you’ll want to render them. But note that when you extract the values and throw away the Either, you lose important contextual information. Now, that doesn’t matter so much for this exercise since the app state is very simple, but in general the idea is to hold on to the Either for as long as possible and to operate on it directly using combinators such as map, chain etc, deconstructing it only at the very end when you need to output it to the world in some way (log to console, render on screen etc.) Even then maybe it’s more productive to think about it as “collapsing the Either into a single value” (akin to reducing a list) rather than “extracting its values”.

In short, check out these destructor methods.

Let me know if anything is unclear or you have more questions!

Great questions! > I had expected the ‘s’ parameter in the handleResponse to have a .right property because it has type Either, but unfortunately, it did not when I tried. In fact, VSCode shows me that ‘s’ can only access a ’_tag’ property, which is confusing me a lot because when I console.log(s) it shows that ‘s’ also has a ‘right’ property. `s` would indeed have a `right` prop when the API call succeeds, but what if it doesn't? In that case we'd end up with a `Left<Error>`, which has a `left` prop instead. Since it depends on the runtime value, the compiler doesn't let you access it as that would be unsafe (that is, doing so may result in runtime errors). Note that both cases have the common `_tag` prop, which is why it is accessible regardless of the runtime value of `s`. > How do I actually extract those values (if it’s even necessary)? Yep, you need to access those values at some point since you'll want to render them. But note that when you extract the values and throw away the Either, you lose important contextual information. Now, that doesn't matter so much for this exercise since the app state is very simple, but in general the idea is to hold on to the Either for as long as possible and to operate on it directly using combinators such as `map`, `chain` etc, deconstructing it only at the very end when you need to output it to the world in some way (log to console, render on screen etc.) Even then maybe it's more productive to think about it as "collapsing the Either into a single value" (akin to reducing a list) rather than "extracting its values". In short, check out [these destructor methods](https://gcanti.github.io/fp-ts/modules/Either.ts.html#destructors). Let me know if anything is unclear or you have more questions!
Anonymous has been awarded $200.00 for the pull request Challenge Complete 1 year ago
Anonymous has been awarded $200.00 for the pull request Solved bounty 1 year ago
Anonymous started solving the bounty 1 year ago
Anonymous has been awarded $200.00 for the pull request Solved bounty 1 year ago
Anonymous closed 1 year ago
Anonymous started solving the bounty 6 months ago
Sign in to join this conversation.
No Label
No Milestone
No Assignees
2 Participants
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
Cancel
Save
There is no content yet.