[Enhancement] Make UI Responsive for All Devices

abhijeetnishal commented 3 months ago

Description:

The current UI of our URL Shortener application is not fully responsive, resulting in a poor user experience on devices with different screen sizes and orientations. As a result, we need to ensure that our application's UI is adaptable and looks great on all devices, including desktops, laptops, tablets, and mobile phones.

Requirements:

To achieve this, we need to make the following changes:

Media Queries: Implement media queries using Tailwind CSS to define different styles for different screen sizes and orientations.
Component Adjustments: Review and adjust individual components (e.g., buttons, forms, cards) to ensure they scale and adapt correctly on different devices.
Typography: Ensure that typography is responsive, with font sizes and line heights adjusting according to screen size.
Image Handling: Optimize image handling to ensure that images are displayed correctly and do not break the layout on different devices.

Technical Details:

Our application is built using Next.js with TypeScript.
We are using Tailwind CSS for styling.

Expected Outcome:

After completing this task, the URL Shortener application should have a fully responsive UI that adapts to different devices and screen sizes, providing an optimal user experience.

Expected deadline:

It will take 1-2 days at max.

gupta-ritik commented 3 months ago

@abhijeetnishal assign this issues for resolve to me

abhijeetnishal commented 3 months ago

Great @gupta-ritik, I am assigning this issue to you now.

gupta-ritik commented 3 months ago

Thanks for assigning .

On Sun, May 12, 2024, 01:39 Abhijeet Kumar @.***> wrote:

Assigned #44 https://github.com/abhijeetnishal/URLShortener/issues/44 to @gupta-ritik https://github.com/gupta-ritik.

— Reply to this email directly, view it on GitHub https://github.com/abhijeetnishal/URLShortener/issues/44#event-12777123247, or unsubscribe https://github.com/notifications/unsubscribe-auth/A6I6S4GXJ2CAYAR664FCR53ZBZ3INAVCNFSM6AAAAABHSFK4NCVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJSG43TOMJSGMZDINY . You are receiving this because you were assigned.Message ID: @.***>

Nehakumari1208 commented 3 months ago

Assign this to me

abhijeetnishal commented 3 months ago

Assign this to me

Hey @Nehakumari1208, this issue is already assigned to @gupta-ritik. Work on other issues good luck.

prajna321 commented 3 months ago

@abhijeetnishal
Please assign me this issue! Would love to work on it.

gupta-ritik commented 3 months ago

@abhijeetnishal Hello Dear Sir WhatsApp Image 2024-05-13 at 23 16 23_26d4eb8c , i facing a problem running server it showing some error. I attached the error issue in the image and how to fix this issues please tell me

abhijeetnishal commented 3 months ago

@abhijeetnishal Hello Dear Sir , i facing a problem running server it showing some error. I attached the error issue in the image and how to fix this issues please tell me

Hey @gupta-ritik, for running client run: npm i command in client director.

If you are getting error then remove node_modules and .next folder and then run npm i command.

abhijeetnishal commented 3 months ago

Hey @gupta-ritik, what's the progress, are you working on this?

gupta-ritik commented 3 months ago

i still facing above mentioned issues

abhijeetnishal commented 3 months ago

Try to clone the project again and install and run it will run else I think it will system level issue.

Try to debug this issue

abhijeetnishal commented 3 months ago

Hey @hrishabhpatel09, are you interested in this issue as you asked in issue #72

hrishabhpatel09 commented 3 months ago

sure @abhijeetnishal i would love to contribute on this issue.

abhijeetnishal / URLShortener