KEMBAR78
Frontend Developer Task Guide | PDF | Java Script | J Query
Scribd
Upload
103 views4 pages

Frontend Developer Task Guide

The document outlines a front-end exercise to create 5 screens for a mobile app: a splash screen, first time user screen, home screen, settings screen, and edit screen. It provides specifications for each screen and options to complete the exercise using JavaScript/jQuery, ReactJS, or React Native. Applicants are instructed to follow a design guide, prioritize elements, include comments/formatting, and avoid overusing libraries. The submission should include source code, a working link, screenshots, and brief documentation.

Uploaded by

jayant
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
103 views4 pages

Frontend Developer Task Guide

The document outlines a front-end exercise to create 5 screens for a mobile app: a splash screen, first time user screen, home screen, settings screen, and edit screen. It provides specifications for each screen and options to complete the exercise using JavaScript/jQuery, ReactJS, or React Native. Applicants are instructed to follow a design guide, prioritize elements, include comments/formatting, and avoid overusing libraries. The submission should include source code, a working link, screenshots, and brief documentation.

Uploaded by

jayant
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

1 of 4 ROCKET MEDIA​ T

​ ECHNOLOGIES 

FrontEnd Exercise 

Create following 5 screens: 

● Refer Zeplin for spec-guide and assets. (Account credentials are enclosed in email) 
● Self-prioritize UI elements. In case any part of design seemed too complex for your skills 
in given time, you can replace it with a simpler one using your best judgement. Do 
mention such changes with reason at the time of submission of this exercise. 
● Pixel Perfect, Re-usable components/functions. 
● Comments and formatting. 
● Do not overload on 3rd party libraries for the simplest of methods.  

1. SPLASH SCREEN  2. FIRST TIME USER 

Visible for 3 seconds. Load saved data in  Only for the first time user. Save this 
the background.  information in Application‘s Local Data. 

   
2 of 4 ROCKET MEDIA​ T
​ ECHNOLOGIES 

    

   

   

3. HOME SCREEN  4. SETTINGS SCREEN 

Repeat user should land directly on this  Open this screen on hitting ‘Watch Trailer’ 
screen. Implement pull to refresh. Create a  button on the previous screen. Show user’s 
local JSON to store contents of this screen.  first & last name from local storage.  

   

 
3 of 4 ROCKET MEDIA​ T
​ ECHNOLOGIES 

5. EDIT SCREEN 

Edit and store the updated information in 


application’s local storage. Show a back 
button which also works as cancel. Changes 
should reflect on Screen #4 as well. 

[Option-1] Using Javascript and jQuery: 

Create the project using CSS, HTML and Javascript. You can use jQuery, lodash, and other 
support libraries. WebApp must render perfectly in Mobile version of Chrome & Safari (all 
common phone sizes). Tablets and Large screens can be ignored. 

 
4 of 4 ROCKET MEDIA​ T
​ ECHNOLOGIES 

[Option-2] Using React JS: 

Create the project using CSS, HTML, Javascript and ReactJS. You can use other support 
libraries as well. WebApp must render perfectly in Mobile version of Chrome & Safari (all 
common phone sizes). Tablets and Large screens can be ignored. 

[Option-3] Using React Native: 

Create the project in ReactNative. You can use Expo or any other tool. Do Not use 
Styled-Components or similar library. App must render perfectly on both Android and iPhone (all 
common phone sizes). Tablets and Large screens can be ignored. 

How to Submit: 

● Source Code​: Submit a zip file of your project or link to public repository. 
● Working Link​: A URL of the project. (Should be active for 3-5 days). 
● Screenshots​: Screenshots of all the screens. 
● Brief Documentation​: Short and clear documentation of Technologies used in the 
project. Explain the changes made in the original design (if any). Mention the name of 
IDE/Text editor used. 
 

You might also like