peakshift / makers.bolt.fun Goto Github PK

Do we want to add screenshots for the projects ourselves or wait for the creators to do this?

Do we want dark mode for this website?

Here are a few of the updated design changes to the Stories 🎙 pages on BOLT🔩FUN's makers platform...

a). Introduction of a page title in the centre column "Stories 🎙"

b). Underneath this title we introduce a new form of navigation using a combination of chips (Popular | Newest | Following/Saved) + a 'Sort By' time preference dropdown (Daily | Weekly | Monthly | Yearly) over to the right

d). In the right hand column can we add a banner advertising the STW2 hackathon? (as seen in the design). This could be any advertisement we wish, but pre-hackathon it make sense to push our own event!

Is there a design for this? I saw moritz mentioned it in the Slack channel.

It seems there is a bug with counting votes which should be resolved in master. Are the latest functions deployed? And if so are we sure those are called?

This will serve as a meta issue to gather requirements.

Task: Create a list of v1 badges

Task: Map discord roles to badges

Scenario: Connect discord to maker profile

Scenario: Update profile when discord role is added/removed

1. Given I have created an account on makers.bolt.fun
2. And my username is "janedoe"
3. And I have joined the bolt.fun discord server
4. And I have the discord role/s of "maker"
5. When I view my profile "makers.bolt.com/@janedoe"
6. Then I see "maker" as a ...

ATM this action has a side menu of "Story | Question | Bounty". I think that as users will take the action of creating one of the above directly through the page "e.g Story, Discussions (future), Bounties (future)" , it seems odd to bundle them up together. So, how much work would it be to remove these options and just insert a "X" icon or back menu? See the design attached.

Open Question: do we allow users to save draft stories? If so, we could use a right column of draft titles

Current design:

New design:

• Centred content (910px wide)
• Back/Exit button

If it's the users first post (or if they don't have any saved drafts, the markdown editor is centred), like so 👇

If the user has some saved drafts, we can move the markdown editor over to the left and create a "Saved Drafts" column to the right, like so 👇

Alternatively, we could also keep this column (even if its the users first post) and use it for "Suggested stories", such as "Your maker story", or "What i've been up to this week", like so. Then if the user has drafts, we can just stack this column...

Problem
Currently we only have 3 topics for Stories (bitcoin, lightning, gaming)

Solution
Let's create some more...

• 🎙 Podcast
• 💻 Workshop
• 🚦 Standup Report
• 🗓 Event

Markdown Editor

Post Detail Component

As seen in the recently designed page title elements (e.g Stories 🎙, Hackathons 🍿)... we are mixing and matching the use of emojis throughout the platform when it comes to category pills, page titles, etc. However, in the dropdown menu under Community section we are differentiating the pages visually using icons (similar to the emojis, but still a different style).

So, the question is do we keep the icon styles we have or switch everything to emojis? It might be worth deciding now before this version is released and new pages are built out.

Here's a side by side comparison for you to visualise...

NOTE: We can keep the use of emojis in buttons or CTAs (e.g comment, save, share icons etc for actions)

If we decide to use the emojis, we should use the following ones for pages:

• Stories = 🎙
• Discussions = 💬
• Hackathons = 🍿 or 🏆
• Bounties = 🎯
• Grants = 💸

For categories...

• Design = 🎨
• Development = 💻
• Lightning = ⚡️
• WebLN = 🎛
• LNURL = 🚦

for example this query works fine:
mutation Mutation($projectId: Int!, $amountInSat: Int!) { vote(project_id: $projectId, amount_in_sat: $amountInSat) { id amount_in_sat } }

but this throws an error:
mutation Mutation($projectId: Int!, $amountInSat: Int!) { vote(project_id: $projectId, amount_in_sat: $amountInSat) { id amount_in_sat project { id title } } }

Problem
When reviewing the mobile version of the new updates to the makers platform, I noticed that there isn't a back button on this page (unlike the web version).

