abhijeetnishal / urlshortener

URL Shortener Deployed Link 👇🏻

URL Shortener App

⚡ About Us:

This project is a URL Shortener application that allows users to enter a long URL, which is then shortened to a much shorter URL that can be easily shared.

⚡Tech Stack:

⚡Table of Contents:

• Features
• Run application using script
• Application Setup
• How to Contribute
• Usage
  

Features

1. URL shortening: Users can enter a long URL and get a shortened URL that can be easily shared.

Run application using script:

1. Run mongodb database locally if not running, Open Git Bash in root directory of your project where Setup.sh file is present and run the below command:

   ./script.sh

2. This will setup the frontend application and database, finally start the server using below command:

   cd server
   npm start

Application Setup

To setup the application locally, follow these steps:

1. Star and Fork this repo to create your own copy to work from.

2. Clone the repository you forked to your local machine using:

   git clone <your_forked_repo_url>

3. Navigate to the Server directory using command "cd server" and create a .env file and copy contents of .env.example file to .env file and add all secret keys to setup MongoDB database.

4. Install dependencies in server directory of project:

   npm install

5. Start the server using command:

   npm start

6. Now Navigate to the client directory using command "cd client" and create a .env.local file and copy contents of .env.sample file to .env.local file and add server URL.

7. Install dependencies in client directory of project:

   npm install

8. Start the application using command:

   npm start

9. Open http://localhost:3000 in your browser to see the application.

How to Contribute

Contributions are welcome! If you would like to contribute to the project, please follow these steps:

1. Clone and setup this application locally by following above application setup steps.

2. Create a new branch for the issue you assigned to work on, using below command:

      git checkout -b your_branch_name

3. Make your changes to the code.

4. Once you are satisfied with your changes, commit them with a descriptive commit message using below command:

      git add .
      git commit -m "feat: Add feature X"

5. Push your changes to your forked repository:

      git push origin your_branch_name

6. Create a pull request by clicking the "Pull request" button on the original repository page.

7. Wait for the project maintainer to review your pull request and provide feedback.

8. If your pull request is accepted, it will be merged into the main branch of the project. Congratulations, you've contributed to the project!

Usage

To use the app, follow these steps:

1. Enter a long URL in the input field and click the "Shorten" button.
2. Copy the shortened URL and share it with others.

Featured In:

Open Source Programs

Event Logo	Event Name	Event Description
	GirlScript Summer of Code 2024	GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.

Code of Conduct:

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

License:

This project is licensed under the MIT License.

Don't forget to leave a star for this project!

Go to Top

urlshortener's Issues

feat: Redesign UI

Is your feature request related to a problem? Please describe.
The UI of website looks really simple.

Describe the solution you'd like
We can make it better by adding simple gradients and reactive components.

Describe alternatives you've considered
Adding gradients and transitions.

Additional context
Please assign this issue to me I am a GSSoC '24 contributor.

[Feature] Implement URL Save Functionality (Server side)

Followed by issue #16

Description:

The current URL Shortener project lacks a feature that allows authenticated users to save their shortened URLs. This will enable users to login and access their saved shortened URLs, along with their original URLs.

Requirements:

• Shortened URL Save Functionality: Create an API endpoint (v1/api/urls) that allows authenticated users to save their shortened URLs with the original URL associated with the user_id on the server-side.
• Database Integration: Integrate the shortened URL save functionality with our MongoDB database. Design a suitable schema to store the shortened URLs, original URLs, and user IDs.
• Get all shortened URL with original URL: Create a endpoint(v1/api/urls) that displays all shortened URLs saved by the user, along with their original URLs.
• Security: Ensure that the implementation follows best practices for security, including input validation, sanitization, and error handling.

Acceptance Criteria:

• Authenticated users can save their shortened URLs on the server-side.
• The saved shortened URLs are associated with the user's ID in the database.
• The user home page displays all shortened URLs saved by the user, along with their original URLs.
• The implementation is secure, and input validation, sanitization, and error handling are in place.

Estimated Time:

This issue is estimated to take around 2-3 days to complete, depending on the contributor's experience.

Learn.md

Learn repos should have a LEARN.md file to teach student how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/Learn.md

Feature Request: Add Copy Button for Shortened URL

Is your feature request related to a problem? Please describe.
I'm always frustrated when i don't see a straightforward way to copy shortened URLs from the platform, leading to inconvenience and extra steps.

