Scribd
Upload
50 views4 pages

(F09-CB) Frontend Task

The document outlines a frontend task to build a course builder application using React. It allows users to create modules, add resources like images, PDFs and links, and drag and drop items to reorder them. The submission should include source code, hosted URL and explanatory video.

Uploaded by

kazefiledownloader
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views4 pages

(F09-CB) Frontend Task

The document outlines a frontend task to build a course builder application using React. It allows users to create modules, add resources like images, PDFs and links, and drag and drop items to reorder them. The submission should include source code, hosted URL and explanatory video.

Uploaded by

kazefiledownloader
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Frontend Task

Task:
Create a “Course Builder,” which allows users to create and organize

course content. Users can add links, upload images, PDF files, and

create modules to categorize these resources systematically.

Task details:
● Add a module

○ Users can create new modules to organize course resources.

○ Modules can be renamed or deleted as needed.

● Add a resource

○ 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.
Resources:
● Figma designs - Link

● Helpful libraries

○ react-dnd

○ React-icons

Note:
● Use only React for the task.

● The code should be scaleable and maintainable.

● No need to implement a backend for this task. The data can reside

on the front end.

● 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.

Things we are interested in:


● Completeness of the functionalities

● Bug-free code that covers all edge cases

● Compliance with design requirements

● 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: [email protected]

Subject: <Your name> - <College shortname> - Frontend task

Along with:

1. Google drive link of your source code zip

● Be careful of the sharing permission.

● While creating zip, don’t include the node_modules folder.

2. Hosted URL [Netlify, Vercel etc..]

3. Explanatory recorded video of your application

4. Steps to execute your application

For any clarifications, contact: [email protected]

Important:
We condemn plagiarism. Please maintain the dignity and originality of

your work. If we suspect any attempt to copy, we will disqualify the

submission. Also, do not upload your code to any VCS such as GitHub,

GitLab, etc.

You might also like