Playground Feature: Markdown READMEs

[psiemens]

👋   If you are interested in working on this issue, please check out the Getting Started guide on HackerEarth!

Description (Problem Statement)

Flow developers use the playground to learn, experiment, and share Cadence code. Often times, playground project links are passed around as examples and learning materials for others to use. However, the playground does currently do not provide developers with a way to describe what their projects do and how their code works.

The goal of this task is to add a feature to the playground that allows developers to add a written description to their projects, similar to README files in git repositories.

Experience Required

• Strong proficiency with TypeScript and React (frontend)
• Good proficiency with GraphQL
• Good proficiency with Go (backend)
• Good understanding of Cadence
• Good UX/UI design ability

Minimum Feature Set (Acceptance Criteria)

• There should be a section of the playground UI that allows the project owner to enter the following information:
  • A title for the playground project
  • A (brief) description of the playground project
  • A README in Markdown format.
• For viewers of the playground project, the README should render as HTML.
• The title and description should populate the page title and description metadata tags.

Extension (Optional) Feature Set

• Allow the project owner to include clickable links in the README to switch between accounts, transactions and scripts.

Software Requirements

• Your code (both frontend and backend) must prevent any forms of attacks on users. Markdown code should be always sanitized.
• Please follow the existing design patterns used in both the frontend and backend codebases.
• Whenever possible, consider using existing 3rd-party libraries (e.g. for Markdown rendering).

Milestone Requirements

1. Create wireframe mockups for the new UI.
2. Implement UI changes.
3. Add support for storing and loading the README data on the frontend.
4. Add support for storing and loading the README data on the backend.

Resources

• Playground frontend repository
• Playground API repository

[MaxStalker]

Hey, Flow Surfer!
My name is Max. I am core member of Developer Experience team and I will be your Point-of-Contact for this task.
If you stumble into any challenges with this task, feel free to contact me via replies to this issue or over Flow Discord (my handle is MaxStarka#5714).

Looking forward to work with you! :)

[hichana]

TeamExponential members:
https://github.com/justjoolz
https://github.com/hichana
We plan on completing first milestone by Thursday of this week if that works @MaxStalker

[psiemens]

We plan on completing first milestone by Thursday of this week if that works @MaxStalker

Yep, that works! Just saw your submission :)

[hichana]

Update -- we should be submitting all of the remaining milestones either this week or next. Our work is almost completely done but we are considering how to mitigate one bug.

[MaxStalker]

...but we are considering how to mitigate one bug.

@hichana Let me know if you need any help from my side :)

[hichana]

Thank you @MaxStalker if you have time on Monday it might help to demonstrate the bug to you via screen-share. Please let me know if you are able to meet.

[hichana]

Hello @MaxStalker, we have completed our 4 milestones for this FLIP issue. Please find them here for your approval:
#40
#81
#82
#83

Thank you

[MaxStalker]

All 🎉 🎉 🎉 🎉 milestones were reached byTeamExponential!

Great work @hichana and @justjoolz!
I hope we will be able to collaborate more in the future 🙇

[hichana]

Same here, thanks @MaxStalker!!!

[kimcodeashian]

Good day Team Exponential (@hichana, @justjoolz)

Thanks so much for all your hardwork & participation. In order to finalize winners & prepare for prize payout, we'll need the following actions from your end.

Please provide the following information by Nov 17, 2021 (in this GH Issue is fine):

1. Team Information

• Team Members Information - Github Username + Email Contact + Percentage of prize allocation (total should = 100%)
• All mentioned members MUST react to the post with a 👍 which will act as confirmation that the information is correct, or a 👎 to indicate that the information is not correct.
• We will be reaching out via e-mail

🎖IMPORTANT: We will only proceed with prize payouts once all members have confirmed with 👍 on the post.

2. Video Demo (optional)

• Please provide a 5-minute video demo to be featured & showcased in the FLIP Fest Closing Ceremonies
• Link format & Downloadable (eg. Google Drive, Vimeo)
• Content Format (Problem Statement, your work / how you solved it, final outcome)

We will be hosting Closing Ceremonies on November 23rd, 8AM PT where we'll having closing remarks from Dete & will be announcing the winners! I'll share the details here before Nov 17.

[hichana]

Thank you :)

Team Information:

• Github Username: hichana and justjoolz
• Email Contact: [email protected], [email protected]
• Percentage of prize allocation: hichana 50%, justjoolz 50%

[kimcodeashian]

Hey folks,

We've received and reviewed over 82 submissions! What an amazing community on Flow! To commemorate all the hard work done, we have finalized winners and will be announcing them during our Closing Ceremony on Nov 23rd, 8AM PT. Be sure to join us - there may be some attendance prizes & a keynote from our CTO, Dete 😉!

RSVP here so you don't miss out! See you then!