devjoylee / utube

Redux-based YOUTUBE CLONE project using Firebase and YouTube APIs 🚨

Youtube Clone Project

View Demo

Table of Contents

About The Project

Built With

Getting Started

Main Features

Commit Convention

About The Project

Redux-based YouTube clone project using Firebase and YouTube APIs. You can sign in with Google (provided by Firebase Authentication) and enjoy the synchronized Youtube service here (provided by Youtube API)!

State Management with Redux and Redux-Thunk

• Used Redux and Redux-thunk to efficiently manage asynchronous states. 📝 Read More in my blog
• Folder structure

redux
├── actions
│ ├── auth.action.js
│ ├── channel.action.js
│ ├── comment.action.js
│ └── video.action.js
├── reducers
│ ├── auth.reducer.js
│ ├── channel.reducer.js
│ ├── comment.reducer.js
│ └── video.reducer.js
└── store.js

• Production Period : 2022.03.06 - 2022.03.29

Built With

      

Getting Started

You are able to start the app by typing the following commands in the command line:

git clone https://github.com/devjoylee/utube.git
npm install
npm start

Main Features

1. Login Page (Intro)

• OAuth Service
• Implemented Google sign-in using Firebase's Authentication provider 📝 Read More in my blog
• Get access token from the provider and save it in sessionStorage to authenticate an user

• Code Preview

// pages/loginPage.js
export const LoginPage = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const accessToken = useSelector((state) => state.auth.accessToken);

  // when the login button is clicked, activate login action
  const handleLogin = () => {
    dispatch(login());
  };

  // redirect to main page when logged in successfully
  useEffect(() => {
    if (accessToken) {
      navigate('/');
    }
  }, [accessToken, navigate]);

  return <div className='login_page'>// ...</div>;
};

// redux/actions/auth.action.js
// Add google authentication provider
export const login = () => async (dispatch) => {
  try {
    dispatch({ type: LOGIN_REQUEST });

    const provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/youtube.force-ssl');

    const res = await auth.signInWithPopup(provider);

    const accessToken = res.credential.accessToken;
    const profile = {
      name: res.additionalUserInfo.profile.name,
      photoURL: res.additionalUserInfo.profile.picture,
    };

    sessionStorage.setItem('youtube-token', accessToken);
    sessionStorage.setItem('youtube-user', JSON.stringify(profile));

    dispatch({ type: LOGIN_SUCCESS, payload: accessToken });
    dispatch({ type: LOAD_PROFILE, payload: profile });
  } catch (error) {
    console.log(error.message);
    dispatch({ type: LOGIN_FAIL, payload: error.message });
  }
};

2. Main Page

• VIDEOs : If you click each video, it will link to the view page of the video.
• CATEGORY : If you click a category at the top of the main page, it will return new video list about the category keyword.
• SEARCH BAR : If you search any keyword through the search bar, it will link to to the search results page.
• Implemented infinite scrolling using react-infinite-scroll-component library.
• When loading videos, utilized the Skeleton UI to improve the user experience.

• Code Preview

// components/Main/Video/VideoList.js
export const VideoList = ({ loadVideos }) => {
  const dispatch = useDispatch();

  // get video list using redux
  useEffect(() => {
    dispatch(getPopularVideos());
  }, [dispatch]);

  const { videos, activeCategory, loading } = useSelector((state) => state.mainVideo);

  const fetchData = async () => {
    await loadVideos(activeCategory);
  };

  return (
    <div className='video-container'>
      {/*  Custom Infinite Scroll */}
      <InfiniteScroll
        dataLength={videos.length}
        next={fetchData}
        hasMore={true}
        className='video-list'
      >
        {loading || !videos.length
          ? // when loading videos, show the skeleton UI
            [...Array(20)].map((_, i) => <SkeletonVideo key={i} />)
          : videos.map((video, i) => <Video key={i} video={video} />)}
      </InfiniteScroll>
    </div>
  );
};

3. Watch Page

• You can play the video here and see all details such as channel, description, comments, likes, etc
• It has a related video list on the right side of the page.
• When loading a video, utilized the Skeleton UI to improve the user experience.
• You can actually leave comments at the comment section. It will directly leave comments on the video you are watching by synchronizing with your Google account.
• Code Preview

// components/Watch/Comment/CommentList.js
export const CommentList = ({ videoId, video }) => {
  const [text, setText] = useState('');
  const dispatch = useDispatch();
  const commentList = useSelector((state) => state.commentList.comments);
  const commentCount = video?.statistics?.commentCount;

  const handleChange = (e) => setText(e.target.value);

  const handleComment = (e) => {
    e.preventDefault();
    if (text.length === 0) return;

    // POST comment
    dispatch(addComment(videoId, text));
    // GET comment
    setTimeout(() => dispatch(getCommentsById(videoId)), 2500);
    setText('');
  };

  useEffect(() => {
    dispatch(getCommentsById(videoId));
  }, [videoId, dispatch]);

  return <div className='comments'>// ...</div>;
};

Search Result Page

• It will display a list of videos about the keyword you searched from the search bar.
• Implemented infinite scrolling using react-infinite-scroll-component library.
• When loading list, utilized the Skeleton UI to improve the user experience.

Subscription Page

• It will show a list of channels you are subscribed by synchronizing with your Google account.
• Implemented infinite scrolling using react-infinite-scroll-component library.
• When loading list, utilized the Skeleton UI to improve the user experience.

Commit Convention

The commit message is written with the GITMOJI icons in order to make commit messages more intuitive.

Gitmoji	Meaning
🎉	Init or begin a project.
🚚	Move or rename resources
✨	Introduce new features
💄	Add the UI and style files
♻️	Refactor code
📝	Add or update documentation
➕	Add a dependency
🐛	Fix a bug
🚀	Deploy stuff

REFERENCE : Gitmoji (http://gitmoji.dev/)

(back to top)