Describe the solution you'd like
I propose the addition of a copy button next to the shortened URL, enabling users to easily copy the shortened link with a single click.

Describe alternatives you've considered
none

Additional context
This feature can enhance the usability of the platform.

[Enhancement] Make UI Responsive for All Devices

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.

Add QR Code Generation Feature to URL Shortening Service.

Proposal: Add QR Code Generation Feature to URL Shortening Service

Hey,

I hope this message finds you well. I'm excited to propose an enhancement to your URL shortening service by introducing a new feature: QR code generation.

Problem Statement:

Currently, your URL shortening service provides users with shortened URLs for long links. However, I have identified an opportunity to enhance user experience and offer additional value by enabling users to generate QR codes for the shortened URLs.

Proposed Solution:

I propose adding a new feature to our URL shortening service that allows users to generate QR codes for the shortened URLs. Here's how it would work:

1. Generate Short URL: Users submit a long URL to be shortened using our service.
2. Generate QR Code: Alongside the shortened URL, our system generates a corresponding QR code.
3. QR Code Integration: Users can download the generated QR code or use it directly from our platform for their needs.

Let me know your thoughts on this proposal. I'm eager to collaborate on this enhancement and contribute to its successful implementation.

Best regards,
Amrit Raj

Using Python API to get Shortend URL

Is your feature request related to a problem? Please describe.
I didnt find any appropriate code for generating a shortend URL in your database

Describe the solution you'd like
I would be provide a python script that uses an API that takes a Valid URL as an Input and returns a shortend URL

Additional context
@abhijeetnishal Hey 👋 Can you please assign this task to me under GSSoC 24 with an appropriate level tag i would love to work on it , I'm a python Developer and I know how to solve this problem , Also if you need any extra changes I would be adding that too

Hovering effect on shorten it button

Light/Dark Mode Toggle Feature

Problem:
Users lack the ability to switch between light and dark modes within the application, limiting customization and potentially causing discomfort during extended use.

Solution:
Implement a feature that allows users to toggle between light and dark modes easily. This feature should provide users with a choice to switch to their preferred mode, enhancing user experience and accessibility.

Additional Context:
Adding a light/dark mode toggle can significantly improve user satisfaction and accessibility. It's a widely adopted feature in modern applications, offering users flexibility and reducing eye strain, particularly during low-light conditions.

@abhijeetnishal I have experience working on similar issues in the past and would love to tackle this one. Could you please assign it to me?

Issue: Font, Padding, Design Enhancement, and Dark Mode Implementation

### Issue Description
The current design of the link shortener website requires several improvements to enhance user experience and visual appeal. Specifically, the font needs to be changed, padding should be added to the link submission bar, and the overall design should be made more catchy. Additionally, considering user preferences and accessibility, implementing a dark mode feature would be beneficial.

### Changes Required
Font Change: Replace the current font with a more modern and legible typeface to improve readability and aesthetics.
Padding Addition: Apply padding to the link submission bar to improve spacing and make it visually distinct.

Design Enhancement: Enhance the overall design to make it more visually appealing, engaging, and aligned with the branding or theme of the website.

Dark Mode Implementation: Introduce a dark mode feature to provide users with an alternative color scheme that reduces eye strain and improves visibility, especially in low-light environments.

Expected Outcome

Improved readability and aesthetics through font change.
Enhanced user experience with padding addition and overall design enhancements.
Accessibility and user preference catered to with the implementation of dark mode.

[Bug] The shorten it button is not properly aligned in mobile devices

Describe the bug
A clear and concise description of what the bug is.
The shorten it button is not aligned properly in mobile devices
To Reproduce
Steps to reproduce the behavior:

1. Go to https://urlsrtner.vercel.app/
2. On a mobile device
3. See the shorten it button

Expected behavior
A clear and concise description of what you expected to happen.
It should be properly aligned with some space on the left
Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [POCO M4]
• OS: [Android 13]
• Browser [Brave]
• Version [e.g. 22]

Adding a feature to store Urls entered by users

storing the urls

I will work on this issue.i will implement it using mongodb.please assign this to me

[Feature] Toggle for dark or light mode

i want to add dark mode to the website.

Missing CONTRIBUTING.md File in Repository

The repository currently lacks a CONTRIBUTING.md file, which is an important resource for guiding potential contributors on how to engage with the project effectively. A CONTRIBUTING.md file outlines the contribution guidelines, coding standards, and procedures for submitting pull requests, thus streamlining the contribution process and ensuring consistency across contributions.

