This is one of the issues I am currently working on and it's absolutely important. Here are the requirements and what's going on:

• I have the form data stored in the local storage.
• I am fetching the data from local storage to convert these form data into MDX (You can read about MDX here)
• I use TSX to make my markdown components and import them to the main mdx file.
• Finally, I have to convert this MDX to a plain markdown and display this markdown on the next page (after the form submission).
• This markdown text can be displayed in a textarea tag for others to copy the markdown.

The above are the steps to solve this issue. However, you can start working on the fourth step since the previous three steps are done already.

The current navigation bar on the mobile view is just the same as the desktop view except smaller. I would like this navigation bar to be a hamburger menu.

• The navigation bar has to be smooth on opening the menu and closing the menu, i.e., use transitions.
• The navigation bar has to cover the entire mobile viewport with a dark background in low opacity.
• The icons for hamburger and "X" must either be used from react-icons or can be done using plain CSS.

The current project follows a basic level of accessibility, for instance, HTML semantic tags. However, the project doesn't incorporate the use of aria-labels and other accessibility tags. To anyone who is contributing for accessibility, you must be sending PRs for each page and not send a huge PR.

The current project doesn't have any tests to make sure the code is secure. Here are the guidelines when it comes to writing tests:

• All the unit tests must be included in the root directory under the tests folder
• Even though there is no defined structure for the tests folder structure, the tests folder structure may follow the same structure as the main project structure except that each folder has to be appropriately labeled.
• You must use Jest as your testing framework.
• Your PR should only address testing of either one or a maximum of two components. If you want to write tests for more components, send the appropriate PRs for each component.

The current readme is just a Nextjs-generated readme and has to be updated. The readme has to include these sections (not in order):

• Small introduction
• Setup documentation (must include commands to set up the project)
• contributing guide (keep it short) and should link to CONTRIBUTING.md
• tech stack used

You may include other sections as you wish but the above four must be included.

The current website design is pretty minimal but boring. Here are some things you can work on:

• Main page
• Contact page
• About page

Since this is a small but good issue to work on, you can design and develop all the above-mentioned pages and send them as one single PR. We can discuss here more about what colors, designs, and typography to use. Once all these are decided, you can start working on the issue. Plus, you can add some information to the above-mentioned pages but has to be appropriate to the project.

The main form doesn't have any kind of indication to know whether a certain input is handling valid input or not, or whether a certain input is required or not. Here are some of the things you can work on:

• Certain fields are considered required and there are some fields that are multiple in number but only some of them are required. If a user doesn't fill these inputs and tries to submit the form, it has to be alerted by indicating in red which fields are required.
• There are many fields that handle certain types of inputs like numbers and links. The user has to give the correct input and has to be alerted in case the user provides an invalid input. For instance, if a user provides a number for an input that only accepts links, then it has to be alerted just under the input that the user must provide a link.