aadeshkulkarni / figuringout Goto Github PK

Create a protected endpoint GET /api/v1/tag which returns a list of tags from the database.

Some pointers to setup:

• Tag table already exists in schema.prisma. Run npx prisma generate --no-engine for db migration on your local.
• Seed your database with tags by running npm run db:seed (this will execute prisma/seed.ts script)

Where ?

/blogs

What?

On Mobile viewport, when the content height increases, the 'x mins read' text overrides the blog content, making the UI janky.

Screenshot

Expected behaviour:

The content and "x mins read" should not override in any case.

After signing up, users should be directly redirected to the blog page. However, the issue is that after signing up, users redirect to sign in page and again prompted to enter their email ID and password , which creates an irritating experience for them

Current:

When user visits the signup page, Password Strength: is displayed above the Sign Up button.

Expected:

The "password strength:" should be visible only after user starts typing the password.

Current

When user visits any article, and clicks on the clap button, the following things are observed on the UI

• A loader appears that replaces the clap icon
• After the loader vanishes, the clap icon again appears
• After a while, when the API returns response, The clap icon re-appears and the clap count is changed on the UI causing layout shift of clap icon.

Expectation

When user clicks on the clap icon, the clapping should be more intuitive. The CLS issue causes a bad UX.

• Instead of clapIcon > then loader > then clapIcon | Show only clapIcon
• The shifting of icon when the count increases should not happen. (Always assume the count will take specific width, so that the clapIcon will not shift to the left when the count is painted on the screen)
• Light-weight animation to indicate the user clapped might look good (this is optional and open to other ideas) [refer medium claps for more details]

Docker compose the 2 projects

• frontend
• backend

This is a backend ticket.
The current route returns all the blogs.
Instead, add pagination to the /blog/bulk route with query params like offset & pageNum.

Current:

All articles listed in the /blogs page are unsorted and shown in the order they were originally created. That means, the newest article is at the bottom of the page and the oldest article is at the top of the page.

Expectation:

Articles with highest claps should be at the top AND order by creation-date in descending order (newest at the top)

Scenario:
When user clicks on signup or sign in button, following issues are visible

1. No loader shown, user is unsure if app is performing any action
2. No alert shown in case of failure. User needs to be notified with what went wrong so that they can take corrective actions.

Issue:
Currently, In-order to login, The user needs to make the following hops to reach the Sign in page:

• Go to homepage, click on Start reading button (Redirects to signup page, if user is not logged in)
• Go to Signup page, click on login anchor tag (Redirects to signin page)
  And now the user is finally able to see the Sign in screen

Expectations:
When user visits the app,
If user NOT loggedIn, then show a Sign In link on the Appbar which re-directs to sign in page.
If user logged, then don't show the Sign in link on the Appbar

After logging in, when user clicks on user-icon (top right), they should see a 'My blogs' option in the dropdown menu.

When user clicks on my blogs, a new page should be shown with the list of all blogs that the user has created.

Where ?

• Homepage route "/"

What ?

• On 'Start Reading' button click, redirect user to /blogs (even if user not logged) and show all blog list.
• If user clicks on any specific blog, perform the following action

If user is logged in, then redirect to /blog/:id and show the full blog (Already implemented ✅)
If user is not logged in, then redirect to /signup (Dev needed ❌)

When ?

• Visit https://medium-app-zeta.vercel.app/
• Click on any blog
• Click on the bookmark icon

What ?

• An initial whitescreen is shown and then a loader and then the UI is re-painted.

Expected behaviour

• When user clicks on the bookmark icon, only the bookmark icon should get updated, not the entire page.

Screenshot

Current:

The /blogs frontend route shows a list of blogcard. Each blogcard looks like this:

Expectation:

Show topics / tags for each blogcard in the list.

Something like this:

Points to consider:

• The /blog/bulk API endpoint already returns tags for each article like so:

• Show min. 0 and max. any 2 topics ONLY (Even if an article is assigned more than 2 topics)
• Each topic should be a pill (similar to the image shown above)
• Consider responsiveness.

Implement something like this, but better aesthetically

Build a profile page like this

The profile should be accessible from the url like this

xyz.com/@username

Features:

• User posts
• User personal information (edit option)

Following and Followers is out of scope of this PR and can be ignored for now.

When?

• User is reading an article.

What?

• User should be able to bookmark (Save for later) the article.
• User should be able to view the bookmarked articles by clicking on the user avatar > bookmarks

The profile box (top-right corner) doesn't close when clicked outside. Use a popover or menu to render the profile box.

Expectation:

When a user wants to share an article on their socials, the app should show a beautiful thumbnail / preview.

The preview should work everywhere, and but minimum following socials should be checked:

• Whatsapp
• Instagram
• LinkedIn
• Facebook
• X (Twitter)

