🐈 Super Duper Gallery

The Contemporarty Artworks Gallery .

Check out:

• Web: https://superdupergallery.com
• Repo: https://github.com/superdupergallery

Concept

🐈 Super Duper Gallery allow to:

• Discover artworks
• Get to know the artists
• See available pieces on sale

Getting Started

1. Read the Remix Docs to understand about Remix.
2. If new, focus on Remix basics, don't use the Stacks yet. Read Super Simple Start to Remix.
3. If experienced, use various integration such as Prisma ORM and database like MySQL. Read Blog Tutorial (short) and App Tutorial (long).

Tech Stack

1. TypeScript: Typed language
   • Related to JavaScript, HTML, CSS
2. React: UI library
3. Remix: Web framework
   • React Router
4. Tailwind CSS: Styling
5. Radix UI: Interactive components
   • shadcn UI: Styled interactive components
6. Prisma: Database ORM
7. PlanetScale: MySQL-compatible serverless database platform
   • MySQL: Database management system
8. Vercel: App deployment

Setup

Environment Variables

Create the .env file from the example .env file.

cp -i .env.example .env

This .env file is only for local development, not production

Let's configure the required environment variables in the .env file if local, otherwise in the project settings, for:

• DATABASE_URL
• SESSION_SECRET

Create a PlanetScale account to have a MySQL instance for development. After the database has been created, "Get the connection string" and select "Prisma", then copy the full DATABASE_URL.

Keep in mind the free plan only allow for 1 database. So either later keep it, delete it when unused, or upgrade the plan.

Generate a random string for the SESSION_SECRET using openssl rand -base64 32 on the terminal or put any long random text.

DATABASE_URL="mysql://username:password@aws.connect.psdb.cloud/superdupergallery?sslaccept=strict"
SESSION_SECRET="random_secret_text"

Code Editor

When using VS Code, there are several recommended extensions that can be installed to improve the workflow. It's nice to accept the recommendations that listed in .vscode/extensions.json.

Especially (in alphabetical order):

• ESLint
• Inline Fold for CSS
• Markdown All in One
• Prettier
• Prisma
• Remix Forge
• Stylelint
• Tailwind CSS

Development

Dependencies

Use pnpm to improve productivity, so make sure pnpm is installed:

npm i -g pnpm

To run the app locally, make sure the project's local dependencies are installed:

pnpm install
# or
pnpm i

Code

Format, lint, and build to check if the setup is fine:

pnpm check
# run: format lint stylelint build typecheck

pnpm check:fix # to fix most cases if there's an issue
# run: format:fix lint:fix stylelint:fix

Note: Ignore non-critical warning about ESLint and TypeScript

Database

Prisma ORM is used to communicate with the database easily. Since this app is primarily using PlanetScale, the migration files are not needed. Therefore, push the schema directly there, then the migration will be handled through the deploy requests.

Also read:

• Prisma with PlanetScale
• PlanetScale with Prisma

If prefer using Docker and Docker Compose for local development, follow this guide.

Schema to Push

Sync between Prisma schema and the database directly, by making schema changes with prisma db push, which can be done regularly while updating the models:

pnpm db:push
# prisma db push

Even with local development without PlanetScale, this is still okay when prototyping the schema. After a success push, then it will automatically run prisma generate.

Data for Credentials

Create [users-credentials.json] in app/data folder with the format below. You can focus on certain users who want to be able to login in development, so it doesn't have to be everyone. For example, only create for admin, test, or yourname which also available in app/data/users.ts

[
  {
    "username": "username",
    "email": "user1@example.com",
    "password": "set_the_password_1"
  },
  {
    "username": "username2",
    "email": "user2@example.com",
    "password": "set_the_password_2"
  }
  // ...
]

Data for Seed

Then seed the initial data when needed:

pnpm db:seed
# prisma db seed

Check if the data is fine:

pnpm db:check
# tsx prisma/check.ts

Build

Check if the build is fine:

pnpm build
# remix build

This will also run prisma generate too before the build

Develop Locally

If everything works fine, start the Remix development server like so:

pnpm dev
# remix dev

Open up http://localhost:3000 and it should be ready to go!

The vercel dev command provided by Vercel CLI can also be used when necessary.

Regularly, either push or generate the schema when changing the database fields.

pnpm db:push
# prisma db push

pnpm db:gen
# prisma generate

Checking Dependencies

To keep the dependencies fresh, use taze.

pnpm dlx taze

Deployment

This repo has been setup to autodeploy to Vercel automatically on Git push.

The @remix-run/vercel runtime adapter has been deprecated in favor of out of the box Vercel functionality and will be removed in Remix v2. No more using the Vercel template & can just use the Remix template instead. Will be changed after the upgrade to v2.

After having run the create-remix command and selected "Vercel" as a deployment target, import the Git repository into Vercel, and it will be deployed.

If want to avoid using a Git repository, deploy the directory by running Vercel CLI:

pnpm i -g vercel
vercel

It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its Git Integration.

References

• Artsy