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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

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

• Website - Amjad Shadid
• Frontend Mentor - @amjadsh97
• Twitter - @Amjadshadid
• Linkedin - @Amjad Shadid