Daily UI - Day 10: Social Share

From:
Daily UI

--

Embarking on the Daily UI 100-Day Design Challenge is an exciting and transformative journey for UI/UX designers of all levels. This challenge offers an unparalleled opportunity to refine design skills, expand creative thinking, and build an impressive portfolio highlighting versatility and expertise in solving real-world interface problems.

For today's challenge, we focus on designing an intuitive social share button—an essential UI element that enhances user engagement by making content easily shareable. Whether it’s an article snippet, a product page, or a captivating photo, a well-designed share button should be visually appealing, accessible, and seamlessly integrated into the user experience. Key considerations include its size, placement, and iconography to ensure effortless sharing across platforms.

Let’s create a sleek, functional, and aesthetically pleasing social share button that encourages interaction and enhances content visibility! 🚀

--

Notification

The spring semester has officially begun at my university in San Francisco! 🎉 Thank you all for your support—this past month has been incredibly productive, and I’m excited for what’s ahead.

To make the most of my time, I’m shifting from my traditional Figma-based design approach to learning React by building interactive UI components and enhancing my front-end development skills. This transition will allow me to bridge the gap between design and development, bringing my creative ideas to life through functional and dynamic web applications.

I’m eager to explore component-based architecture, state management, and modern UI frameworks while continuing to refine my design thinking. Here’s to a semester of growth, new challenges, and leveling up my skills! 🚀

--

Brief Explanation of React:
React is a popular JavaScript library developed by Facebook for building user interfaces, especially for single-page applications. It allows developers to build complex UIs by breaking them down into smaller, reusable components. React is based on a virtual DOM, which optimizes rendering performance by efficiently updating only the parts of the UI that have changed. This makes React applications faster and more responsive. React also uses JSX (JavaScript XML), which is a syntax extension that allows you to write HTML-like code within JavaScript. React is widely used for building modern web applications, thanks to its simplicity and flexibility.

--

Here is the React code of a social share UI using react

import React from 'react'; // Import React library to use JSX and React functionality

const SocialShare = () => { // Define the SocialShare component
  const handleShare = (platform) => { // Define a function that handles sharing logic, accepting a 'platform' argument
    const url = encodeURIComponent(window.location.href); // Get the current URL of the page and encode it for use in a URL
    const text = encodeURIComponent("Check out this awesome content!"); // Create an encoded text string for sharing on social media

    let shareUrl = ''; // Initialize a variable to hold the sharing URL based on the platform

    switch(platform) { // Switch statement to handle different sharing platforms
      case 'facebook': // If the platform is Facebook
        shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`; // Create a Facebook share URL with the encoded current URL
        break; // Break out of the switch statement
      case 'twitter': // If the platform is Twitter
        shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${text}`; // Create a Twitter share URL with the encoded current URL and message
        break; // Break out of the switch statement
      case 'linkedin': // If the platform is LinkedIn
        shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`; // Create a LinkedIn share URL with the encoded current URL
        break; // Break out of the switch statement
      default: // If the platform does not match any case
        return; // Exit the function if the platform is not recognized
    }

    window.open(shareUrl, '_blank'); // Open the share URL in a new browser tab
  };

  return ( // Return the JSX to render the component
    <div> 
      <button onClick={() => handleShare('facebook')}>Share on Facebook</button> // Button for sharing on Facebook, calls handleShare with 'facebook' argument
      <button onClick={() => handleShare('twitter')}>Share on Twitter</button> // Button for sharing on Twitter, calls handleShare with 'twitter' argument
      <button onClick={() => handleShare('linkedin')}>Share on LinkedIn</button> // Button for sharing on LinkedIn, calls handleShare with 'linkedin' argument
    </div>
  );
};

export default SocialShare; // Export the SocialShare component so it can be used in other parts of the app

--

How I ran the code

1. Go to codesandbox, an online IDE
2. Open the react template
3. Replace the app.js code with the above code
4. Click on "Open preview"

Link to the sandbox

--

Highlights of the program

1. React Component (SocialShare): This component renders three buttons for sharing content on Facebook, Twitter, and LinkedIn

2. Event Handling: The handleShare function is called on button clicks, dynamically generating the correct sharing URL based on the selected platform

3. URL Encoding: You're encoding the URL and the share message (text) to ensure they are properly formatted for use in the URL

4. window.open(): This method opens the sharing URLs in a new tab, offering users the ability to share content without leaving the current page

--

Conclusion

In conclusion, the Daily UI challenge is an excellent opportunity for aspiring UI/UX designers to sharpen their skills and gain hands-on experience in building functional and visually appealing user interfaces. By transitioning from traditional design tools like Figma to hands-on React development, I've been able to deepen my understanding of how design and functionality intersect in modern web applications. The social share button component is just one example of how interactive elements can enhance user engagement and improve the overall user experience. As I continue to explore component-based architecture and modern frameworks like React, I'm excited to tackle new challenges and further refine my design and development expertise. This journey is just beginning, and I look forward to what lies ahead in the world of UI/UX design and front-end development!