AulaCube Technologies Pvt Ltd.

www.aulacube.com

AulaCube Frontend Internship assignment

This assignment is designed to provide us with insight into your hands-on

programming skills, problem-solving abilities, and your approach to software
development.

Below, you will find two questions: The first question seeks to delve into your
past experiences, asking you to reflect on a challenging backend project you've
worked on. The second one is a coding assignment, which aims to evaluate your
technical capabilities with Java Spring Boot and database management.

Together, these questions are intended to showcase your proficiency in backend

development, your capacity to learn from real-world scenarios, and your
potential for growth. Please read through each question carefully and provide
your responses in the format requested.

Question 1:
Describe a Complex Frontend Project Experience
We're interested in learning about a Frontend project that significantly
challenged you. It might have been part of an internship, academic work, or a
personal project. Please provide a succinct overview, touching on these aspects:
• Objective & Scope: What was the project aiming to achieve, and what
were the boundaries of your work?
• Technology Used: Which tools, languages, and databases did you work
with, and what informed those choices?
• Challenges & Impact: Can you describe any hurdles faced along the way
and their influence on the project's trajectory?
• Outcomes: What was the end result, and upon reflection, what insights
have you gained?
A single page PDF is sufficient, and visuals are welcome if they enhance your
explanation. Remember, we're keen on the substance of your technical journey,
not the style of your writing.
AulaCube Technologies Pvt Ltd.
www.aulacube.com

Question 2: Coding assignment

Objective:
● Build a Task Management Application using React that allows users to
add, edit, delete tasks, and mark tasks as completed.

Components:
• Task List Component:
○ Display a list of tasks with the task name and status (completed or
not).
○ Allow users to mark tasks as completed by clicking on a checkbox.
○ Include a button to delete tasks.
○ Provide a visual indication of completed tasks (e.g., strike-through).
• Add Task Modal/Form Component:
○ Include a modal or a form to add new tasks.
○ Fields in the form:
■ Task name (text input).
■ Task description (text area).
■ Priority level (low, medium, high - use a dropdown).
○ Validation: Ensure that the task name is required.
• Edit Task Modal/Form Component:
○ Allow users to edit the task name, description, and priority.
○ Provide an edit button for each task that opens the edit task
modal/form.

Requirements:
• Task List:
o Utilize the Task List Component to display tasks.
• Add Task Modal/Form:
o Utilize the Add Task Modal/Form Component for adding new
tasks.
• Edit Task Modal/Form:
o Utilize the Edit Task Modal/Form Component for editing tasks.
• Routing:
AulaCube Technologies Pvt Ltd.
www.aulacube.com

o Implement routing using React Router to navigate between the

task list, add task, and edit task pages.
• State Management:
o Use React state within each component to manage their
respective functionalities.
o Consider using context or state lifting to share state between
components.
• LocalStorage:
o Save the tasks in the browser's local Storage so that the tasks
persist even after a page refresh.
• Styling:
o Apply a responsive design using CSS or a CSS framework of your
choice (e.g., Bootstrap).
o Ensure a visually appealing and user-friendly interface.
• Testing:
o Write unit tests for critical components (Task List, Add Task
Modal/Form, Edit Task Modal/Form) using a testing library like
Jest.
• Bonus Features (Optional):
o Sorting tasks based on priority or completion status.
o Pagination for the task list.
o Adding due dates to tasks.

Submission Guidelines:
• Create a GitHub repository for your project.
• Provide clear documentation on how to set up and run the project.
• Include a README.md file explaining the project structure, design
choices, and any additional features implemented.
• Include screenshots or GIFs demonstrating the functionality of your
application.
• Submit the GitHub repository link.