The preview should have

• Article title,
• Article content (clipped upto x words),
• Article thumbnail if article image is present, else default app placeholder image

This is good ticket for someone who wants to dip their feet into SEO and social media marketing.
Refer this for implementation https://ogp.me/

Share screenshot of the end-result in the PR description.

When ?

User visits the app > Write >

What ?

If user has written the article title, An AI icon should appear.

(Something like this, but cooler and minimalistic animation)

If clicks on the AI icon, the app generates a draft article content based on the article title using GPT and inserts into the editor.
The user can choose to make adjustments in the draft from the editor and then publish the article.

The text generation should happen in the backend.
You can use GPT / Gemini to accomplish this.

Add a feature flag in the app so that this feature can be toggled on / off.
Ensure that the API_KEY resides within .env / toml file, not in your codebase.

Dark mode is currently not configured and out of project scope at the moment.
However, there are places where dark: Tailwind class is used in certain places.

In Tailwind, the dark:[class] is applied automatically if user's default theme in OS is set to dark.

Therefore, Remove all tailwind classes with prefix dark: so that all type of users see uniform styling.

Screenshot:

When user writes a new article, provide an option to link topics / tags to the article.

Where ?

/write page

What ?

• When user is writing an article, the app should autosave the changes every 15 seconds onto the local Storage.
• When user redirects to other pages and revisits the write page, they should be able to see the saved content.
• When user logs out and logs in again, visits the write page, they should still be able to see the save content. (until the scope of local storage)
• If user A's article is autosaved, user A logouts. And user B logins on the same window and visits the write page, they should not be able to see the saved content of user A on the screen.

If an article is linked to tags / topics, show all the topics at the end of the article.

Reference:

Pointers:

The api/v1/blog API returns the tags that's linked to the blog.

Add Shimmer loading to following pages until data is painted:

• /blogs
• /blog

Reference article- https://flowbite.com/docs/components/skeleton/

Please create a src/skeletons/ directory under which all skeletons are created.

PS: Use tailwind, refrain from installing additional NPM libraries. We don't want to unnecessarily increase bundle size.

Current:

When an article is opened and the bookmark button is clicked,
The bookmark icon is replaced with a loader and then replaced by bookmarkIcon again.
The loader causes a layout shift which is a bad user experience.

Expectation:

The loader should not cause layout shift

Either eliminate the loader and use a different idea to show loading.
Or
Keep the loader but ensure the dimensions of the loader container and the bookmark container is exactly same so that layout shift is avoided.

Current scenario

• When any blog is opened, bookmark icon is visible only if user is the author of the blog.

Expected scenario

• When any blog is opened, bookmark icon should be visible to any user who is loggedin.

Screenshot (Observe the Blue circle)

• Add a delete route in the backend for blog entity
• Add a delete flow in the frontend so that user who has created an article can delete.

Appropriate validations should be taken care of while doing this.

When ?

• User is reading an article

What ?

• User should be able to acknowledge the article by clicking on the claps button

Currently, the sign-in and sign-up processes in our application lack adequate feedback for password input, leading to usability and security concerns. Here are the main issues identified:

Password Visibility: The password input field does not provide visual feedback to users, making it difficult for them to verify their input. This poses a usability challenge, especially when typing complex passwords.

Mistake Recognition: Users are unable to identify if they've made a mistake while entering their password since the characters are not visible. This lack of feedback increases the likelihood of input errors and frustration.

Error Handling: In case of a password mistake, the system fails to provide any error message or indication, leaving users unaware of the issue.

Proposed Solution:
To address these issues, we propose the following enhancements:

Toggle Password Visibility: Implement a feature that allows users to toggle password visibility, displaying the characters as dots or revealing them when needed. This will enable users to verify their input and ensure accuracy.

Error Feedback: Provide real-time feedback to users if they make a mistake while entering their password. This could include visual cues such as color changes or error messages indicating an incorrect password.

Current:

When you run docker-compose up from root dir, docker fails to execute.

Expectation:

docker-compose up should spin up the frontend, the backend succesffully.

Users should be able to use the app using Google SSO effortlessly.

If screen = mobile,
Notification width = screen width ✅ (this already works in most cases)

If screen > mobile [i.e. Tablet, desktop, ...],
Notification width = ~500px ❌

Reasoning:
The notification content should be displayed on 1 line ideally if character count is <= ~50 characters.
If notification character-count increases 50, wrap the content to next line.

The below notification content should have been displayed in 1 line.

Use React-quill to allow users to edit their articles.

PS: Backend route PUT /api/v1/blog already exists. This is a frontend ticket.

Current:

Publish button is disabled even if Title & Description is entered

Expected:

Publish button should be enabled once user types Title & Description

Where?

• Signup
• Signin

