search

translense-atul / Hiring

0 stars 0 forks source link

Frontend Assignment #1

Open translense-atul opened 1 year ago

translense-atul commented 1 year ago

Assignment: Frontend Development - Page Design and State Management

Use Typescript You can play the prototype for better clarity

Task Description: You have been assigned to design a page using React.js, implement Redux toolkit for state management and fetching data(api call), and incorporate various frontend concepts and best practices. The page design can be found in the Figma link provided: Figma Design.

Requirements:

  1. Design the given page using React.js, paying special attention to the server and client components.
  2. Ensure modularity and wise decision-making while creating components.
  3. Use CSS for styling the components. You may use Tailwind CSS if you prefer.
  4. Implement Redux toolkit for state management.
  5. Create a project structure that follows best practices and is well-organized. Consider the weightage of this aspect.
  6. Implement browser storage to auto-populate data in fields on page 1. When the user returns to the page after a few minutes and refreshes the data, it should be preserved.
  7. Implement image upload functionality in the best possible way, considering user experience and performance.
  8. Prototype and design the exact flow for OTP entry. This should include a smooth user experience and error handling.
  9. Integrate the provided backend API into your project (mock the API response)

Note: While completing the assignment, please document your design decisions, explain the choices you made, and provide any additional notes or suggestions you may have for the project.

Deliverables:

  1. React.js project with the page design implemented.
  2. Redux Toolkit integrated into the project for state management.
  3. A well-structured project with modular components.
  4. CSS styling for the page, including any necessary customization.
  5. Browser storage implementation to auto-populate data in fields on page 1.
  6. Image upload functionality implemented in the best possible way.
  7. A prototype and design flow for OTP entry.
  8. Integration with mock API
  9. Documentation explaining design decisions, choices made, and any additional suggestions.

Submission: Please submit the completed assignment by uploading the project files, along with the documentation. Please deploy on any platform would be a bonus part. If you donot have exposure in next js you can complete it in React.

MohdAnasQureshi commented 5 months ago

Please provide the backend api to integrate with this assignment.

translense-atul commented 5 months ago 
        HiYou can use dummy apis    ---- On Mon, 13 May 2024 20:00:45 +0530  ***@***.***> wrote ----

Please provide the backend api to integrate with this assignment.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

TusharKumawat1 commented 5 months ago

Before we begin, I'd like to ask a few questions.

  1. Can you please explain more about how the landing page looks like?
  2. Do we need to create all the signup steps shown in the design?
  3. Can I create it using Next.js only?
  4. Where should we implement the mock APIs, on the landing page or somewhere else?
  5. How much time are you expecting for this project to be completed?
translense-atul commented 5 months ago 
        Hi 1) there are two pages you need to design only two pages2) only two page we need3) use react with typescript4) mock api need to be used for the two pages 5) At earliest possible, we have only one opening we start interview for those who have submitted the assessment     ---- On Tue, 14 May 2024 11:33:10 +0530  Tushar ***@***.***> wrote ----

Before we begin, I'd like to ask a few questions.

Can you please explain more about how the landing page looks like? Do we need to create all the signup steps shown in the design? Can I create it using Next.js only? Where should we implement the mock APIs, on the landing page or somewhere else? How much time are you expecting for this project to be completed?

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

Zethyst commented 5 months ago

Hi, I have a few doubts regarding this assignment:

1) What purpose does my API have to serve other than OTP generation & sending 2) Am I too late in starting this assignment?