Scribd
Upload
29 views

React.js Assignment

Uploaded by

parth bhardwaj
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

React.js Assignment

Uploaded by

parth bhardwaj
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Assignment - React.

Js Developer

About OpeninApp

Almost all your favorite creators on Instagram, share links to their latest Youtube videos or
Youtube channels in their bio or stories. But whenever you tap on those links, you get
redirected to the youtube website instead of the youtube app. And here you can’t watch the
video in full screen nor can you like it, comment on it or subscribe to the channel.
Ever wondered why it is so? That’s because Instagram has something called a
Built—IN-Browser that opens up instead of opening the app you wanted to open. Which is
not cool at all ... .And this is not just so for IG but for all your favorite social media apps
eg.Youtube, Linkedin, Twitter, Snapchat, Telegram, Quora etc..
So we fixed this problem of sub-optimal user experiences by building a tool that ensures all
social media links open in the apps they should. It’s called OpeninApp. And it is already
loved by over 3.2 Million influencers & brands including the likes of Munawar Faruqui, Raj
Shamani, Riva Arora, Aishwarya (Ranjnikant-ji’s daughter), trak-in Tech, Mamaearth etc..
And has been used by 55Mn+ users.

So if you are someone who is passionate about social media and wants to improve User
Experiences for a Billion people, then welcome home.a Billion people, then welcome
home…

TASK
You are provided with a few basic screen Dashboard UI. You need to convert the high
Fidelity design into code using React.JS or Next.Js and CSS/SASS/SCSS/LESS/Tailwind CSS.
Please note- Use of any other CSS framework apart from the once mentioned above is
prohibited.

Objective:
The purpose of this assignment is to evaluate your skills in understanding and translating
Figma designs into a fully functional user interface (UI) with accurate interactions as
specified in the prototype.
● You are provided with a Figma file containing the UI design for a web application.
Please thoroughly review the design to understand the layout, color scheme,
typography, and other design elements.
Figma File Link: Click here
● A prototype of the web application is available in Figma. Please interact with the
prototype to understand the flow and functionalities intended for the application.
Prototype Link for Mobile: Click here
Prototype Link for Desktop: Click here
● Make a basic auth using Google (Login/Signup)
● Make sure the design is mobile responsive as per the figma design.
● Pay close attention to the interactions and dynamic elements in the prototype such
as button clicks, transitions, hover effects, and data display,
● Your task is to develop a front-end application that replicates the design and
interactions showcased in the Figma prototype.
● Ensure that your implementation is responsive and compatible with major web
browsers.
● Ensure that you address edge cases by displaying suitable toast messages or alert
messages in the event of invalid or missing inputs, specifically for the Login screen
and upload inputs.
● Technologies to use: React
● The final application should be free from bugs and closely match the provided
designs and interactions including error handling and empty state management.
● The application will utilize sample data which you can download from the link
provided here under:
Sample Data Link: Click here

How to submit:
Please deploy your assignment on hosting services like Netlify or Vercel, and kindly share
the link with us via the email address [email protected].

By When can you complete the task:


Preferably 48 hours. Let us know, If you need more time.

To make this assignment worth your time, make something that you can use to showcase
your skills and knowledge in the future. After all, your work is more a reflection of who you
are and less of what we ask.

Feel free to write, if you have any doubts - [email protected]

You might also like