Scoop Composition with Jodit/QuillJS

[0mBudsMan]

Issue Title:

"Create Responsive Scoop Composition Page with Text Editor (preferred: Jodit or QuillJS)"

Description:

Objective:

Implement a responsive page for composing scoops with a form that includes input fields for Headline, Location, and a text editor library. Emphasize the usage of the specified font for the page styling.

Tasks:

Task 1: ComposeScoopPage Component

1. Description: Create a React component for the scoop composition page (ComposeScoopPage.js).

2. Responsiveness:

   • Implement a responsive layout for the entire page.
   • Ensure the page looks great on various screen sizes and devices.

Task 2: Form Component

1. Description: Create a reusable Form component (ScoopForm.js). You are supposed to use formik library for the same, and for validation, use yup

2. Form Fields:

   • Include input fields for Headline and Location.
   • Integrate a TEXT_EDITOR_LIBRARY (preferably Jodit or Quill.js) for composing the scoop content.
   • Ensure that headline, location, and the content from the text editor are not empty before submission.

Task 3: Text Editor Library (most important)

1. Select a Text Editor Library: Choose a suitable TEXT_EDITOR_LIBRARY for composing scoop content. Two recommended options are Jodit and Quill.js.

2. Jodit Brief (if chosen):

   • Jodit is a powerful and lightweight WYSIWYG editor.
   • Visit the Jodit GitHub repository for documentation.
   • Ensure Jodit provides features like text editing, color application, bold, italics, and image attachment.

3. Quill.js Brief (if chosen):

   • Quill.js is a modern WYSIWYG editor with a simple API.
   • Visit the Quill.js website for documentation.
   • Ensure Quill.js provides features like text editing, color application, bold, italics, and image attachment. Make sure you add all the options necessary for formatting, like bold, italics, coloring of text, embeding an image, making a header, etc. Add all the format options provided by the library out of the box

Task 4: Styling and Typography

1. Styling:

   • Implement styling based on a clean and visually appealing design.
   • Use the specified font (in assets section in figma) for consistent typography throughout the page.
   • Make sure the design is visually appealing

2. Typography:

   • Use the specified font (refer assets in figma) for styling the page.
   • Apply the font for various elements including headlines, form fields, and text editor content.

Task 5: Integration

1. Integrate Components:
   • Integrate the Form component and the chosen Text Editor Library within the ComposeScoopPage component.

Additional Information:

• Use state management (React Context, Redux, etc.) as needed.
• Write tests for the page, form, validation, and styling logic.
• Ensure that the page provides a user-friendly and visually pleasing interface.
• Test the page on different devices to confirm responsiveness.

Deadline: 36 hours

Few Important Points and Summary:

• [ ] Create a form component having headline, location, tags (individual words' array). For forms, use formik
• [ ] Embed a react rich text editing library (preferably Jodit or QuillJS)
• [ ] Store the content in form of HTML in description attribute

[amanrubey]

Claim

[QuantTitan]

claim

[captainflatbelly]

claim

[kushal7201]

claim

[0mBudsMan]

claim @QuantTitan Pls make this done in 36 hours

[QuantTitan]

@0mBudsMan please unassign me as I am still in the process of learning this stack and hence unable to freely execute the task

[Rohit-110]

@0mBudsMan Claim

[kushal7201]

Claim

[0mBudsMan]

@0mBudsMan Claim

@Rohit-110 make this done in 36 hours. For any issues, ping me, I'll share the resources.