Going to list stuff to work on

Fonts

• I want the fonts everywhere to stay uniform and they need to be fixed for the website( take a look at reddit see how header is bold and content is light along with this use a good font(same as reddit) / another good looking one)

My Posts

• Want a modern improvement on My Posts section , it already looks fine but tweak it and share in the PR

Footer with Contact section

• At the bottom of the home route need a good looking footer( can copy from online with contact details & Instagram, Twitter & github link with icons.

COMMENTS SECTION

• Take a look at how reddit has done their post comments and its to be implemented identically.
  First require @gadekar123 to take the current main and add the new posts which should be a client component so that state can be added to it.

Implement a UI similar to what is sent on whatsapp to you for the comments section.

This should be done optimally with well written and commented code which runs fast ( shouldn't bulk the website ) use light weight components not one with 1000s additional styles.

If your copying understand how it is written and make sure it doesnt break the site and retain responsiveness

Brief summary of the video in text format:

• For Mobile the post makes up the screen when the comment is clicked
• On PC its a modal

I highly recommend SHADCN components for anything you want to do.

Alas when your coding remember shivam has to work with backend on it so write it meaningfully dont make unnecessary components for small non reusable items.

This task is to do with everything related to the posts shown in the home '/' route.

For now I will include 3 subtasks under this which can be done one by one.

Task 1
-> On a Post Card add the feature for liking and disliking a post. Along with getting the logic done on the backend the frontend should reflect the change too( on clicking like the logo icon should change to the one filled with black )
NOTE Make sure the change happens quickly and there's no delay on pressing either like/dislike.

Task 2
-> For the Posts in the home page and my posts route implement infinite pagination. Something like after scrolling for a while it shows an option for Load More and on clicking it fetches. This will also obviously improve performance of the website as all wont have to render on first load ( figure this out from youtube or any other docs )

Task 3
-> Protect the routes on the frontend & backend. If someone is not logged in then he/she shouldn't be able to:

• Like a post
• Dislike a post
• Publish a post
  On the attempt to do so must be shown a modal to sign in / sign up. Now for the backend I have tried putting a few but make sure no one can mess with any routes before properly logging in.

That's it for now, Task 1 and Task 2 should be prioritised after which 3 can be done. Among 1 or 2 any can be implemented first.

For reference this refers to my-posts route which is a dashboard for a user to see his/her own posts.

What I want done is:

1.) A neat looking red colour bin icon next to each post, after user clicks on it it will show a modal type( take the component from shadcn) asking Are you sure you want to delete this? and if yes is pressed then delete that particular post.

2.) An edit option , basically this will teach you how to do the Update in CRUD using prisma. (Just refer docs even I dont know Prisma I just read and code) . So after pressing edit button it will take the user to a form where he can reenter data and it will update for that particular entry only.

For any components/ UI: https://ui.shadcn.com/

Update Search Logic

Searching implementation does not work as expected and also feels slow & buggy.
There's two approaches you can try for resolution:

• Refer to https://github.com/joschan21/breadit & look how its done and fix it server side itself.
• Shift to a Client Side search which will be much quicker in response by matching keywords however I'm not certain this can be done due to the way we are fetching posts from the backend but an attempt can definitely be made to do this.

Update Search Input bar UI

• Fix the search bar on mobile devices ( test using responsive meter in Inspect approximately 300 in width )

• You can refer to https://www.reddit.com/ BUT

• I would suggest maybe just show the search icon from React-Icons which already exists and on pressing that have a search input bar which is a popup type which will resolve all mobile related issues because you actually cant fit a decent search bar for those dimensions

OR

• Keep input same by adjusting dimensions better as I had done it roughly so as to not give existing visitors a bad experience and keep the icon outside the input bar as there is a text - icon overlap.

On the '/' route I want a custom feed to be shown to the users who arent logged in and those who are logged in by checking the session they should be shown the option to like/comment or create a new post. MAINLY "Create a good looking modern UI (shadcn/acertinity types) and showcase the posts by fetching from the backend(db.post.findMany) . Adding infinite scrolling option will be very good( just copy someone's probably done a tutorial on it )

On submitting signup there is no loader or a disable of button with a pending state so that needs to be added.

I want the navbar to be wrapped in a session provider and its contents should reflect based on the user session e.g dont show the sign in / sign up buttons if someone is already logged in, other than this add some good ui after user signs in/up/out.

Need an improvement in the sidebar which is used in layout.tsx section (Can be found in sidenav.tsx in components), Improve the UI of page.tsx for the my_posts section to look modern and stay responsive across devices stick with the clean black&white shadcn type theme. Slightly harder(gadekar can work) -> Infinite Scrolling for the posts or any good implementation of pagination.

Create Responsive Posts Page

Description:
Create a dynamic Route for Posts where specific Post details can be shown. Things like likes, dislikes, comments can be shown differently and in a unique attractive way since it's a page catered to a specific post.

Official Docs for Dynamic Routes:
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

YouTube video link to understand:
https://www.youtube.com/watch?v=N4-EkNJ6RFM

This is similar to what was done for the Specific Competitions page for the Spectrum website so that can be referred. In simple words what I want is
" On Clicking any post it will take the user to a new page showing that post as a whole in a unique way "

In Depth Example Using Images:

Here's Binary Nebula , an event.

It lies on this route: https://www.gecspectrum.com/competitions

When a user presses on it this happens:

As you can see URL changed to : https://www.gecspectrum.com/competitions/65f5aee30197f7897ad54e54

So based on which competition is clicked it shows a different one, this is how dynamic routes work. I want you to implement this for Posts and also add a share option which works where people can share that post on whatsapp / twitter.

On deleting a post the Titles get merged into adjacent post but functionality persists and on refresh that issue goes but this needs a fix

As per meet held today on 17th March have assigned Joel to complete the UI of the website making it responsive and similar to https://www.reddit.com/
OR
https://www.teamblind.com/

Additionally a requirement (optional for now):
Add a dark theme toggle to the website to switch between light and dark.

NOTE
This needs to be completed as quickly as possible for further works to begin.