Frontend Task
Task overview:
You will be working on an existing Course Builder project. This tool allows users
to create and organize course content by adding links, uploading file ( PDFs),
and structuring them into modules.
The provided codebase includes partial functionality. Your job is to:
● Debug and fix existing issues in the base code.
● Implement missing validations.
● Extend existing functionality to match the required behavior.
● Improve the modularity and structure of the code where needed.
● Ensure overall usability and polish as per provided designs.
You do not need to build this from scratch—a base React codebase is shared
with you to work on. Use of AI tools is permitted.
Codebase :
https://drive.google.com/file/d/1wZx15dJoHka4LIJ5v5vigMGPAr9Fkkk4/view?usp=drive
_link
Task details:
● Add a module (partially done in provided codebase)
○ Users can create new modules to organize course resources.
○ Modules can be renamed or deleted as needed.
● Add a resource (partially done in provided codebase)
○ Users can upload files from their devices, including images, and PDFs
○ Once uploaded, resources can be renamed or deleted.
● Add a link
○ Users can add links as resources.
○ Links can be edited or deleted.
● Drag and drop
○ Users can reorder both resources and modules.
○ Resources can be moved within their current module and across modules.
● Outline
○ Display an outline of all the modules in the course builder.
○ Clicking a module in the outline scrolls the page to the position of that
module.
○ Scrolling the page also updates the highlighted module in the outline.
● Search
○ Users can search for resources and modules.
○ If a module matches the search criteria, it should be displayed with all its
child resources.
○ If a resource matches the search criteria, it should be displayed with its
parent module.
Please note:
● The code should be scalable and maintainable.
● No need to implement a backend for this task. The data can reside on the
frontend.
● There are no restrictions on the libraries to use. Choose whichever seems
best suited for the task.
● Host your finished task on the web, you can use Netlify, Vercel, etc.
Resources:
● Figma designs - Link
● Helpful libraries
○ react-dnd
○ react-icons
Things we are interested in:
● Completeness of the functionalities
● Bug-free code that covers all edge cases
● Compliance with provided figma design.
● Logic and data structures used
● Modularity and reusability of the code
FAQs:
Q: Do I need to store images and files on the cloud?
A: No, you can store them locally.
Q: Can I add resources without creating modules?
A: Yes, modules are not required to add resources.
Q: Can I add resources outside of modules?
A: Yes, resources can be added outside of modules.
Q: How can I add resources inside a module?
A: By dragging and dropping resources inside a module.
Q: Can I move resources from one module to another?
A: Yes, resources can be dragged and dropped from one module to another.
How to submit:
Please email your submission to the following address.
To: internship@toddleapp.com
Subject: <Your name> - <College shortname> - Frontend task
Include the following (all items mandatory – submissions missing any of these
will be rejected):
1. Google Drive link to your source code ZIP (excluding node_modules)
2. Hosted URL of your project (Netlify, Vercel, etc.)
3. Loom video walkthrough (~3-5 minutes) covering:
○ What bugs you identified and fixed
○ What features you completed or extended
○ How you have used AI for development.
○ A brief overview of your code and file structure (Optional)
4. Steps to run your project locally
For any clarifications contact: soumendu@toddleapp.com
Important:
We condemn plagiarism. Please maintain the dignity and originality of your
work. We will disqualify all possible related submissions if we suspect any
attempt towards copying. Also, do not upload your code to any VCS such as
GitHub, GitLab etc.
