Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/s-shemmee/ghibligaze
ghibli-studio jsx reactjs single-page-app spa tailwindcss youtube-api youtube-api-v3
Last synced: about 20 hours ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/s-shemmee/ghibligaze
- Owner: s-shemmee
- License: mit
- Created: 2023-10-25T15:31:50.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-27T11:24:35.000Z (5 months ago)
- Last Synced: 2024-08-27T12:46:07.910Z (5 months ago)
- Topics: ghibli-studio, jsx, reactjs, single-page-app, spa, tailwindcss, youtube-api, youtube-api-v3
- Language: JavaScript
- Homepage: https://ghibli-gaze.vercel.app
- Size: 29.8 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:**
```bash
git clone https://github.com/s-shemmee/GhibliGaze.git
```
2. **Navigate to the Project Directory:**
```bash
cd GhibliGaze
```
3. **Install Dependencies:**
```bash
npm install
```
4. **Set Up YouTube Data API Key:**
- Obtain your YouTube Data API v3 key from the [Google Developers Console](https://console.developers.google.com/).
- Create a `.env` file in the root directory of your project.
- Add your API key to the `.env` file as follows:
```plaintext
VITE_YOUTUBE_API_KEY=YOUR_YOUTUBE_DATA_API_KEY
```
5. **Start the Development Server:**
```bash
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](https://ghibli-gaze.vercel.app). 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](https://www.behance.net/josephroman).
## License
This project is licensed under the MIT License.