Dev to Main Sync

.env.development

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_API_BASE_URL=http://localhost:8000/v1
 NEXT_PUBLIC_TINY_SITE=http://localhost:3000
+NEXT_PUBLIC_BASE_URL=https://staging-www.realdevsquad.com

.env.production

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_API_BASE_URL=https://staging-tinysite-api.realdevsquad.com/v1
 NEXT_PUBLIC_TINY_SITE=https://staging-tinysite.realdevsquad.com
+NEXT_PUBLIC_BASE_URL=https://www.realdevsquad.com

.env.staging

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_API_BASE_URL=https://staging-tinysite-api.realdevsquad.com/v1
 NEXT_PUBLIC_TINY_SITE=https://staging-tinysite.realdevsquad.com
+NEXT_PUBLIC_BASE_URL=https://staging-www.realdevsquad.com

__tests__/components/App/OutputSection.test.tsx

@@ -65,7 +65,6 @@ describe('OutputSection component', () => {
         );
 
         expect(screen.getByTestId('copy-button')).toBeInTheDocument();
-        expect(screen.getByTestId('share-button')).toBeInTheDocument();
         expect(screen.getByTestId('output-heading')).toHaveTextContent('Your shortened URL is ready!');
     });
 
@@ -85,21 +84,6 @@ describe('OutputSection component', () => {
         expect(navigator.clipboard.writeText).toHaveBeenCalledWith(shortUrl);
     });
 
-    it('opens a new tab when share button is clicked', () => {
-        render(
-            <OutputSection
-                shortUrl={shortUrl}
-                originalUrl={originalUrl}
-                isLoaded={true}
-                handleCreateNew={mockHandleCreateNew}
-            />
-        );
-
-        const shareButton = screen.getByTestId('share-button');
-        fireEvent.click(shareButton);
-        expect(shareButton).toHaveAttribute('target', '_blank');
-    });
-
     it('renders social media share links', () => {
         render(
             <OutputSection
@@ -111,7 +95,6 @@ describe('OutputSection component', () => {
         );
 
         expect(screen.getByTestId('twitter-share')).toBeInTheDocument();
-        expect(screen.getByTestId('discord-share')).toBeInTheDocument();
         expect(screen.getByTestId('linkedin-share')).toBeInTheDocument();
         expect(screen.getByTestId('whatsapp-share')).toBeInTheDocument();
     });

__tests__/components/App/SortenUrlForm.test.tsx

@@ -105,25 +105,18 @@ describe('UrlForm component', () => {
         render(<HomeText />);
         const mainHeading = screen.getByText('Shorten Your URL');
         expect(mainHeading).toBeInTheDocument();
-        expect(mainHeading).toHaveClass(
-            'text-3xl md:text-6xl xl:text-7xl sm:text-5xl text-center text-white font-semibold pb-2 lg:pb-4'
-        );
     });
 
     it('renders the subheading correctly', () => {
         render(<HomeText />);
         const subHeading = screen.getByText('Perfect Links Every Time');
         expect(subHeading).toBeInTheDocument();
-        expect(subHeading).toHaveClass(
-            'text-2xl sm:text-3xl md:text-4xl xl:text-5xl text-center text-white font-semibold'
-        );
     });
 
     it('renders the paragraph text correctly', () => {
         render(<HomeText />);
         const paragraph = screen.getByText(/Ready to shorten your URL\? Enter your/i);
         expect(paragraph).toBeInTheDocument();
-        expect(paragraph).toHaveClass('xl:text-xl text-base text-white mt-4 text-center');
     });
 
     it('renders the paragraph text with a line break for small screens', () => {

src/components/App/OutputSection.tsx

@@ -3,18 +3,11 @@ import QRCode from 'qrcode.react';
 import React, { useState } from 'react';
 import { FaCheck, FaRegCopy } from 'react-icons/fa';
 import { FaWhatsapp } from 'react-icons/fa6';
-import { FaDiscord, FaLinkedin, FaXTwitter } from 'react-icons/fa6';
+import { FaLinkedin, FaXTwitter } from 'react-icons/fa6';
 import { HiOutlineDownload } from 'react-icons/hi';
-import { PiShareFatBold } from 'react-icons/pi';
 
 import Button from '@/components/Button';
-import {
-    discordShareUrl,
-    linkedinShareUrl,
-    removeProtocol,
-    twitterShareUrl,
-    whatsappShareUrl,
-} from '@/constants/constants';
+import { linkedinShareUrl, removeProtocol, twitterShareUrl, whatsappShareUrl } from '@/constants/constants';
 
 import OutputSectionShimmer from '../ShimmerEffect/OutputSectionShimmer';
 
@@ -91,25 +84,14 @@ const OutputSection: React.FC<OutputSectionProps> = ({ shortUrl, isLoaded }) =>
                 className="flex justify-between items-center rounded-lg p-2 border-2 border-gray-500 h-11 w-10/12"
                 data-testid="url-container"
             >
-                <span className="w-[70%] ellipsis overflow-hidden whitespace-nowrap text-sm xl:text-base font-semibold">
+                <span className="w-full text-ellipsis overflow-hidden whitespace-nowrap text-sm xl:text-base font-semibold">
                     {shortUrl.replace(removeProtocol, '')}
                 </span>
 
-                <div className="flex w-[30%] justify-end items-center rounded-lg">
-                    <Link
-                        type="button"
-                        className="p-1 sm:p-2.5 flex justify-center items-center"
-                        href={shortUrl}
-                        target="_blank"
-                        data-testid="share-button"
-                        rel="noopener noreferrer"
-                    >
-                        <PiShareFatBold className="text-lg sm:text-xl" />
-                    </Link>
-
+                <div className="flex justify-end items-center rounded-lg">
                     <Button
                         type="button"
-                        className="p-1 sm:p-2.5 flex justify-center items-center"
+                        className="p-1 text-lg flex justify-center items-center"
                         testId="copy-button"
                         onClick={handleCopyUrl}
                     >
@@ -123,7 +105,7 @@ const OutputSection: React.FC<OutputSectionProps> = ({ shortUrl, isLoaded }) =>
             <p className="text-slate-500 text-base" data-testid="share-text">
                 Or share via
             </p>
-            <div className="flex space-x-4 justify-between w-full" data-testid="social-links">
+            <div className="flex space-x-4 justify-around w-full" data-testid="social-links">
                 <Link
                     href={twitterShareUrl(shortUrl)}
                     target="_blank"
@@ -133,15 +115,6 @@ const OutputSection: React.FC<OutputSectionProps> = ({ shortUrl, isLoaded }) =>
                 >
                     <FaXTwitter className="text-5xl" />
                 </Link>
-                <Link
-                    href={discordShareUrl(shortUrl)}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-custom-blue"
-                    data-testid="discord-share"
-                >
-                    <FaDiscord className="text-5xl" />
-                </Link>
                 <Link
                     href={linkedinShareUrl(shortUrl)}
                     target="_blank"

src/components/App/ShortenUrlForm.tsx

@@ -19,15 +19,15 @@ interface ShortenUrlFormProps {
 export const HomeText: React.FC = () => {
     return (
         <div className="pb-2 lg:pb-4 flex flex-col items-center gap-2">
-            <h1 className="text-3xl md:text-6xl xl:text-7xl sm:text-5xl text-center text-white font-semibold pb-2 lg:pb-4">
+            <h1 className="text-4xl md:text-6xl xl:text-7xl sm:text-5xl text-center text-white font-semibold pb-2 lg:pb-4">
                 Shorten Your URL
             </h1>
 
-            <h3 className="text-2xl sm:text-3xl md:text-4xl xl:text-5xl text-center text-white font-semibold">
+            <h3 className="text-3xl sm:text-3xl md:text-4xl xl:text-5xl text-center text-white font-semibold">
                 Perfect Links Every Time
             </h3>
 
-            <p className="xl:text-xl text-base text-white mt-4 text-center">
+            <p className="xl:text-xl text-lg text-white mt-4 text-center md:w-[28rem] sm:w-96 w-80">
                 Ready to shorten your URL? Enter your
                 <br className="sm:hidden" /> URL below
             </p>
@@ -60,7 +60,7 @@ const ShortenUrlForm: React.FC<ShortenUrlFormProps> = ({ url, setUrl, onSubmit,
     };
 
     const inputErrorClass = error ? 'border-2 border-red-500 text-red-500' : 'text-black';
-    const buttonErrorClass = error ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 active:scale-95';
+    const buttonErrorClass = error || !url ? 'opacity-70 cursor-not-allowed' : 'hover:scale-105 active:scale-95';
 
     return (
         <>
@@ -79,8 +79,7 @@ const ShortenUrlForm: React.FC<ShortenUrlFormProps> = ({ url, setUrl, onSubmit,
                             value={url}
                             placeholder="Enter the URL"
                             onChange={handleUrlChange}
-                            className={`p-5 rounded-lg focus:outline-none w-72 sm:w-80 lg:w-96 h-12 text-lg
-                            ${inputErrorClass}`}
+                            className={`p-5 rounded-lg focus:outline-none h-12 text-lg ${inputErrorClass} w-80 sm:w-96 lg:w-[28rem]`}
                         />
                         <div className="h-6 w-full mb-1">{error && <ErrorMessage message={error} />}</div>
                     </div>
@@ -89,7 +88,7 @@ const ShortenUrlForm: React.FC<ShortenUrlFormProps> = ({ url, setUrl, onSubmit,
                         testId="shorten-button"
                         className={`bg-white text-black text-lg rounded-lg h-10 w-32 flex items-center justify-center space-x-2 transform transition-transform duration-300 ease-in-out ${buttonErrorClass}`}
                         loading={loading}
-                        disabled={!!error || loading}
+                        disabled={!!error || loading || !url}
                     >
                         {!loading && <FaLink />}
                         <span className="font-medium">Shorten</span>

src/components/Navbar/DesktopMenu.tsx

@@ -73,27 +73,31 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({
     const isDashboardPage = router.pathname === '/dashboard';
 
     return (
-        <ul className="hidden sm:flex gap-14 mr-14 items-center">
-            <li className={`relative ${isHomePage ? 'border-b-2 border-white' : ''}`}>
-                <Link href="/" className="text-white hover:text-gray-300">
-                    Home
-                </Link>
-            </li>
-            <li className={`relative ${isDashboardPage ? 'border-b-2 border-white' : ''}`}>
-                <Link href="/dashboard" className="text-white hover:text-gray-300">
-                    Dashboard
-                </Link>
-            </li>
-            <li className="relative group">
-                <ProfileButton
-                    isLoading={isLoading}
-                    isLoggedIn={isLoggedIn}
-                    firstName={firstName}
-                    lastName={lastName}
-                    handleProfileClick={handleProfileClick}
-                    setShowLoginModal={setShowLoginModal}
-                />
-            </li>
+        <ul className="hidden sm:flex justify-between items-center w-full pl-5">
+            <div className="flex gap-14">
+                <li className={`relative ${isHomePage ? 'border-b-2 border-white' : ''}`}>
+                    <Link href="/" className="text-white hover:text-gray-300">
+                        Home
+                    </Link>
+                </li>
+                <li className={`relative ${isDashboardPage ? 'border-b-2 border-white' : ''}`}>
+                    <Link href="/dashboard" className="text-white hover:text-gray-300">
+                        Dashboard
+                    </Link>
+                </li>
+            </div>
+            <div className="ml-auto">
+                <li className="relative group mr-5">
+                    <ProfileButton
+                        isLoading={isLoading}
+                        isLoggedIn={isLoggedIn}
+                        firstName={firstName}
+                        lastName={lastName}
+                        handleProfileClick={handleProfileClick}
+                        setShowLoginModal={setShowLoginModal}
+                    />
+                </li>
+            </div>
         </ul>
     );
 };

src/components/Navbar/index.tsx

@@ -41,13 +41,14 @@ const Navbar: React.FC = () => {
         );
     };
 
+    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://www.realdevsquad.com';
+
     return (
         <nav className="p-4 h-[8vh] mt-3.5 flex items-center justify-between">
-            <Link href="/" className="flex items-center">
-                <Image src="/rds.png" alt="logo" width={50} height={50} className="mr-2 w-30" />
+            <Link href={baseUrl} className="flex items-center">
+                <Image src="/rds.png" alt="logo" width={50} height={50} className="mx-4 w-30" />
             </Link>
-            <div className="flex items-center">
-                <ProfileButton />
+            <div className="hidden sm:flex flex-grow items-center justify-between">
                 <DesktopMenu
                     isLoading={isLoading}
                     isLoggedIn={isLoggedIn}
@@ -57,6 +58,9 @@ const Navbar: React.FC = () => {
                     setShowLoginModal={setShowLoginModal}
                 />
             </div>
+            <div className="flex sm:hidden items-center">
+                <ProfileButton />
+            </div>
             <MobileMenu
                 isMobileMenuOpen={isMobileMenuOpen}
                 toggleMobileMenu={toggleMobileMenu}

src/utils/validateUrl.ts

@@ -5,7 +5,15 @@ interface ValidationResult {
 
 const validateUrl = (url: string): ValidationResult => {
     try {
-        new URL(url);
+        const formattedUrl = new URL(url);
+
+        const domainRegex = /^(?:https?:\/\/)?(?:[\w-]+\.)+[a-z]{2,}$/i;
+
+        const domain = formattedUrl.hostname;
+        if (!domainRegex.test(domain)) {
+            return { isValid: false, errorMessage: 'Enter a valid URL' };
+        }
+
         return { isValid: true, errorMessage: null };
     } catch (error) {
         return { isValid: false, errorMessage: 'Enter a valid URL' };