What?

If user has entered all fields and is on the last field, pressing Enter/Return should execute the button click handler.

Objective:

It's beautiful that the project is being developed by so many contributors. In order to acknowledge and appreciate your efforts, we'd like to build a Contributors page. This will be proof that you've contributed to the open source project. It may add value to portfolio / Resume for those who are seeking work/employment.

What ?

• This Github API returns the list of contributors - GET https://api.github.com/repos/aadeshkulkarni/medium-app/contributors

• Create a /contributors page that will provide:

  • A list of Contributors (Each item in the list can be a card with profile image, name, a redirect to their Github profile)

  Page should be mobile & desktop responsive.

When user is on the /blogs route, they should be able to search articles using keyword.

Requirement

• Build a backend route GET for search or re-use the existing /blog/bulk GET route
• Search component in the frontend with search box & search results.

PS: Searching should be debounced. (Either using lodash or create your own debounced implementation for this)

The search API should be scalable. In future, user should be able to search another user as well.

when i replace backend url with my own backend url of cloudflare wokers it give a lot of error while i use your url it works very well ... how is it possible

Frontend:

• User is writing a new article.
• When user clicks on publish button, a modal popup should appear.
• The user can add upto 5 topics related to the article they are publishing.
• The topics should be entered in a textfield comma-separated by topic.

Backend:

• If Tag already exists in tag table, link the tag to the post.
• If Tag does not exist, create the tag and then link to the post.

The DB Schema for Tag is already created. Only the POST /blog endpoint needs to be updated.

Reference:

This is an open-to-imagination ticket.
You can use your creativity to craft an intuitive, minimalistic landing page that looks beautiful.

Constraints:

• Minimise use of third party libraries (You can use animation libraries like framer motion, gsap, threejs, lottie files, or anything else. But ensure that the page is lightweight and performant)
• The theme is minimalism, professional and easy on the eye. Consider colour-contrast-ratio and typography as well.
• Page should be responsive for mobile & desktop viewports

You can draw inspirations from existing blogging applications, dribbble.com and so on.

Current Landing page: https://medium-app-zeta.vercel.app/

Current:

Expectation:

Similiar to https://medium.com/p/3434770f0676/edit

• Title should have a placeholder 'Tell your story', formatting should be like shown below (Ignore the + icon for now)
• The text editor should not have a border, should be centred.
• Publish button should be at the top instead of bottom.
• Menu and Notification icons are both out of scope of this ticket.
• Autosave / Draft feature is out of scope (but needs to be implemented in future)

When ?

• User signs in
• User clicks on an article that's created by themself.
• User clicks on delete button icon.

What ?

• The backend API returns 411 with the error 'Something went wrong'

Screenshot:

Bonus points:

• Ideally, when user clicks on the delete icon, user should be shown confirm dialog before actually deleting the article. A-1 if you can implement it in this ticket. (Optional)

Where ?

In the header

Expectations:

The Contributors link should be indented as other items in the appbar. (horizontally)

The signup and signin pages are janky for smaller mobile screens like iphone 12, 13

Current UI

Expected UI

There should be sufficient padding on x axis (left and right) of the form fields on mobile viewport.

When?

• User writes a new article.
• User edits an existing article.

What?

• User should be able to add a cover image to the article.

Challenge:

• How to persist images in the backend ?

What is DB Seeding?

Seeding allows you to consistently re-create the same data in your database and can be used to:

• Populate your database with data that is required for your application to start - for example, a default language or a default currency.
• Provide basic data for validating and using your application in a development environment. This is particularly useful if you are using Prisma Migrate, which sometimes requires resetting your development database.

Requirement

• Setup a DB Seeding script within the backend
• Seed Tags data in the tag table.
• From where to get the tags data ? Refer Medium's page - https://medium.com/explore-topics

Pointers

• The backend already has a Tag table.
• The official Medium app has 3 levels of Tags: For example, Life > Family > Adoption. Although it would be wonderful to have something like that in our application, this will add unnecessary complications at the moment. We want to create only 1 level of Tag.

Current:

When a user is writing a new article, on publish button click, the app takes time to publish the article and redirect to the published article. There is no indication (in the form of loader or something else) that the informs the user app is publishing.

Expectation:

When user clicks the publish button, disable the button & show a loader within the button until the event handler finishes execution. (Consider happy & sad flows)

When a user creates a new article, the date time should be recorded in the DB and then should be used to show it on blogs.

At this moment, published date is not recorded and a dummy value is shown for all posts.

Approach to solve:

option 1. Customise the current editor (React quill) to make it look like Medium's editor
option 2. Use an alternate editor which is as intuitive as Medium or better
Reference editor: https://github.com/yabwe/medium-editor?tab=readme-ov-file

Open to discuss other approach as well.

Medium