Update README and .env sample

.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=''
+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=''

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/
+```