Front End Engineer @ Buyhatke, Bengaluru

As a Front-end developer, you will work with motivated individuals who are passionate-beyond-measure to offer the Ultimate Shopping experience to consumers. You will leverage the latest technologies (HTML5, Javascript, ajax) and application paradigms (web apps on the desktop) to create a beautiful client that runs seamlessly on windows, mac, chrome, firefox, IE, safari.

Responsibilities:

  • Implement Visual Designs in standards compliant, clean markup (HTML5/CSS3/JS)
  • Develop responsive designs and thoroughly test cross browser compatibility of all product interfaces
  • Identify and research new UI technologies
  • Suggest and implement improvements to existing product interfaces
  • Assist in building wireframes/prototypes
  • Make data driven decisions based on analytics to improve user engage
  • Advise, collaborate with, and synthesize feedback from designers and the backend team.
  • Ready to explore and perform tasks that are out of your own pool of expertise
  • Fulfil several project requests simultaneously while meeting tight deadlines.
  • Make pages optimized for both performance as well as SEO

Requirements:

  • Expert in making scalable and modular Front End code
  • In depth knowledge of HTML, CSS & JavaScript
  • Good experience in making Progressive Web Apps
  • Knowledge of cross browsers & devices development issues and inconsistencies
  • Good knowledge and experience in ReactJS and Server Side Rendering
  • Experience in setting up & running task runners like Gulp & Webpack
  • Experience in CSS pre and post processors like SASS/Stylus & PostCSS (we use SASS combined with PostCSS) & BEM style coding
  • Experience in creating transitions/animations at 60fps especially on mobiles

Note : PLEASE MAKE SURE NOT TO USE ANY HTML/CSS/JS FRAMEWORKS FOR THE ASSIGNMENTS. WE JUST WANT TO TEST OUT YOUR CORE CODING STRENGTH.

Assignments :

    Align the above 4 images in the format below, but in such a way that the images are centered (both vertically and horizontally) in all the boxes irrespective of the height or width. Also make sure that proper aspect ratio is maintained, i.e., images should not be stretched.

    Required: Conditions:

    - We expect a simple solution i.e., a one code fits for all solution. So you bear in mind that the images and the corresponding containers would be dynamically generated and the sizes of the images would be unknown

    - From Rule above: No hard coding.

    - Submit all possible CSS only solutions

  1. Create a navigation bar that you think would give a good user experience both on mobile as well as on bigger screens such that the its performant on mobile as well.
  2. Create the following gifs in pure html ( make it in svg and additionally in canvas for bonus points ;) )
  3. We at Buyhatke are committed to providing the users with web pages that display a number of hand picked promotions and exclusive offers that saves a lot of their money. These pages would be static or dynamic depending on the promotion and would be required to make it as fast and efficiently as possible which is also SEO optimized. This mega assignment evaluates you more on the lines of your coding capacity. Its a mixture of HTML, CSS, JS and PHP. Here it goes:

    The page that needs to be created is a coupons page that displays the coupons of certain websites and upon clicking it copies the code and then goes to corresponding offer page. It takes in values from a JSON file with a certain format. Have a look at the layout of the web page here. So basically, you ll need to create a replica of the image, i.e., the web page would display a set of boxes that shows the coupon title, coupon's store, and a get coupon button. Each box would have a layout template sample as shown below

    <ul>
    						    <li data-coupon="coupon1">
    						        <div>{store image} {store name}</div>
    						        <img src="{category img}">
    						        <h3>{name}</h3>
    						        <button class="get-button" data-code="COUPONCODE1">GET COUPON</button> 
    						    </li>
    						..
    						..
    						..
    						</ul>
    						

    The li elements have to be created dynamically based on the number of coupons within the json file. The file has to be read and should dynamically populated within the HTML using PHP.

    Upon clicking the get coupon button of each box, the window should scroll down to the div below with class .coupon-details and should show the corresponding coupon and provide a link to go to the store.

    <div class="coupon-details">
        Coupon code copied was : {coupon code of the corresponding "coup#"}
        <a href="{coupon store url}">click here</a> to go to store
    </div>
    

    The JSON file can be downloaded here: DOWNLOAD NOW

    * Above codes can be modified to your convenience and creativity

Note : Please create the single zip file for all asignments & share the link using google drive in below form