Solution
Insert back button, like so 👇

Do we have an asset we want to use for this?

Looks like when you click on a category it does not initiate a filter yet, did anyone have a plan on how they wanted this implemented?

Making a tip to a project consists of three steps:
1- Getting an invoice from the backend to the client
2- Confirming the invoice from client and sending it using a webln provider
3- sending the payment preimage to the backend after completion to confirm it.

But currently, it seems that paying invoices through alby provider is not returning a preimage variable, only "paymentHash" and "route"

FYI they would need to be stored as markdown in order for their render to be customised at any point.

Issue
ATM when a user clicks on the Hackathons page, the main view is empty. This is because the default view is set using the "Upcoming" or "Live" filter view, and we have no upcoming hackathons...

Solution 1
In the left column I suggest having the Header, Sort By chips in the side menu to remain stylistically consistent, "List your hackathon" button, plus and adding Fulgur’s promotional banner.

For the right hand grid (3 columns) and suggest showing "All" as the primary filter, showing all of the hackathons in time order from newest to oldest. We then use an empty state for filter options which do not have any hackathons listed (e.g Live or upcoming).

Solution 2
In the left column we could remove the chip navigation entirely, and just show the hackathons in time order from newest to oldest, thereby removing the need for an empty state.

I think I prefer Solution 1 as it could scale a bit better with time and can reuse stylistic navigation elements.

You might want to set a DB connection limit: https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/connection-pool#setting-the-connection-pool-size
and/or upgrade the elephantsql.com instance to a paid plan with a higher connection limit.

also:
https://www.prisma.io/docs/guides/performance-and-optimization/connection-management#serverless-environments-faas

Problem

• in the database, users display name is currently set as unique which prevents two users called John from showing this

Solution

• username would need to be unique, not display name

Great job on the initial implementation @MTG2000, the application is really coming to life! I've viewed this page on two different devices and have been generally impressed by how responsive you've made it so nice work!

Here are a few thoughts and ideas for improvements after taking a look through:

Components

1. Organism / modal / project-details

• a). Screenshots: Could we incorporate a bit of spacing between the title and the screenshot grids? Currently looks like this is set at 0px and it looks a bit cramped.

• b). Screen grid spacings. Currently set to 24px x 20py. Can we make this either 16x16px or 24x24px?

• c). This component on mobile uses a vertical grid layout for the screenshots. Could we arrange them into a 2 column grid or at least get them to fit the full width of the modal.
  

• d). Project tags. The spacing for these tags seems a bit too large. Could we use the same spacing for buttons which is 16px rather than 24px.

2. Full-width header navigation / Mobile

• a). The alignment on mobile looks like this component is left of centre. It should be in line with the rest of the page grid.
  

3). Organism / App-list

• a). The spacing between the Header and the list horizontally scrolling list of applications is 20px + an extra 10px padding from the molecule/app-list. Can we make this 24px total?

4. Organism / modal / ln-url

• a). You seem to have used a darker colour for the link text as opposed to the primary colour used elsewhere in the application. This colour fails the AAA colour test for 7.1 contrast (WCAG), however one hue darker (Primary / 700 #4230B7) passes. If we aren't using Primary 600 as seen elsewhere, let's try keep it as close to as possible.

5. Organism / modals / upvote / select-amount

• a). Spacing between pre-set amounts and micro-copy. Let's make sure this is a factor of 4/8px. So perhaps 16px? or 12px?

6. Organism / modal / wallet

• a). Currently this wallet modal is centred. I think eventually we'll want this to open just below (aligned) to the button itself in the top right hand part of the screen. This may not be a focus for now but worth baring in mind.

7. Mobile / Menu

• a). Reduce this spacing to either 24, 32, or 40px max.

Spacings, Layouts, and Grids

• All spacings should adhere to the units of 4 or 8px (4, 8, 12, 16, 24,3 2, 40, 48px...). You seem to have done a really good job on this so well done :) The only complications seem to be when we combine two components with their own paddings (e.g 1b). above)