Could you please assign this issue to me under GSSOC 24.

Link Management

Users lack visibility and control over their previously shortened links, hindering their ability to track, manage, and analyze link performance effectively.

Solution:
Introduce a comprehensive link history feature that allows users to access and manage their previously shortened links. The implementation should include the following functionalities:

Historical View: Provide users with a chronological list of all links they have shortened, including details such as the original URL, shortened URL, creation date, and number of clicks.

Please assign this to me. I am gssoc'24 contributor.

[Feature] Allow users to customize short links

Is your feature request related to a problem? Please describe.
The shortened url is auto generated so it might be harder to remember

Describe the solution you'd like
My solution is to allow users to customize the shortened url with their username and some additional 6 letters strings (size is open to changes) so that it could be easy to store it. But we can allow users to only acces this feature if they are logged in

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Another alternative is to allow users who use the shortening feature to specify their custom url and if that does not already exist then we will use that custom url or specify the error in a readable format.

Additional context
I want to work on implementing this feature on the backend

Not responsive in Mobile.

Describe the bug
App is not looking good in mobile view and button are getting displaced

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Migrate] from React to Next.js with Tailwind CSS

Description:

The goal of this issue is to migrate the existing URL Shortener application from React to Next.js, utilizing the latest version of Next.js and its App Router. Additionally, the current CSS implementation will be replaced with Tailwind CSS.

Current State:

The current URL Shortener application is built using React, with a custom CSS implementation. While this has served the project well, we want to take advantage of the benefits offered by Next.js, such as server-side rendering, improved performance, and a more robust routing system.

Task Breakdown:

To complete this issue, the following tasks need to be accomplished:

• Update the project structure to conform to Next.js conventions.
• Migrate React components to Next.js pages and components.
• Implement the Next.js App Router to handle routing.
• Replace the current CSS implementation with Tailwind CSS.
• Update the build process to accommodate Next.js and Tailwind CSS.
• Test the application thoroughly to ensure it functions as expected.

Estimated Time:

This issue is estimated to take around 4-5 days to complete, depending on the contributor's experience with Next.js and Tailwind CSS.

[Feature] Implement Login/Signup with JWT Authentication (Server side)

Description:

The current URL Shortener project lacks a user authentication mechanism, which prevents users from saving and managing their shortened URLs. To address this, we need to implement a login/signup system with JWT (JSON Web Token) authentication on the server-side. This will enable users to create an account, log in, and save their shortened URLs for future reference.

Requirements:

1. User Registration:

   • Create a registration endpoint (v1/auth/signup) that accepts a username, email, and password.
   • Validate user input and store the user data in the MongoDB database.

2. User Login:

   • Create a login endpoint (v1/auth/login) that accepts a username (or email) and password.
   • Verify the user credentials against the stored data in the MongoDB database.
   • Generate a JWT token upon successful login, which will be used for authentication.

3. JWT Authentication:

   • Implement JWT token generation and verification using a library like jsonwebtoken.
   • Store the JWT token in the user's browser storage (e.g., localStorage).
   • Verify the JWT token on each request to protected endpoints.

4. Error Handling:

   • Handle errors and exceptions properly, including invalid login credentials, expired tokens, and database errors, etc.

Technical Details:

• The project uses Node.js (Express) as the backend framework and MongoDB as the database.
• The JWT token should be generated with a secret key stored as an environment variable.
• The user data should be stored in a users collection in the MongoDB database.

Acceptance Criteria:

• A user can register with a unique username, email, and password.
• A user can log in with their credentials and receive a valid JWT token.
• The JWT token is verified on each request to protected endpoints.
• Error handling is implemented correctly for invalid login credentials, expired tokens, and database errors, etc.

Estimated Time:

This issue is estimated to take around 2-3 days to complete, depending on the contributor's experience.

Add Topics

In GSSoC'24, GitHub Topics will help the discoverability of your project.

I see that you already have great topics on your repository!
I would recommend adding the name of the company like the software you use to build like "vs-code, ghdesktop" to improve your discoverability.

If you are happy with the topics you have, feel free to close this issue. 👍

update readme for exec the setup.sh file

update the readme for setup.sh file execution steps

Feat: Automate greeting using Github bot 🤖

Describe the feature

As the contributor count rises on the repo, it becomes increasingly challenging for maintainers to personally greet and encourage each contributor for their valuable input. Equally important is the reminder for them to review the project's contribution guidelines.

