I have added markdown input using react-md-editor which replaces the current basic input we have. React-md-editor uses rehype-sanitize to sanitize the input, and uses react-markdown-preview to display the markdown input.

Right now on mobile a user needs to tap twice on a message to start or open a thread. We want that the thread view opens on the first tap.

What does success look like?

The UX for creating opening a thread should be exactly like Slack does it in it's mobile app. (one tap opens thread)

Main changes:

• refactored message component html structure and styling
• extracted avatar component to it's separate file
• removed messages/show endpoint since it was never used
• Removed a bunch of ? by creating a new MessageDefaultSchema
• fix for vertical scrolling on mobile

There are some occurrence where we use the native tag instead of

https://nextjs.org/docs/api-reference/next/image

What does success look like?

We use the nextjs everywhere, never

Posting a long link or URL displays beyond the defined screen area.

What does success look like?

Normal texts, links and urls should all fit within the defined screen area of display, long texts, links and urls should wrap around to fit within the defined area.

We forgot to add indexes to our foreign keys on the town square tables. This is a guide what needs to be done:

https://www.prisma.io/docs/guides/database/using-prisma-with-planetscale#how-to-create-indexes-on-foreign-keys

(I recommend reading the whole post)

Currently if the number of messages exceed the screen view, the input and share button are pushed below the visible section of the screen.

What does success look like?

One must not scroll to be able to type new messages, the input and share button must be visible at all time.

Logout shows Loading... and doesn't redirect to home page.

What does success look like?

After clicking logout you should be redirected to the home page.

Current behavior:

Currently we show the newest message on the top, and load more messages on the bottom

Expected behavior:

We show the newest message on the bottom, and load more messages on the top

Success criteria

• Always load the 20 most recent messages first
• Have to load more button on the top
• Load more will add the messages on top (like discord, slack, whatsapp)

Small issue, but will be quick to fix I guess.

Date is formatted like this: Today at 9:2pm

But we would like to have it formatted like this: Today at 9:02pm

Figma: https://www.figma.com/file/xpxnXvfHCac5ZUqFoo4Rrf/townsquare?node-id=0%3A1

town_square will be our communication app. We will use it instead of Discord, Slack etc.

What does success look like?

We want to have a similar experience to the mobile Slack or Discord app when picking emojis. Please use these apps as a reference when implementing the UX for the emoji picker 😊

Emoji picker component

Use this picker component: https://github.com/missive/emoji-mart

With these settings:

Design

Figma: https://www.figma.com/file/xpxnXvfHCac5ZUqFoo4Rrf/townsquare-app?node-id=305%3A53&t=dWOzI3E47EIFEUs8-0

Let's only focus on making the mobile experience great for now. Regarding interactivity check how slack/discord behaves when adding emojis on mobile.

This is how the desktop version will look like (it doesn't look great but I think we should first make the mobile experience perfect before we focus on desktop):

Data store

This issue is only about the frontend implementation. Which means we'll mock the database with a simple component store (this will be replaced once we're building the backend).

The component store should look like this:

emojis: [{symbol: 👍, userIds: [1] }, {symbol: 🤣, userIds: [1,2] }]

Subscriptions MVP setup. Features included:

• Creation of both future and past posts
• Displaying future and past posts
• Searching for posts
• Updating user settings information

Improve PWA experience and implement best practices: https://web.dev/progressive-web-apps/

What does success look like?

App should be indistinguishable from a native app on android. App should feel snappy and navigation should be intuitive.

Replace the current input message box with react-md-editor.

Use this package: https://github.com/uiwjs/react-md-editor

This is how you set it up for next.js: https://github.com/uiwjs/react-md-editor#support-nextjs

What does success look like?

Functionality:

• Bold
• Italic (we might remove that)
• Strikethrough (we might remove that)
• Link
• Quote
• Code (we might remove that)
• Codeblock
• Ordered list (we might remove that)
• Unordered list (we might remove that)
• Write mode
• Split screen mode (we might remove that)
• Preview mode
• Full screen mode (we might remove that)

Additonal notes

Mobile

Make sure everything works great on mobile.

There should be minimal custom code outside of the provided props from the editor

Try to use the default props and functionality from the component.

https://uiwjs.github.io/react-md-editor/#props

Security

We'll need to sanitize the content.

https://uiwjs.github.io/react-md-editor/#security

Display messages

We'll also need to display the messages correctly. Probably we'll add custom CSS inside of the message component:

<style>
h1 { @apply text-2xl }
strong { @apply text-bold }
...
</style>