Movie Browse

Movie Browse

The Movie Browse website

Directory structure

Components : The Components folder contains all the small individual Components which come together to form the website. Common : The Common folder contains all the components which were used more than once on several pages. Hooks : The Hooks folder contains function which perform certains task and then cause a re render of the website to occur.

React

The main point of react comes down to two point

React has small components which can be defined in seperate files and then used as tag in the main page

The example below is a small footer containing two link

const Footer = () => (
  <Wrapper>
    <Content>
      <Link to='/AboutUs' style={{ textDecoration: 'none' }}>
        <p>About Us</p>
      </Link>
      <Link to='/ContactUs' style={{ textDecoration: 'none' }}>
        <p>Contact Us</p>
      </Link>
    </Content>
  </Wrapper>
);
export default Footer;

The pages on website never changes . The only change happens when the re-render of website is causes by hooks

The below hook is used to fetch the next page of movies from the API and then it appends it to the end of existing movies in the array. After it has fetched the movies it uses the useEffect to trigger a re render of the page.

export const useHomeFetch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [state, setState] = useState(initialState);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);

  const fetchMovies = async (page, searchTerm = "") => {
    try {
      setError(false);
      setLoading(true);
      const movies = await API.fetchMovies(searchTerm, page);

      setState(prev => ({
        ...movies,
        results:
          // Appending the new moveis from page after 1 to the end of the array
          page > 1 ? [...prev.results, ...movies.results] : [...movies.results]
      }))
    } catch (error) {
      setError(true);
    }
    setLoading(false);
  };

  // Fetching the movies from the datbase
  useEffect(() => {
    if(!searchTerm){
      const sessionState = isPersistedState('homeState');
      if(sessionState){
        setState(sessionState);
        return;
      }
    }

    setState(initialState);
    fetchMovies(1, searchTerm);
  }, [searchTerm]);

Website Pages

Main Home Page

Database Endpoints

• GET

  :3001/register?username=${username}&email=${email}&password=${password}
      

  register a new user

• GET

  :3001/login?email=${email}&password=${password}
      

  verifies login details

• GET

  :3001/view_count?email=${email}
      

  pulls total movies page visit count of user with given email id

• POST

  :3001/view_count?email=${email}
      

  increments view count of a user with given email by 1