Add ScreenShots

PR greeting message ⬇️

ISSUE greeting message ⬇️

Record

• I agree to follow this project's Code of Conduct
• I'm a GSSoC'24 contributor
• I want to work on this issue

Implement url shortener as qr code (one of the feature)

Problem:
I'm always frustrated when I need to generate QR codes for shortened URLs separately, as it adds extra steps to the process and makes it less efficient.

Solution:
I would like the URL shortener to have built-in QR code generation functionality alongside shortened URLs. This would streamline the process and make it more convenient for users to create QR codes for their shortened links.

Describe alternatives you've considered:
One alternative could be using a separate QR code generation tool or service, but this would require users to switch between different platforms and may not integrate seamlessly with the URL shortener.

Additional context:
Implementing QR code generation directly within the URL shortener would enhance user experience and make the platform more comprehensive. It could be a valuable addition for users who frequently share links in offline settings or on physical materials.

Please assign me this task i am gssoc'24 contributor @abhijeetnishal

Change the colour of loading

Changing the colour of loading as it is really similar to background and we can't know of it's there of not.

I am a Contributor for GSSoC 2024. Please assign this issue to me!

Add Code of Conduct

We recommend that every repo has a code of conduct. If you don’t feel comfortable creating your own Code of Conduct from scratch we highly recommend using one of the templates provided by GitHub. If you do use a template, please read through the template and ensure that you can and will abide by the Code of Conduct.

Please follow these instructions on how to add a Code of Conduct.

Sample: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/CODE_OF_CONDUCT.md

Add issues

As the maintainer of a Collaborate repo, keeping Issues up-to-date will help the student community understand what they can do to contribute. Issues should vary by the easy (update documentation) to the difficult (add a new feature). The more involved you are, the more opportunities there are to collaborate.

Recommendations:

Add issues of varying difficulty to the repo often. you can add the tag GSSoC'24, good first issue etc.
Generate issues even if you plan on solving them, so the repository appears as active.
Contribute/commit often to the repo so it does not go stale.

Reference https://github.com/Recode-Hive/Stackoverflow-Analysis/issues

Improve the UI of the main page

**Is your feature request related to a problem? **
the UI is not very attractive and the yellow color text is not visible properly.

Describe the solution you'd like
I would like to change the font style and padding of some elements and the text color of some text.

Add a sh script to locally install the application using a single command by running that file

As a contributor or user of the URL Shortener application, I often find the manual setup process time-consuming and prone to errors. To streamline the setup process and make it more accessible, I propose adding an automated setup script.

Girlscript Summer of Code Introduction/Tracking

👋 Hi @abhijeetnishal ,

I am Sanjay, program Manager Girlscript Summer of Code. I'll be collaborating with you on preparing your repo for GSSoC'24 Program

Why are these changes required?
After Analysing last year's contributions and feedback it would be great for students to have a couple of standard readme files on the repo to understand what the project is all about and some issues detailing what they can contribute. This will help you to see increased engagement in your repository as well.

As mentioned students get a chance to learn step by step, how to build this project as well as invite mentors to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for Girlscript summer of code 2024 on 10th May.

This issue will serve as a tracking issue to track all issues related to GSSoC'24. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you

• #6
• #7
• #8
• #9
• #10

Add templates for issues

Issue templates are very helpful for a collaboration repo. When users identify a bug or want to add a new feature, you can provide templates so you can collect all the pertinent information you need to fix a bug or add a new feature.

We recommend creating a “Report Bug” and “Feature Request” issue template.
you can refer this: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Some suggested prompts/questions you can add to a “Report Bug” template are:

Briefly describe the bug
What is the expected behavior?
Please provide step by step instructions on how to reproduce the bug
Some suggested prompts/questions you can add to a “Feature Request” issue template are:

Briefly describe your feature request
What problem is this feature trying to solve?
How do we know when the feature is complete?

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/issues/new/choose
Click on Get Started button and copy the template to yours.

Missing CONTRIBUTING.md File in Repository

The repository currently lacks a CONTRIBUTING.md file, which is an important resource for guiding potential contributors on how to engage with the project effectively. A CONTRIBUTING.md file outlines the contribution guidelines, coding standards, and procedures for submitting pull requests, thus streamlining the contribution process and ensuring consistency across contributions.

Could you please assign this issue to me under GSSOC 24.

