s-shemmee / GhibliGaze

Explore the enchanting world of Studio Ghibli with GhibliGaze—a captivating single-page application showcasing iconic movies, mesmerizing trailers, and a visual feast of anime art. Powered by React, Tailwind CSS, and the YouTube Data API.

GhibliGaze

Overview

GhibliGaze is a single-page application dedicated to celebrating the extraordinary creations of Studio Ghibli. The page showcases information about Ghibli's iconic movies, captivating trailers, a visually stunning gallery, and the latest news from the Ghibli universe.

Technologies Used

• React (JSX)
• Tailwind CSS
• YouTube Data API V3

Getting Started

1. Clone the Repository:

   git clone https://github.com/s-shemmee/GhibliGaze.git

2. Navigate to the Project Directory:

   cd GhibliGaze

3. Install Dependencies:

   npm install

4. Set Up YouTube Data API Key:

   • Obtain your YouTube Data API v3 key from the Google Developers Console.

   • Create a .env file in the root directory of your project.

   • Add your API key to the .env file as follows:

     VITE_YOUTUBE_API_KEY=YOUR_YOUTUBE_DATA_API_KEY
     

5. Start the Development Server:

   npm run dev

   This will start the development server, and you can view the landing page at http://localhost:5173 in your browser.

Demo

A live demo of GhibliGaze is available at LIVE DEMO. Explore the magic of Studio Ghibli at your fingertips!

Credits

• The anime posters in the Movies section were found and used from the Behance project Posters : Studio Ghibli of Joseph K. Roman.

License

This project is licensed under the MIT License.