Interactions & Behaviours

• a). Scrolling behaviours for lists. Horizontally scrolling app lists (e.g Hottest apps). At the moment these apps scroll continuously like a wheel feature. However, these lists should have a fixed starting point (i.e {First App}) on the left, and then scroll horizontally to the right until the final app on the list has been reached. We can use a slight elastic feel when attempting to continue scrolling to indicate that the final app has been reached and then have to scroll back to the left. This interaction would be similar to something like Netflix.

Responsive scaling

• I have been a little bit confused as to the responsive nature of the application. If I "inspect" the page on my desktop computer and scale down to a smaller screen, the app list in particular do not scale and they begin to overlap. However if I go straight to the web page on my mobile it works fine. For reference though, here is a screenvideo if I scale down from large to small screen size.

Here's an example...

https://www.loom.com/share/e06bd8fa1a5c4e05b4ef2a75ca441098?sharedAppSource=team_library

This WIP property would allow projects to be filtered from a query

future

1. Makers can set milestones
2. Makers can post project updates

Problem
Some markdown editors (such as Medium) allow users to add a quote to their story with the use of a text editor toolbar shortcut/button. Take for example Medium or even Github. Currently, BOLT🔩FUN's editor does not contain this button.

Solution
Insert the > Quote button shortcut into our text editor toolbar. If a user highlights text and clicks it, it should show in preview form rather than raw markdown form.

Is this what the header is supposed to look like or should we make it better?

Problem
ATM even if a user uploads a header image to a story, it doesn't show up on the actual story page. This was originally not accounted for in the design.

Solution
Can we include an image within the story page centre card? As seen below 👇

FIGMA link: https://www.figma.com/file/2rWlc79smZ9oyWSZHKhUUy/BOLT%F0%9F%94%A9FUN?node-id=884%3A53304

This screen is missing the asset lightning-big.svg, does someone have this that we can add?

Problem
It seems like some of the cards have different border radiuses. This might be due to their size which creates a distorting visual effect.

Solution
Check all radiuses and make sure they adhere to units of 4.

Mobile: 12px
Web:16px

an api that will return a bunch of hottest projects according to some specific criterias
the api needs to be in this form:

query HOTTEST_PROJECTS {

  hottestProjects {

    title: String // Will mostly be "Hottest"
    cover_image: String // A url for a cover image to display
    apps_count: number // The number of hottest projects available

    project: [Project!]!

  }
}

1. We need to have a service to handle the uploading of static image content.
2. Uploaded images need to be transformed. Some services also provide such functionality built-in to the same offering / API.
3. We currently use CloudFlare and Netlfiy, so it's preferred to use at little services as possible. Cloudflare currently offers an image store.
4. There are various resources that could include images (stories, comments, user profiles, projects, ...) they all should be using this image upload and retrieval service.

Potential Solutions

• https://www.cloudflare.com/products/cloudflare-images/
• AWS S3

Problem
Whilst creating a post, we ask users to insert tags. The UX of this process is a little confusing because of the pre-text inside the input field. My impression was that I could type "webln, alby, ..." and click enter to create separate tags.

Solution
Perhaps the pre-text should be something like "Enter your tag and click enter. You can add multiple tags to your post". Does this make sense?

Problem

• Border on various cards are 1px (PostDetailsPage/Page component)

Solution

• Borders on various cards should be 2px

use cases.

1. tutorial series
2. project updates / PPP Reports

Problem

• there is not currently a commenting feature active
• the vote count becomes redundant where this component is used (PostDetailPage/Page/Default)

Solution

• remove the vote + comment counter

Issue
Currently, if I copy markdown from another editor (either in raw or previewed format), it currently does not translate to the BOLT🔩FUN markdown editor, converting it into a previewed format. I often have this issue when copying markdown text from one editor to another (e.g ClickUp -> Slack, Github, Discord, Medium, etc)

