Scribd
Upload
37 views

ReactJS Test Experience - New

Uploaded by

All rounder covering
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

ReactJS Test Experience - New

Uploaded by

All rounder covering
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Creating a task for a fresher candidate aspiring to join as a ReactJS Developer involves

designing challenges that test their understanding of foundational web technologies


(HTML, CSS, JavaScript) and essential React concepts. Given your requirements, here's
a structured task that can help evaluate the candidate's skills effectively:

Task Title: Develop an Advanced React To-Do Application with API Integration

Objective: Enhance the basic To-Do application by integrating external API data,
implementing advanced state management using Redux, and ensuring the application is
responsive and user-friendly across different devices.

Figma link for Design:


https://www.figma.com/design/DAQXWhcqjf4idJCClGNQqt/Front-End-Developer?node-
id=0-1&t=suUJGaYF7bBUdXJz-0

Requirements:

1. Frontend Development And API Integration:


a. Utilize HTML to structure the application's layout.
b. Use CSS for styling the application. Feel free to use CSS frameworks like
Bootstrap or Material-UI for design components.
c. Implement the application logic using JavaScript (ES6 or later).
d. Integrate with a public API (e.g., a weather API) to display data relevant to
the tasks. For example, if a task is related to an outdoor activity, show the
current weather conditions.
e. Implement error handling for the API requests to manage and display
errors gracefully in the UI.

2. React Components And Advanced State Management::


a. Develop the application using functional components and demonstrate
the use of React hooks (e.g., `useState`, `useEffect`).
b. The application should have at least two components:
i. TaskInput: A component for adding a new task.
ii. TaskList: A component for displaying the list of tasks.
c. Use Redux Thunk or Redux Saga for handling asynchronous actions (e.g.,
API calls).

1
d. Use Redux Thunk or Redux Saga for handling asynchronous actions (e.g.,
API calls).

3. Responsive Design:
a. Ensure the application is fully responsive and provides an excellent user
experience on mobile, tablet, and desktop devices. Use CSS Grid and
Flexbox to achieve responsiveness.
b. Implement a mobile-first design approach..

4. Functionality:
a. Add Task: Users should be able to input a task into a text field and add it
to the list by pressing a button or pressing Enter.
b. View Tasks: Display all added tasks in a list format.
c. Delete Task: Each task should have a delete button that, when clicked,
removes the task from the list.
d. Task Prioritization: Allow users to set priorities for tasks (e.g., High,
Medium, Low) and display them accordingly.
e. Persistent Storage: Use local storage or session storage to save tasks
and authentication status, ensuring data persistence across browser
sessions.
5. User Authentication:
a. Add a simple user authentication feature (login/logout functionality) that
simulates the process using Redux for state management. There's no
need to integrate with a backend; you can mock the authentication
process.
b. Protect the To-Do list behind authentication, ensuring that tasks are only
visible to logged-in users.
6. Additional Instructions:
a. Follow best practices for organizing your project structure, especially as it
grows in complexity with these new features.
b. Prioritize clean code and maintainability, making sure your application is
scalable.

2
7. Submission Guidelines:
a. Submit your project as a GitHub repository link with a detailed README on
setup and running instructions. Include screenshots and a brief overview
of the features implemented.
b. Deploy your application using a free hosting service (e.g., Netlify, Vercel,
GitHub Pages) and provide the live site URL for immediate access and
testing.
c. Submit your project via this form:
i. https://docs.google.com/forms/d/e/1FAIpQLSeQ-9PffLbFkzTFfNN
v6SqmlyKhV8OT5TJVkPiHBOq9G1-YTQ/viewform

8. Evaluation Criteria:
a. Completeness: All required features are implemented and work as
expected.
b. Code Quality and Organization: The code is well-structured, commented,
and follows React best practices.
c. Design and User Experience: The application is responsive, visually
appealing, and user-friendly across devices.
d. Technical Proficiency: Demonstrates advanced knowledge in React,
Redux, and external API integration.

This enhanced task is designed to challenge the candidate's skills further while
remaining achievable within a 2-day deadline. It requires a strong understanding of
React and Redux, the ability to work with APIs, and the application of responsive design
principles, providing a comprehensive assessment of the candidate's capabilities. You
will be provided with a maximum of 48 hours to complete this task after which
your application will automatically be canceled.

CONTACT

Please feel free to contact us in case you have any questions regarding anything about
this internship at [email protected]. Please put “React JS Internship” as the
email subject so that we can filter out your submission/question before anything else.

You might also like