[Enhancement] Connect to Database only when required

Description:

Currently, server establishes a connection to the MongoDB database as soon as the server starts. This means that the database connection is always active, even when no requests are being made to the server. This can lead to unnecessary resource usage and potential performance issues.

Requirements:

• Modify the existing code to connect to the MongoDB database only when a request is received that requires database access.
• Ensure that the database connection is closed when it is no longer needed to conserve resources.
• Implement a mechanism to handle errors that may occur when connecting to the database lazily.

Technical Details:

• Server is built using Node.js and Express.js as the backend framework.
• This project is using MongoDB as our database.
• The current implementation establishes a connection to the MongoDB database using the mongoose library in the server startup code.

Example Scenario:

• When the server starts, no database connection is established.
• When a request is received to create a new shortened URL, the database connection is established, the URL is saved to the database, and the connection is closed.
• When a request is received to retrieve a shortened URL, the database connection is established, the URL is retrieved from the database, and the connection is closed.

Acceptance Criteria:

• The database connection is not established when the server starts.
• The database connection is established only when a request is received that requires database access.
• The database connection is closed when it is no longer needed.
• Errors that occur during lazy loading of the database connection are handled correctly.

Estimated Time:

This issue is estimated to take around 1-2 days to complete, depending on the contributor's experience.

Feat: Copy to Clipboard feature

Is your feature request related to a problem? Please describe.
After getting the short link, there is no easy way to copy the link.

Describe the solution you'd like
We should add the option to copy the link to clipboard

Additional context

@abhijeetnishal Please assign it to me under gssoc

Implementing Toggle Theme Feature and UI Enhancement

the absence of a toggle theme feature limits accessibility and fails to accommodate users with different visual preferences or accessibility needs and also enhancement in the UI/UX with vibrant colors and fonts.

Proposed Solution:

Toggle Theme Feature:
Introduce a toggle theme feature that allows users to switch between different color schemes or themes based on their preferences.
Provide options for light mode, dark mode.

UI Enhancement:
Conduct a thorough evaluation of the current UI design to identify areas for improvement.
Streamline navigation and optimize layout to enhance usability.

[Feature] Implementation of Docker Containerization for the Application

Description:

Proposal: Docker Containerization Implementation

Objective:

Implement Docker containerization to streamline deployment, enhance scalability, and improve portability across different environments.

Benefits:

Streamlined Deployment: Consistent deployment across platforms reduces issues.

Improved Portability: Facilitates migration between environments.

Simplified Maintenance: Easier management and updates without system impact.

[Feature] Optimized SEO for redirecting URLs

What this feature is about?

It is common for all URL Shortening services to have best and customized SEO settings, so whenever user pastes shortened URL by our app in his posts or DMs, the receiver can overview where he will be redirected to.

Possible Solution

Since, we are restructuring our app into nextjs, the next app will handle most of the SEO settings itself. But we will use some external libraries to make customizable and platform specific SEO for our app.

Additional context

Here are some screenshots of tinyurl short links when pasted into various apps.

Twitter

Instagram DM

Validate the url first then short the url

Describe the bug
It does not verify whether the URL entered by the user is valid or not

Screenshots

Shorten it button misalignment

As we can see here shorten it button is not properly aligned.It should be in the center and it should be a little bit lower as it's touching
The previous input field.

Please assign this issue to me under GSSOC 2024 and add necessary labels to it
@abhijeetnishal

[BUG]: Missing Cursor Pointer

Describe the bug
The button element have no pointer during interaction.
To Reproduce
Steps to reproduce the behavior:

1. Go to page
2. Click on the inspect
3. Scroll down to the button element
4. See error

Expected behavior

• In mouse will be hover the mouse will be alerting to point.Doesn't work it.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu
• Browser : chrome

Smartphone (please complete the following information):

• Device:Realme 8
• OS: Android 12
• Browser: chrome

[FEAT]:Add RateLimit and preview the history shorten url list

I like your code base and it was very nice and clean code.

I saw someone raise an issue with creating a login system and it was a good

with that, I think we need to add the Ratelimit for extra security

And what if we store the URL based on the userId
with that we can get the history URL links and display it in frontend

If you like, I will be happy to contribute....😊

[Feature] Implement Login and Signup for Client-Side

Description:

We need to implement a responsive and visually appealing login and signup page for the client-side of our URL Shortener application. The page should be designed with a focus on user experience and should be fully functional, allowing users to successfully log in and sign up for an account.