Solution
Would it be possible to have this functionality? That way, makers will be able to copy + paste their markdown editions of stories straight into our editor and hit "Publish" without having to translate the text themselves.

Problem

• Given there is a post with a database ID of 6 and a title of "STW1⚡️: Introduction to Alby"
• And the user public key is "b5f3729e5418905ad2b21ce186b1c01d"
• When there is no username set
• Then the url path of the article is /blog/post/Story/6
  • this blog/post/story are redundant
  • Story is capitalised
  • last segment is a 6 which doesn't give an indication of what the article title is

Possible solution

• Given there is a post with a database ID of 6 and a title of "STW1⚡️: Introduction to Alby"
• And the user public key is "b5f3729e5418905ad2b21ce186b1c01d"
• When there is no username set
• Then the url path of the article is /story/stw1-introduction-to-alby-b5f37

OR

• Given there is a post with a database ID of 6 and a title of "STW1⚡️: Introduction to Alby"
• And the user public key is "b5f3729e5418905ad2b21ce186b1c01d"
• When there is a username set and it is "mtg"
• Then the url path of the article is /mtg/stw1-introduction-to-alby-b5f37

Note

• Please ensure older URL schemes redirect to the new structure either on the server side or in the frontend since links have been posted on twitter already. Alternatively a custom 404 page for stories can provide suggestions of articles that could match

Problem

1. for staging, currently authentication is set to the preview domain on netlify
2. once we move to makers.bolt.fun it will cause problems with accounts as new keys are going to be derived and people will lose access to their accounts
3. then when makers.bolt.fun moves to just bolt.fun it will again cause problems as lnurl-auth keys are derived from a specific domain

Possible Solution

use auth.bolt.fun as a generic authentication endpoint that would be less subject to change

@fiatjaf has created a commenting widget after a discussion about the topic with him some weeks ago. It is built in react and is a great starting point for us to implement on stories.

One of the limitations of this current widget is that it does not support threaded conversation, but I've learned that Nostr

https://github.com/fiatjaf/nostr-comments-widget-react/blob/master/src/widget.jsx

• fiatjaf/nocomment#7
• fiatjaf/nocomment#4
• fiatjaf/nocomment#2

The initial goal was to create something along the lines of Disqus, which we can still do but since we need comments first to be able to increase engagement on posts on the platform we can bookshelf it until we learn more about Nostr and how to go about creating this widget. There are some open issues in the repo which can help in that future planning.

It seems currently a hard coded 1 is used as projectId

this means all votes are counted for project#1

Whilst uploading a new story to the makers platform, I noticed a few issues with the platforms markdown editor. Here are some thoughts and potential ideas of how we could improve them (this might be limited by the markdown integration we use).

a). Every time I want to add a title I have to highlight the word and scroll to the top, click T... it then takes me back down to where I was typing. This was annoying when I wanted to change an Italicised word to only Bold. I had to highlight it, scroll up, click off 'Italic', it then shot me back down the page, I had to highlight it again, scroll up to the top and click 'Bold' ... not so annoying when it's only once but when it's over and over it could get frustrating

How can we solve this?
It seems like the easiest way to solve this might be to fix the height of the ui component which contains the bulk of the story text, whilst fixing the markdown shortcuts to the top of it (e.g H B i ) .. I have attached a screenshot of the Github markdown editor for reference! If the user then has their mouse within the text box and scrolls, they can scroll the content of their writing easily without having to constantly go to the top of the website page and back over and over.

This second point is to do with editing functionality after a post has been created...

b). When I clicked 'Edit post' and then saved it, it actually created a duplicate of the post! This seems like a backend issue rather than UI

a new query for getting projects by search text is needed in the format:
query Query($search: String!) { searchProjects(search: $search): [Project!]! }

https://makers.bolt.fun/hackathons

• Upcoming
• Live
• Finished

• project need 'description' and 'screenshots' fields
• category needs 'apps_count' and 'cover_image' fields