The 2020 Next.js rewrite, now being merged into impress!
Find a file
Matchu 3b6bc0b6eb Oops, add Vary: Origin to GraphQL requests
Lol I guess we've probably just been having intermittent CORS issues
forever, oops. I hope the cache has been mostly warmed on the right
thing! But today I checked and the entire species/color picker on the
Rails app wasn't working for CORS reasons, so like. Yeah oof.
2023-11-02 16:35:11 -07:00
.github/workflows Fix GitHub Action for Sentry, attempt 6 2021-01-16 11:27:26 -08:00
.husky Script to set up dev db with public DTI data 2022-11-13 07:03:44 -08:00
.vscode update chakra imports 2020-12-25 09:08:33 -08:00
deploy Restart the app every 8 minutes 2023-10-17 01:00:23 -07:00
pages Oops, add Vary: Origin to GraphQL requests 2023-11-02 16:35:11 -07:00
public [WIP] Run cra-to-next codemod to be on Nextjs 2021-11-01 21:49:23 -07:00
scripts Increase timeout in archive SQL queries 2023-06-12 10:56:40 -07:00
src Oops, add Vary: Origin to GraphQL requests 2023-11-02 16:35:11 -07:00
.eslintrc.json [WIP] Fix eslint for Next.js 2021-11-01 22:07:46 -07:00
.gitattributes Script to set up dev db with public DTI data 2022-11-13 07:03:44 -08:00
.gitignore Upgrade to yarn 2 2023-07-21 18:30:07 -07:00
.yarnrc.yml Upgrade to yarn 2 2023-07-21 18:30:07 -07:00
LICENSE.md New terms of use page 2022-09-25 06:00:59 -07:00
lint-staged.config.js [WIP] Fix eslint for Next.js 2021-11-01 22:07:46 -07:00
next-env.d.ts Upgrade to Next 12.3.2 2023-11-02 16:33:33 -07:00
next.config.js Add /api/assetImageRedirect 2022-10-11 12:21:14 -07:00
package.json Upgrade to Next 12.3.2 2023-11-02 16:33:33 -07:00
README.md Add installation guide to README 2022-11-13 09:09:36 -08:00
tsconfig.json Fix TypeScript errors in pages dir 2022-09-14 18:04:10 -07:00
yarn.lock Upgrade to Next 12.3.2 2023-11-02 16:33:33 -07:00

Dress to Impress beach logo

Dress to Impress 2020

This is a rewrite of the Neopets customization app, Dress to Impress!

It's a React app, using the Next.js framework. (But kinda awkwardly, because it used to be a create-react-app, and we never fully rearchitected from that!)

The motivating goals of the rewrite are:

  • Mobile friendly, to match Neopets's move to mobile.
  • Simple modern tech, to be more maintainable over time and decrease hosting costs.

Installation guide

Getting everything set up

We'll assume you already have your basic development environment ready! Be sure to install the following:

  • Git
  • Node v16
  • The Yarn package manager
  • A MySQL database server

Before you clone the repository, install Git LFS, a tool for managing large files in Git. (We use this for the big batch of public data that we'll import into your dev database.)

Next, clone this repository, and ensure that scripts/db/public-data-from-modeling.sql.gz is around ~30MB large. (If it's much smaller, like 4KB, that probably means Git LFS didn't run correctly, so the next step would be to debug that, delete the repository, and try again!)

Next, run yarn install. This should install the app's NPM dependencies. (You may need to install some additional libraries to your machine for certain dependencies to install correctly. See the instructions for canvas in particular!)

Create your development database

Next, create two MySQL databases: openneo_impress and openneo_id. Then, create a MySQL user named impress_2020_dev with password impress_2020_dev, with full permissions for both databases.

(We're assuming that, on your local machine, your MySQL server isn't connected to the outside internet, and that there probably won't be sensitive information stored in your DTI database anyway, so it should be okay for this username and password to be hardcoded.)

Finally, run yarn db:setup-dev:full to fill the databases with the necessary schema, plus some real public data exported from DTI—like items, species, and colors!

See it work!

Okay, let's run yarn dev! This should start a DTI server on port 3000. Open it in your browser and hopefully it works!! 🤞

Optional: You might need some environment variables

In Next.js, you can set environment variables in a .env file, in the root of the app. (This will be ignored by Git, thanks to our .gitignore file.)

Note that some the features of the site won't work without special environment variables set, because they depend on production services we can't reproduce locally. But they generally fail gracefully and show a helpful error message, so you mostly won't have to worry about it until you run into it!

You mostly won't need to use this! But one early case you'll run into: for account creation and login to work, you'll need to create a .env file with a value for DTI_AUTH_TOKEN_SECRET: a secret string we use to cryptographically validates the user's login cookie. In production this is a closely-guarded secret, but for development, just open a random password generator and copy-paste the result into .env!

DTI_AUTH_TOKEN_SECRET=jl2DFjkewkrufsIDKwhatever

Architecture sketch

First, there's the core app, in this repository.

  • React app: Runs mainly on the client's machine. Code in src/app.
  • API functions: Run on our VPS server. Code in api and src/server.

Then, there's our various data storage components.

  • MySQL database: Runs on our Linode VPS, colocated with the old app.
  • Amazon S3: Stores PNGs of pet/item appearance layers, converted from the Neopets SWFs. (Once Neopets releases HTML5-compatible assets for all their items, we can hopefully remove this!)

Finally, there's our third-party integrations.

  • Honeycomb: For observability & performance insights on the backend.
  • Discord: For logging Support users' actions to a private Discord server.
  • Neopets: We load pet data from them! And plenty of assets!
  • Fastly: A CDN cache that sits in front of our server to help cache common requests and expensive operations. We also use them to proxy for images.neopets.com in some cases, so we can add crossdomain headers.

Notable old components not currently included in Impress 2020:

  • Elasticsearch: Used for lightning-fast item search queries. So far, we're finding the MySQL queries to be fast enough in practice. Might consider using some kind of fulltext query engine if that doesn't scale with more users!
  • Resque: Used to schedule background tasks for modeling and outfit thumbnails. (We now perform these tasks on-demand, and use Fastly to cache things like thumbnails!)
  • Memcache: Used to cache common HTML and JSON snippets. Not yet needing anything similar in Impress 2020!
  • The entire old Rails app! No references to it in here, aside from some temporary URL links to features that aren't implemented here yet.