Cinemate - Client

Cinemate is a web application that helps users wind down to watch their favorite movies and TV shows. Users can explore trending content, filter by various categories, and bookmark their favorite shows and movies for easy access.

From Design

To Website

Website Link

Visit Cinemate

Table of Contents

• Client Tech Stack
• Features
• Color Reference
• Usage/Examples
• Run Locally
• Credit
• Related
• Acknowledgements

Client Tech Stack

• Vite
• React
• React Router
• React-Helmet
• TailwindCSS
• Clerk
• Tanstack
• Netlify

Features

• Authentication and Authorization (Clerk) with optional provider (Google) to sign in/sign up.
• Shows recommended content based off what the user has bookmarked.
• Ability to filter content based on Trending, Bookmarked, TV Shows, and Movies (React Router) from the Navbar.
• Ability to search content based on user-submitted queries (React Router) in the search bar and based on selected filters from the Nav.

Color Reference

Color	Hex
ma-black	#10141E
ma-gray	#5A698F
ma-blue	#161D2F
ma-white	#FFFFFF

Usage/Examples

const Home = () => {

    let [searchParams] = useSearchParams()
    let searchString = searchParams.get('search')

    return (
        <div className="flex flex-col">
            <Helmet>
                <title>Home - Entertainment App</title>
                <meta name="description" content="Stream endless entertainment with thousands of hit movies, TV series, documentaries, and exclusive originals all in one place. Discover your next favorite story on our entertainment platform today." />
            </Helmet>
            <div className="pl-[1rem] tablet:pl-[1.5rem] w-full">
                {!searchString && <TrendingContainer />}
            </div>
                <MediaContainer pageTitle={"Trending"} />
        </div>
    )

}

export default Home

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

VITE_CLERK_PUBLISHABLE_KEY

VITE_BACKEND_URL

Run Locally

Clone the project

  git clone https://github.com/grammerjam/tg-main.git

Go to the project directory

  cd tg-main/P1/entertainment-app

Install dependencies

  npm install

Start the server

  npm run start

Related

Here are some related projects

https://movie-web.app/browse/game

Credit - Team MiamiAngels

Jose Facade - Full Stack Developer / Audio Engineer & Director | GitHub

Alejandro Vecchio - Lead Developer | GitHub

Olivia Banks - Project Manager / Athlete

Luis Perez - Full Stack Developer / Powerlifter | GitHub

Acknowledgements

Special thanks to Allan Tito and the senior developers from the Grammerhub community for making this project happen.

---

Powered by Grammerhub