Requirements:

• The login and signup pages should be built using Next.js with TypeScript.
• The design should be responsive, meaning it should adapt to different screen sizes and devices (desktop, tablet, mobile).
• The pages should be styled using Tailwind CSS.
• The login page should include the following fields:
  • Username or email address
  • Password
  • Login button
• The signup page should include the following fields:
  • name
  • email address
  • Password
  • Confirm password
  • Signup button
• Both pages should include error handling and validation for the input fields.
• The pages should be accessible and follow best practices for web accessibility.
• The design should be consistent with the overall aesthetic of the application.

Functional Requirements:

• The login page should authenticate users and redirect them to the dashboard or main application page upon successful login.
• The signup page should create a new user account and redirect them to the dashboard or main application.
• Both pages should handle errors and exceptions gracefully, providing user-friendly error messages.

Acceptance Criteria:

• The login and signup pages are fully functional and responsive.
• The design is consistent with the overall aesthetic of the application.
• The implementation meets the technical requirements and follows best practices.
• The code is well-organized, modular, and easy to maintain.

feature: history of the recently shortend urls

Currently, our URL shortening service provides a convenient way to shorten lengthy URLs. However, users have expressed interest in having access to a history of their recently shortened URLs for reference and convenience.

solution:
If you intent to add the authentication of users we can store the history in db or else we can store it in local storage for the current session

Copy Button Feature

Is your feature request related to a problem? Please describe.
Most people know to copy it from right click, but it is very frustrating to do right-click and finding the "copy-link address" option.

Describe the solution you'd like
It would be nice to have a copy button and users are able to have link to their shortened link in their clipboard.
Also designing button matching with other UI components would also affect UX positively.

Describe alternatives you've considered
Alternative would be like instead of introducing the button, we add symbol just right to the shorten url button,
Else all would be same.

@abhijeetnishal Please assign this Issue to Me :)

[Enhancement] Redesign UI of Home page

Description:

The current home screen lacks clarity and organization, making it challenging for users to access important features easily, such as logging in or navigating to different sections. To address this issue, the proposed solution involves redesigning the home page with a clear navbar at the top, containing buttons for logging in and logging out. Additionally, a sidebar will be added to provide easy access to different sections. The sidebar will include a "Home" section for navigating back to the main page and a "Links" section for accessing the history of shortened links. This UI update aims to enhance the user experience by improving navigation and providing clear access to essential features.

Requirements:

1. Clear navbar at the top of the home page.
2. Navbar must contain buttons for logging in and logging out.
3. Addition of a sidebar for easy access to different sections.
4. Sidebar should include a "Home" section and a "Links" section.
5. The "Home" section should allow users to navigate back to the main page.
6. The "Links" section should provide access to the history of shortened links.

Acceptance Criteria:

1. Users can easily locate the navbar at the top of the home page.
2. Navbar buttons for logging in and logging out are clearly visible and functional.
3. The sidebar is present on the home page and accessible from any screen within the application.
4. The "Home" section in the sidebar allows users to navigate back to the main page without any issues.
5. The "Links" section in the sidebar displays the history of shortened links accurately.
6. Usability testing confirms that users find the new layout intuitive and navigation is significantly improved compared to the previous design.

Update favicon

Describe the bug
Already, default vercel favicon is implemented. I want to change it with the current icon of this project.

To Reproduce
Steps to reproduce the behavior:

1. See on the left side of title

Expected behavior
I have seen that favicon is something same as icon of the website.

Screenshots

Desktop (please complete the following information):

• OS: Window
• Browser: Chrome
• Version: *

Smartphone (please complete the following information):

• Device: POCO M3 Pro 5G
• OS: Android
• Browser - Chrome

UI enhancement and navbar options

First I will improve the UI by adding margin and padding also need to work on the font and icons, And i would also like to add some pages like contact us, about us for this app and apply navigation for those into the navbar also i can work for a good looking footer and favicon for this app.

Add react toastify for invalid url response

Add react toastify for invalid url response

[Enhancement] Add a feature display on the homepage

Here's an example of what could be the design, later on we'll align with the website's design. @abhijeetnishal Sir can you please assign me this issue?

Clicking on the copy button doesn't notify the user

After clicking the button to copy the new url nothing changes in the UI to notify me that the link has been copied.

Website logo on the header of the web site

Is your feature request related to a problem? Please describe.
Website logo on the header of the web site

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.