search

shank35 / TubeYou

1 stars 0 forks source link

readme

logo

TubeYou

Share, explore, and discover

Table of Contents

  1. Introduction
  2. Features
  3. Recent Updates
  4. Technology
  5. A closer look
    • Video
    • Smart Errors
    • The Like Bar
  6. Final Notes

Introduction - At a glance

homepage

TubeYou, a YouTube clone, is a video-sharing platform where users can watch, comment on, and like/dislike videos and upload and share their own videos.

TubeYou was engineered to be responsive, efficient, user-friendly, and fun to use.



Features

A few of the things you can do on TubeYou:

Technology

This is a fullstack application that was built using the following technologies:

A closer look

I want to take a closer look at a few features included in the development of TubeYou.

Video

From the outset, my objective for TubeYou was to provide users with a seamless and effortless video watching experience. Achieving this required careful planning and execution, and I found the process of implementing this feature both challenging and exciting. It was a valuable learning experience to explore the various techniques and technologies that enable a smooth and intuitive user experience.

video index
  const VideoShow = ({ videoId, user }) => {
    const [video, setVideo] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const dispatch = useDispatch();
    useEffect(() => {
      const fetchVideo = async () => {
        setLoading(true);
        try {
          const response = await axios.get(`/api/videos/${videoId}`);
          setVideo(response.data.video);
          dispatch(receiveVideo(response.data.video)); 
          setLoading(false);
        } catch (error) {
          setError(error.response.data.message);
          setLoading(false);
        }
      };
      fetchVideo();
    }, [dispatch, videoId]);

    if (loading) {
      return <div>Loading...</div>;
    }
    if (error) {
      return <div>Error: {error}</div>;
    }
    return video ? <VideoPlayer video={video} user={user} /> : <div>Loading...</div>;
  };

Smart Errors

My goal was to make the process of logging in and signing up for TubeYou seamless and effortless for users. To achieve this, I ensured that any errors encountered during the process were promptly reported from the backend and updated in the system state, enabling me to provide users with clear and precise error messages. With this approach, users can easily understand what's happening if a sign-in or login attempt fails, resulting in a more user-friendly and enjoyable experience.

video index
  const handleSubmit = (e) => {
    e.preventDefault();
    const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    setErrors([]); // clear the errors state
    if (!username) {
      setErrors(['Email address is required']);
      return;
    }
    if (!emailRegex.test(username)) {
      setErrors(['Invalid email address']);
      return;
    }
    onSubmit(username, setErrors);
    setToPassword(true);
  };
  // login demo user with button
  function demoUser() {
    dispatch(sessionActions.login({ credential: 'Demo-lition', password: 'password' }));
  }
  if (toPassword) return <Redirect to="/password" />;
  return (
    <div className="container">
      <div className="box">
        <h2>Sign In</h2>
        <h3>to continue to TubeYou</h3>
        <form onSubmit={handleSubmit}>
          <div className="inputBox">
            <input
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                />
              <label>
                Password
              </label>
          </div>

          <div className="errors">
            <ul>
              {errors.map(error => <li key={error}>{error}</li>)}
            </ul>
          </div>

          <button type="submit">Sign In</button>
        </form>
      </div>
    </div>
  );

During the signup process, I recognized that there are multiple fields that could potentially be invalid. To ensure that users can easily identify the erroneous fields, I implemented a feature that highlights the specific input field in red, making it immediately clear where the issue lies. In addition, a descriptive error message is displayed directly below the field, providing users with clear guidance on how to resolve the error. With this approach, users can quickly and easily complete the signup process without experiencing any frustration or confusion.

video index
  const validateEmail = (email) => {
    const emailPattern = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
    if (!emailPattern.test(email)) {
      setEmailValidationMessage("Please enter a valid email address.");
      setEmailValid(false);
    } else {
      setEmailValidationMessage("Email looks good!");
      setEmailValid(true);
    }
  };

  const validateUsername = (username) => {
    if (username.length < 3) {
      setUsernameValidationMessage("Username must be at least 3 characters long.");
      setUsernameValid(false);
    } else {
      setUsernameValidationMessage("Username looks good!");
      setUsernameValid(true);
    }
  };

  const validatePassword = (password) => {
    if (password.length < 5) {
      setPasswordValidationMessage("Password must be at least 6 characters long.");
      setPasswordValid(false);
    } else {
      setPasswordValidationMessage("Password looks good!");
      setPasswordValid(true);
    }
  };

  const validateConfirmPassword = (confirmPassword) => {
    if (confirmPassword !== password || confirmPassword.length === 0) {
      setConfirmPasswordValidationMessage("Confirm Password field must be the same as the Password field and must not be empty.");
      setConfirmPasswordValid(false);
    } else {
      setConfirmPasswordValidationMessage("Passwords match!");
      setConfirmPasswordValid(true);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    validateEmail(email);
    validateUsername(username);
    validatePassword(password);
    validateConfirmPassword(confirmPassword);

    // Check if any of the input fields are invalid
    if (!emailValid || !usernameValid || !passwordValid || !confirmPasswordValid) {
      return;
    }

Drawing on my extensive experience as a user myself, I am keenly aware of the importance of presenting information in a clear and unambiguous manner. I recognize that users should not have to rely on guesswork or make assumptions about how to navigate a website or application. Therefore, I strive to provide them with the most transparent and straightforward user experience possible.

The Like Bar

One feature that I find particularly notable is the video like bar, which I patterned after the one used by YouTube. The bar provides users with not only the ratio of likes to dislikes, but also the option to highlight the bar by liking the video. Developing this feature presented an enjoyable and intriguing challenge, and its implementation significantly enhances the website's aesthetic appeal and overall user experience.

video index
  return (
    <div className="like-buttons">
      <span className="like-count">{likeCount}</span>
      <button
        className={`like-button ${likeStatus === true ? 'active' : ''}`}
        onClick={handleLikes}
      >
        <i className="fas fa-thumbs-up fa-2x"></i>
        Like
      </button>
      <span className="dislike-count">{dislikeCount}</span>

      <button
        className={`dislike-button ${dislikeStatus === true ? 'active' : ''}`}
        onClick={handleDislike}
      >
        <i className="fas fa-thumbs-down fa-2x"></i>
        Dislike
      </button>
    </div>
  );

Final Notes

My initial project marked a significant milestone in my career as a developer, and I found the experience to be both stimulating and fulfilling. I approached each day with genuine excitement and was eager to develop new features and functionalities that added value to the product. While I'm keen to explore novel technologies and embark on fresh projects, I remain committed to augmenting TubeYou's capabilities with additional features during my free time.

What I plan to implement: