Giter Club home page Giter Club logo

challenge-front-end's Introduction

From Rachel Fullstack Challenge

Part 1 - React

Write a small app that renders a product image along with a sidebar with alternative images for that product. Clicking a product image on the side should change the main image. You can find this pattern on our website product page https://en.fromrachel.com/products/scalloped-over-the-knee-tights. An array of images url to render was added to /task1/index.js

To help you out the project scalfholding with bundling, babel (ES6-ES7) and hot module reloading was already done to get started just run in /task1

npm install

To view your app run

npm run start

Part 2 - Cloudflare Worker Proxy

The problem

From Rachel has multiple subdomains for its localized stores. The subdomains are

en.fromrachel.com
en-ca.fromrachel.com
en-us.fromrachel.com
fr.fromrachel.com
fr-ca.fromrachel.com
fr-fr.fromrachel.com

However, Shopify does not provide methods to control the route and or redirect users dynamically to different urls at the server level. How will we make sure that a visitor going to fromrachel.com will be redirected to the right localized subdomain?

We can setup a proxy in front of Shopify to be able to manipulate the request before it reaches the Shopify servers.

To do this, we use Cloudflare Worker. Workers are built using the web workers specifications and run on Cloudflare servers instead of the browser. They can be used to process any incoming requests. We’ll use them to direct our traffic to the right subdomain.

Task

Write a simple Cloudflare Worker that will redirect traffic on fromrachel.com to the appropriate country AND language (locale) for this specific user. For example, if you visit fromrachel.com while in Canada and your browser is in English I should be redirect to en-ca.fromrachel.com. However, if you visit from the US but your language is French, I should then be redirected to fr.fromrachel.com. Request path and search params should also be preserved with the redirect. If you request fromrachel.com/pages/subscribe?coupon=test from Canada in english you should be redirected to en-ca.fromrachel.com/pages/subscribe?coupon=test

  • Your file should be copy pastable in the Worker Preview page here: https://cloudflareworkers.com/
  • You should output a single javascript file, either by working off a single file or bundling your files.
  • You can write your code in any flavor or super set of Javascript you would like.

Tip:

  • Using https://cloudflareworkers.com/ testing tab you can set manual / mock request headers. That will be very helpful to test your solution.
  • There could be multiple possible eligible subdomains for a given user, your solution should pick the best one.

Questions

In the questions.md answer the following questions

What else would you need to do before it’s ‘production ready’?

Did you know about Cloudflare worker before? Was is your opinion of it?

If you had to solve this original problem using any other solutions, what would you do differently?

Evaluation

You will be evaluated on:

  • The quality of your solution/code
  • Your understanding of the different tools & systems at play
  • Your usage of best practices
  • The quality of your answers

If you have any questions, I’ll be available for the duration of your test.

Good luck!

challenge-front-end's People

Contributors

jguipi avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.