lesson cards on the track page have a fixed small width:

To-do post MVP

• create a video for downloading a Zerion wallet with a quick mention of everything in the lesson, e.g. good developer practices, creation of private keys, choose new wallet or import old, retrieval of private keys

Question:

• is adding a video, e.g. with Loom, 'a big deal'? And what is the rationale to do, or not do, something with LivePeer from a dev point of view?

FundamentalsPage mobile design

screenshoot for reference:

Figma url: hfigma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=KRCAkHTm2HHZIEaM-0

TrackDetailPage leftside stepper for topics and subtopics

screenshot for reference:

Figma url: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=sL4qGWWiJ8y2k4mr-0

The following only refers to pieces of text with no other 'punctuation requirements', i.e. bullet points and the presence of (###sub)##topics seem to be naturally creating a space on the rendered page.

At the moment, when we leave a space/multiple spaces between text in the .mdx it does render to the next line, but it will not render a space.

If we want to get a break line between paragraphs/chunks of text, we need to insert a
tag. Is it possible to eliminate this need for
break-line tag?

as discussed in the weekly sync:

• add Academy logo to upper left corner on homepage and track pages. (assets and designs within figma.)
• Academy logo links back to homepage
• change "Homepage" navbar text to "Home"
• change Home button icon to one better suited, e.g., a house icon
• adjust navbar styling to accommodate the logo and text change

fonts fail to load on the staging site: https://academyv2.vercel.app/ -- i'm assuming that would carry over to prod, but correct me if wrong.

when porting v1 content over to this repo, some content shared between tracks has been duplicated to ship the mvp. lets dedupe before fixes start to be applied in one place and not another. e.g., the solidity intro lesson is shared by the erc721 and erc20 tracks.

Footer mobile design

screenshoot for reference:

Figma url: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=sL4qGWWiJ8y2k4mr-0

For the time being, we have some key components to start building the FundamentalsPage page on the academy app of our project.
The design looks at follows:

Figma file URL: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=1GnuKRa4jQqpvpvF-0

• We don't have any "list" of all the tracks, I encourage to complete this tasks just developing the page with static cards (it can an array of objects - that later will be updated for the fetch GET response from the backend)
• We don't have any mobile design, yet
• We will need a scrollbar placed, there is one design reference of how it could look in the figma file, here:
  
• I will ask to work on a feat/fundamentalspage branch and when ready, create a PR to main branch - we will have a PR Preview Vercel URL with the PR

• update X icon and change it for the old Twitter one

Is it possible to integrate the pomodoro timer to lesson page headers?

• yes
• no
• if no => action: remove references to it throughout lesson body (references to pomodoro and healthy learning in the lesson introduction paragraphs doesn'n need to be removed. it can stay)

figma url: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=Ha3XLdrnvyiXqWDd-0

The v1 SideDrawer looks like this:

And has to be changed/updated to a Modal (using shadcn's Dialog component), to look like this:

The new InfoModal will host Questions components, so take a look at this please

• placeholder images on track cards need replacing
• (for mvp, lessons could use the same image throughout or have a unique image per lesson within the track)

• forgive me if I've missed on a previous convo on this.

At present, the URL hyperlinks that we have in the platform don't look any different to the rest of the text, therefore the user won't recognise a link, unless they hover over it with their cursor.

ask:

• could we have a way where we could identify a URL/hyperlink quite easily?

suggestions:

• It might be nice to have the hyperlink in the same color palette as another feature somewhere else in the designs, e.g. yellow checkpoint modal button. A subtle shade that is close to the surrounding white text might be nice and not imposing, as long as it doesn't compromise accessibility standards

UI/UX Design notes

• design Connect Wallet custom modal
• Claim NFT page ?
• Quiz page/modal ?
• How is the progress of the In Progress tracks works?
  
• How is the time left of the In Progress tracks works?
  
• Footer

Topbar mobile design

screenshoot for reference:

Figma url: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=sL4qGWWiJ8y2k4mr-0

actual banner:

last updated design:

Mostly what is needed to be updated is the pointed Get Started button

For the time being, we have some key components to start building the HomePage page on the academy app of our project.
The design looks at follows:

figma design link: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=1GnuKRa4jQqpvpvF-0

Some notes:

• it doesn't show any scroll bar, but it should have. (There is one in the figma file that can be used)
• This is the HeroSection, and it has a "scroll down" button:
  
• Following we will have "banners section", which looks like this now (will have updates requested on this issue #24 )
  
• And lastly, the footer, which looks like this now (it also will have small updates)
  

scrollbar design reference:

Just chatting with @elPiablo about how we include the POKT's RPC and the Zerion wallet in academy in a non-shilly way

• update Web3 wallets lesson with Zerion
• Replace MM for Zerion Browser Extension where used in Lessons
• update RPC lesson with POKT
• Where RPCs are mentioned elsewhere in lessons, linked to RPCs on POKT Network (Grove, Nodies)

• Connecting to a Frontend lesson contains lots of mentions of a different RPC provider - for the front-end code. This issue will address that explicitly: #118, and therefore we can close this one.

We need to migrate the SideDrawer component styling from Chakra UI to shadcn using TailwindCSS classes.

SideDrawer: https://github.com/Developer-DAO/academy-turbo/blob/feat/v2-mvp/apps/academy/src/components/mdx/SideDrawer.tsx

Please checkout to a new branch from feat/v2-mvp, do you changes in the new branch and the create a PR from the new branch to feat/v2-mvp - this way we are going to have all the updates regarding mvp in one branch, thanks!

we're still figuring out workflows with content partners, but it would be nice to be able to collaborate in github before the content is visible to learners.

simplest solution may just be to add a boolean tag, e.g., isVisible, that we can toggle off until the content is ready. would be nice for this functionality to exist on both tracks and individual lessons.

• it would be great if the all the different quiz modals were wider on the (desktop) page as per Figma design. I estimate they are designed to be 55-66% of the lesson body text.

• Warm-up

• checkpoint questions

• final quiz

• They are very narrow in comparison to the page, and it creates a feeling of being in a very different (learning) environment to the rest of the lesson.

There are four pieces of content from the Fundamentals Track, and they are called/used in NFT Track - Build a Basic NFT lesson (lesson 2):

academy-turbo/apps/academy/src/pages/tracks/nft-solidity
/2.mdx

Unfortunately they aren't rendering.

Where to find it on the page. Here are the first two:

What it looks like after clicking on the button, i.e. the inside of the side-drawer:

There are another three Fundamentals in the lesson. And one more edge case 👇🏼

Is there an MVP fix that I could do? E.g.

• convert the < sidedrawer > components in the lesson 2 .mdx to < lessonInformationalModal >
• copy all the relevant .mdx from each Fundamental lesson into lesson 2's new < lessonInformationalModal > s
• create four sub-directories in public/assets/lessons/2 to store the images for each of the four fundamentals, e.g. public/assets/lessons/2/cli_lesson; public/assets/lessons/2/install_npm
• change the paths of the images in the .mdx to reflect the above change?

The edge case is also in Lesson 2. It's the "Longer Path...." < lessonInformationalModal >

And it's a Fundamental about Decentralised Storage:

We could get away with the edge case for mVP, but the other four are going to be quite obvious.

I guess we could also just add a hyperlink and a little bit of text on what it is and why (IMO, a faster approach, but as far as learner flow goes, messy)

discussed in discord: reduce lesson content width for more digestible reading. needs design specification first.

A lot of unresolved discussion around what learner levels should be, i.e.
Beginner
Elementary or Foundational or Fundamental (all mean the same)
Intermediate
Advanced

or

Beginner
Intermediate
Advanced.

as another example: https://en.wikipedia.org/wiki/Four_stages_of_competence

1. Beginner : Personally and also based on the learning frameworks with broad collaboration areas that I am familiar with, a 'beginner' is someone has walked in the door, and needs tonnes of hand-holding and can't build anything themselves. But they experience everything as being relatively easy - because they haven't been confronted with deeper and broader concepts.

2. Voldemort : i.e. 'foundational'/'fundamental'/'elementary'/'pre-intermediate' / 'in-between' stage:
   this is where someone is aware of what they are trying to do, but can't necessarily get it to work, or they can, but with a lot of effort.
   I think I'm a good example of someone at the very lower end of this scale.

3. Intermediate Whereas someone at an intermediate levels is quite autonomous and confident, has good feeling and grasp for concepts, and...... can
   explain those concepts well. They can also build projects of their own without any assistance. Can give helpful basic mentorship.

4. Advanced: knows what they are doing, knows most of the pitfalls, can automatically see where someone else is going right or wrong. Can delegate tasks without too much thought. Can really see the bigger picture as second nature. Can mentor with ease.

(5. Expert - has probably mentored many times, etc, etc. I believe we don't need a tag for this category......yet. See below)

There are various reasons for having four learning stages instead of three.

1. learners know what we are offering them therefore builds confidence vs despair (too easy or too difficult), i.e. wasted time
2. it lets us know what is in demand
3. we have a better overview of our offering and so do potential authors/contributors - which makes (forward) planning easier for everyone, i.e. in traditional educations terms - building tracks and syllabuses
4. it helps with a clear mentorship 'stack' - delegation is easier to streamline/identify, as each level can identify easily what is above and below, and is therefore an efficient and time-saving system in a decentralised work environment.
5. when we want to invite 'Experts' to the platform, it can work for us in a couple of ways
   a. if we invite an expert to contribute to the platform in what ever capacity, whether that is textual, or as a speaker, it gives a great signal of their social standing in the space, which for others, is something to aspire to
   b. with that signalling value, also comes income
6. ...

There are many more, but just can't think of them at hand.

Create the new "Learn Web3" banner for the home page

It will be placed under the Hero section of the home page.

Notes:

• As for now it doesn't have a mobile version, so don't needed for now.
• Create it on the packages/ui internal package with the storybook story for it
• No need to create the homepage in the apps/academy app yet.

after completing a quiz, the UI doesn't yet reflect any differences.

unless I missed it in the figma, i think we need completed states for:

• within the lesson (e.g., does the button change or get replaced with some text?)
• do the lesson cards reflect a check mark or something?

reference img with today's UI: (success banner + unchanged "take quiz" button)

track page content is skewed to the right of the page on desktop

• track tags can go beyond the card width
• card height is overly tall, after the removal of author names

screeshot:

@uma-l we need to update the partner's banner image with real partner's logos

requested here in case you missed it: #23 (comment)
and I quote:

by kempsterrrr:
Preferred partners we need to display are [Zerion](https://zerion.notion.site/Company-info-brand-assets-b9bfad1ef7b745a7a2e09640f6374ff1) & POKT Network (although this might ultimately be one of the RPC Gateways in their network like [Grove](https://www.grove.city/) - will confirm next week)**

Please can we avoid displaying logos for companies we're not working with? We can add logos as more folks partner with us. Thoughts? (We have API3 coming soon and another unannounced.

@kempsterrrr do we have the final list? It would be nice for uma to have the final list before he starts to work on this.

uma, on the quote you have the links to the assets

Thanks both

Create the new "partner with Academy" banner for the home page

It will be placed after the "Learn web3" banner, on the home page.

Notes:

• As for now it doesn't have a mobile version, so don't needed.
• Create it on the packages/ui internal package with the storybook story for it.
• No need to create the homepage in the apps/academy app yet.

Figma url: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=Ha3XLdrnvyiXqWDd-0

The Quiz component is placed here:

Desired design looks like this:

On the project, you will find the outdated component placed at apps/academy/components/mdx/Quiz.tsx :

When running the app, you can find the trigger button here:

example url: http://localhost:3000/tracks/intro-to-ethereum/1

and the actual outdated design looks like this:

From this PR: #94 (comment)

The sign in modal defaults to displaying two categories of wallets;

• 1st place 'Popular'
• 2nd place 'Other', or 'Preferred Partner'

see ideas and concerns below 👇🏼 images:

It would be nice if we could swap these around and have the preferred partner as the first choice category - caveat, I'm not sure if other wallets (e.g. Trust and Ledger) might show up in that first category as well, and if so, what should the approach be?

Create mobile/responsive designs for all screens

At the moment we don't have any mobile designs on the figma project.
This is highly needed and actually is recommended to start the development from "small" to "big" screens.. (we are doing it backwards now, tho)

Any ETA for this?

Thanks in advance

lesson/track cards have broken styling on screen sizes between mobile and desktop:

We're trying to get D_D partner, POKT, used in our lessons. In this case, with RPC providers

• stems from this PR: #119
• the front-end code in apps/academy/src/pages/tracks/nft-solidity/5.mdx imports alchemyProvider for WAGMI.
• is it possible to change to import and use a POKT Network provider such as Grove or Nodies?
• Grove
• Nodies
  or
• for D_D Grove Perks deForm click here

@kempsterrrr can you verify which of the above links would be correct for us in this instance?

• pertaining WAGMI docs: https://0.12.x.wagmi.sh/core/providers/configuring-chains hopefully can provide an answer if changing providers is possible. I'm not totally sure at a glance.

First of all, I have to apologise for coming late with these suggestions, since the designs have been here long enough. But I didn't realise the visualisation process from Figma designs to an actual living environment of a website platform.

I love the design of the original choice of font, as it looks really slick on the black background. But in reality, it is/was actually not an easy font to read, some of the rounded letters (esp. 'c' and 'o') were easily mistaken with each other. It was very taxing on the eyes and emitting a huge amount of light from the screen. And the contrast with a black background made it even more starkly bright.

It looks like the font got changed in the last couple of days, and that was quite an improvement. But if I'm honest, it's still mega-bright. It's a lot of effort for me to keep looking at the screen for any length of time. In short, it's a distraction from the actual learning material.

If you look at the difference with v1. It is a lot more relaxing on the eyes, because the lines of the font are much thinner, and therefore give off much less light, and there is visual space to digest the words vs the lettering.

The fonts in the modals also need a look. Everything looks like it's in bold.

LessonContentPage layout

Layout and components structure open for the dev taking it

screenshoot for reference:

Figma url: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=sL4qGWWiJ8y2k4mr-0

actual banner:

latest updated banner desing:

What needs to be updated is the Reach Out button and the Image

@wolovim @elPiablo is that image correct? thinking on those logos etc, thanks

TrackDetailPage layout

Layout and components structure open for the dev taking it

Please aim to build the page and components as static as you can, in later tasks we will be updating this work with dynamic integration from the backend.

Thanks!

Figma url: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=sL4qGWWiJ8y2k4mr-0

Contact Details

No response

What is the expected behavior?

renders V2 home page with storybook

What is the current behavior?

Reproduction steps

1. `pnpm storybook:dev --filter academy`
2. open 'http://localhost:6001/?path=/story/page-stories-home--default'
...

Version

No response

Relevant log output

Error: Unable to retrieve application context. Did you forget to wrap your App inside `withTRPC` HoC?

Your Environment

• Version used: v18.17.1
• Environment name and version (e.g. Chrome 39, node.js 5.4): node js
• Operating System and version (desktop or mobile): Arch Linux

Code of Conduct

• I agree to follow this project's Code of Conduct

There is an error being thrown when we try to connect the wallet, exactly after sign in with Siwe.
The error is an status 500 code.
You can check it while Inspecting the console in your browser.

give all content items relevant tags:

• do we have a maximum per item? answer from @markkos - yes - three tags per card on both track card and lesson card

• regarding styling, will more or less tags fit on cards? Will the text on tags be relative to box size?

• answer from @markkos solves both questions - yes - three tags per card on both track card and lesson card

HomePage mobile design

screenshoot for reference:

Figma url: https://www.figma.com/file/YMEIW9uyNGNxtuy1R2tYyU/D_D-Academy-re-do?type=design&node-id=0-1&mode=design&t=f5bqxbK04mXqurm0-0

I would encourage our design team to prototype the designs if possible.
This helps everyone to know beforehand how the app will behave or react. It helps developers to know exactly how each part will look and behave on every scenario instead of using our imagination to guess how to build it.

Another reasons why I found it usefull:

Benefits of prototyping

• It is easier to discover possible design defects very early in the production process.
• It’s easier to design budgets and calendars.
• Similarly, selecting machinery and other production resources is simplified
• The expected durability of the product is known in advance thanks to the tests to which the prototype is subjected.
• You don’t go into production without feedback from the end customer. This allows companies to overcome a lot of purchase objections.
• Prototyping offers space to identify possible improvements.
• It makes it easier to attract investors.

There are many great reasons to make prototypes and to include them early and often in your process, and the four main points are as follows: to understand, to communicate, to test and improve, and to advocate.

@uma-l is this possible?
if so, any ETA?

thank you and regards