Derick80/remix-dh

Welcome to Remix

• Remix Docs

nvm use node v20.11.0

Notes

• SEO

Prisma Seeding in Development

• Until form login is working again login with discord and then copy paste the userId from prisma studio into the seed file

dependency usage

https://sergiodxa.com/tutorials/find-and-remove-unused-code-with-knip

Component Reference

• Accordian - https://github.com/AllanSimoyi/PersonalWebsite/blob/main/app/core/components/AccordionItem.tsx
• Resizeable image component reference
• Blog Category Filter
  • reference
  • https://github.com/wKovacs64/drinks/blob/dev/app/navigation/breadcrumbs.tsx

Database Setup

I use Render for hosting a postgress database using Prisma ORM. Create a new database and then add the following environment variables to your .env file.

DATABASE_URL=''

Image Upload Setup

Create a Cloudinary account and add the following environment variables to your .env file.

CLOUDINARY_API_KEY= CLOUDINARY_API_SECRET= CLOUDINARY_CLOUD_NAME=

Fly Setup

1. Install flyctl

2. Sign up and log in to Fly

flyctl auth signup

1. Setup Fly. It might ask if you want to deploy, say no since you haven't built the app yet.

flyctl launch

Welcome to Remix + Vite

📖 See the Remix docs and the Remix Vite docs for details on supported features.

Tech Stack

• Remix
• Vite
• TypeScript
• Tailwind CSS
• Prisma
• PostgreSQL
• Fly.io
• Cloudinary
• Zod

Additional Packages

• Prettier Tailwind
• tsx
• Remix Dev Tools
• Remix Flat Routes
• Remix Auth

ToDos

• [] Rewrite, refactor, or create new components derived from the original project.
  • [] brand-icon.tsx
  • [] user-placeholder.tsx
  • [] resume/index.ts
  • [] Prisma seed data
  • []

Documentation

scripts

I am trying to do a bunch of automation and one thing is to seed my db AND scan my project for updated content and update the db with the new content.

 "firstSeed": "npx prisma db push && npx prisma generate && npx prisma db seed && tsx scripts/init-seed.ts",

This should only be run once during the initial dev and production set up. Using this at any other time will wipe your db. I should add some type of warning!

zods stf

// This adds type narrowing by the intent property const Schema = z.discriminatedUnion('intent', [ z.object({ intent: z.literal('delete'), id: z.string() }), z.object({ intent: z.literal('create'), name: z.string() }), ]);

export async function action({ request }: ActionArgs) { const data = await zx.parseForm(request, Schema); switch (data.intent) { case 'delete': // data is now narrowed to { intent: 'delete', id: string } return; case 'create': // data is now narrowed to { intent: 'create', name: string } return; default: // data is now narrowed to never. This will error if a case is missing. const _exhaustiveCheck: never = data; } };

Images

• Blur Data URL Generator

Getting Started

• use openssl rand -hex 32 to generate a secret key for the .env file

Development

Run the Vite dev server:

npm run dev

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of npm run build

• build/server
• build/client

Welcome to Remix + Vite

📖 See the Remix docs and the Remix Vite docs for details on supported features.

Development

https://github.com/jolbol1/JamesShopland.com

Run the Vite dev server:

npm run dev

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of npm run build

• build/server
• build/client