Skip to content

Latest commit

 

History

History
115 lines (85 loc) · 3.53 KB

README.md

File metadata and controls

115 lines (85 loc) · 3.53 KB
Raw

Frontend Mentor - Entertainment web app solution

This is a solution to the Entertainment web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic project.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Navigate between Home, Movies, TV Series, and Bookmarked Shows pages
  • Add/Remove bookmarks from all movies and TV series
  • Search for relevant shows on all pages
  • Bonus: Build this project as a full-stack application
  • Bonus: If you're building a full-stack app, we provide authentication screen (sign-up/login) designs if you'd like to create an auth flow

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Typescript
  • React - JS library
  • React Router Dom - JS library
  • Firebase - backend auth

What I learned

const [data, setData] = useState<Video[]>([]);

// Function to set data from local storage
const setDataFromLocalStorage = () => {
	const storedData: any = localStorage.getItem('data') || dataJSON;
	if (storedData) {
		setData(JSON.parse(storedData));
	}
};

useEffect(() => {
	setDataFromLocalStorage();
}, []); // Run once on component mount

//code to handle the differenet sizes of images
{data.map((item: Video, index: number) => (
	//some elements...
	<article className={`card ${isTrending ? "card-overlay" : "stacked-card"}`} key={index}>
      <picture>
	    {item.isTrending && item.thumbnail.trending && (
		<>
			<source srcSet={require(`../../assets/${item.thumbnail.trending.large}`)}
			        media='(min-width: 1170px)'/>
			<img src={require(`../../assets/${item.thumbnail.trending.small}`)} alt=''/>
		</>
	    )}
	    {!item.isTrending && (
		  <>
			<source srcSet={require(`../../assets/${item.thumbnail.regular.large}`)} media='(min-width: 1170px)'/>
			<source srcSet={require(`../../assets/${item.thumbnail.regular.medium}`)} media='(min-width: 768px)'/>
			<img src={require(`../../assets/${item.thumbnail.regular.small}`)} alt=''/>
		  </>
	    )}
      </picture>
    //some elements...
    </article>
))}

Continued development

In the future, I will prioritize further developing my skills in make full stack app backend app.

Useful resources

  • React Docs - This helped me for building react components. I really liked using this docs.

Author