diff --git a/.env.sample b/.env.sample index 5cdcdb82..e6f68af6 100644 --- a/.env.sample +++ b/.env.sample @@ -5,4 +5,8 @@ NODE_PATH='src/' # Don't add a trailing slash to these URLs. REACT_APP_SIERO_API_URL='' REACT_APP_SIERO_OAUTH_URL='' -REACT_APP_SIERO_IMG_URL='' \ No newline at end of file +REACT_APP_SIERO_IMG_URL='' + +# You will have to use a Google account to acquire a Youtube API key +# or embeds will not work! +NEXT_PUBLIC_YOUTUBE_API_KEY='' diff --git a/README.md b/README.md index c87e0421..74ef4cd9 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,40 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +![Header image for hensei-web](README.png) +hensei-web is the frontend for granblue.team, an app for saving and sharing teams for [Granblue Fantasy](https://game.granbluefantasy.jp). ## Getting Started -First, run the development server: +First, you have to set up your environment file. `.env.sample` is provided as an example, but here we'll show an even more explicit example for running locally: + +``` +# Enable relative paths for imports. +NODE_PATH='src/' + +# App URLs +# Don't add a trailing slash to these URLs. +# The API will run on port 3000 by default, but make sure to change +# this if you use a different port. +NEXT_PUBLIC_SIERO_API_URL='http://127.0.0.1:3000/api/v1' +NEXT_PUBLIC_SIERO_OAUTH_URL='http://127.0.0.1:3000/oauth' + +# This will serve images out of the Next.js /public directory in development, +# but in production, you will want this to host these images on a cloud storage provider +# like Amazon S3, and then change this to the full bucket URL. +NEXT_PUBLIC_SIERO_IMG_URL='/images' + +# You will have to use a Google account to acquire a Youtube API key +# or embeds will not work! +NEXT_PUBLIC_YOUTUBE_API_KEY='' +``` + +Then, install all dependencies: + +```bash +npm install +# or +yarn install +``` + +Then, run the development server with: ```bash npm run dev @@ -10,25 +42,28 @@ npm run dev yarn dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +## Assets -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. +The [hensei-api](https://github.com/jedmund/hensei-api) has tasks that will help you get assets, although some were crafted or renamed by hand. The front-end expects this folder structure inside of the `images` folder: -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +``` +/ +├─ accessory-grid/ +├─ accessory-square/ +├─ awakening/ +├─ ax/ +├─ chara-main/ +├─ chara-grid/ +├─ chara-square/ +├─ jobs/ +├─ job-icons/ +├─ job-skills/ +├─ mastery/ +├─ summon-main/ +├─ summon-grid/ +├─ summon-square/ +├─ updates/ +├─ weapon-main/ +├─ weapon-grid/ +├─ weapon-square/ +``` diff --git a/README.png b/README.png new file mode 100644 index 00000000..44fcfc0a Binary files /dev/null and b/README.png differ