{"id":13732882,"url":"https://github.com/mhaidarhanif/rewinds","last_synced_at":"2025-05-08T09:31:05.397Z","repository":{"id":142233356,"uuid":"611935851","full_name":"mhaidarhanif/rewinds","owner":"mhaidarhanif","description":"⏪ Rewinds – Remix Tailwind Stack with React, Radix UI, Zod, Conform, Prisma ORM, MySQL on PlanetScale, Vercel, and more","archived":true,"fork":false,"pushed_at":"2024-01-04T05:54:24.000Z","size":2298,"stargazers_count":113,"open_issues_count":0,"forks_count":4,"subscribers_count":9,"default_branch":"main","last_synced_at":"2024-08-03T03:01:49.613Z","etag":null,"topics":["boilerplate","fullstack","planetscale","prisma-orm","radix-ui","react","reactjs","remix","remix-stack","tailwind","tailwindcss","template","typescript","vercel","zod"],"latest_commit_sha":null,"homepage":"https://rewinds.mhaidarhanif.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mhaidarhanif.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["mhaidarhanif"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-03-09T21:09:46.000Z","updated_at":"2024-08-03T03:01:59.542Z","dependencies_parsed_at":"2024-08-03T03:01:52.753Z","dependency_job_id":"53aeecca-c793-45fb-a11b-f26390c71bc9","html_url":"https://github.com/mhaidarhanif/rewinds","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhaidarhanif%2Frewinds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhaidarhanif%2Frewinds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhaidarhanif%2Frewinds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhaidarhanif%2Frewinds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mhaidarhanif","download_url":"https://codeload.github.com/mhaidarhanif/rewinds/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224717469,"owners_count":17357889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","fullstack","planetscale","prisma-orm","radix-ui","react","reactjs","remix","remix-stack","tailwind","tailwindcss","template","typescript","vercel","zod"],"created_at":"2024-08-03T03:00:35.074Z","updated_at":"2024-11-15T01:30:57.622Z","avatar_url":"https://github.com/mhaidarhanif.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mhaidarhanif"],"categories":["Remix Boilerplate","TypeScript","boilerplate","Boilerplates \u0026 Starters"],"sub_categories":[],"readme":"# Rewinds\n\n\u003e ⏪ Rewinds is no longer maintained since Remix v2. Check out the continuation on [🐶 Dogokit](https://dogokit.allnimal.com) / [🐶 Dogokit Remix](https://github.com/dogokit/dogokit-remix)\n\n![Rewinds](https://raw.githubusercontent.com/mhaidarhanif/rewinds/main/public/assets/screenshots/rewinds-screenshot-dark.png)\n\n## Introduction\n\n[⏪ Rewinds](https://rewinds.mhaidarhanif.com) is a web app starter kit with mainly Remix and Tailwind CSS. Visit the demo at [rewinds.mhaidarhanif.com](https://rewinds.mhaidarhanif.com).\n\nThis template can still be used as is and quite stable with Remix v1, but will not be updated anymore. See the latest continuation of this starter as [🐶 Dogokit](https://dogokit.allnimal.com), one of them is being [🐶 Dogokit Remix](https://github.com/dogokit/dogokit-remix).\n\n## Goals\n\nThe goal is to be as productive as possible to ship things fast. So it is a highly opinionated collection of software engineering and web development workflow, interactive UI components, functionality hooks and utilities.\n\nUse this to build any web apps:\n\n- Personal Website\n- Company Profile\n- Interactive Form\n- Todo List\n- Blog or News\n- Social Media\n- Community Forum\n- Support Desk\n- Art Gallery\n- Job Board\n- Hiring or Recruitment\n- Applicant Tracking System (ATS)\n- Inventory Management\n- Events Management\n- Knowledge Management\n- Admin Panel or Dashboard\n- E-Commerce or Storefront\n- Product or Project Management\n- Content Management System (CMS)\n- Learning Management System (LMS)\n\n## Quick start\n\nStarting new? [Use this template to generate the repository](https://github.com/mhaidarhanif/rewinds/generate).\n\nClone?\n\n```sh\ngit clone git@github.com:mhaidarhanif/rewinds.git\n```\n\nUse `npx`?\n\n```sh\nnpx create-remix@latest --template mhaidarhanif/rewinds\n```\n\nDeploy quickly?\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmhaidarhanif%2Frewinds\u0026env=DATABASE_URL,REMIX_SESSION_SECRET,REMIX_APP_NAME,REMIX_APP_EMAIL\u0026project-name=my-rewinds-app\u0026repository-name=my-rewinds-app\u0026demo-title=Rewinds\u0026demo-description=A%20starter%20kit%20with%20Remix%2C%20Tailwind%20CSS%2C%20and%20the%20TypeScript%20ecosystem.\u0026demo-url=https%3A%2F%2Frewinds.mhaidarhanif.com\u0026demo-image=https%3A%2F%2Frewinds.mhaidarhanif.com%2Fassets%2Fimages%2Fcat-study-dark.png)\n\nThen make sure to explore the repo to rename and replace the contents along the way. As this is a template, not a blank repo generator.\n\n## Tech Stack\n\n### Primary Tech Stack\n\nThe main prerequisites to learn, understand, and use with the stack.\n\n1. [TypeScript](https://typescriptlang.org): typed language\n2. [React](https://react.dev): UI library\n3. [Remix](https://remix.run): web framework\n4. [Tailwind CSS](https://tailwindcss.com): styling\n5. [Radix UI](https://radix-ui.com): interactive components\n6. [Prisma](https://prisma.io): database ORM\n7. [PlanetScale](https://planetscale.com): database management system\n8. [Vercel](https://vercel.com): deployment\n\nIf you work as a team, I recommend to:\n\n1. Use [Doppler](https://doppler.com) or [Dotenv](https://dotenv.org) as secrets management platform to share the environment variables. So you can optionally use `.env` file. If you need to share quickly [EnvShare](https://envshare.dev) is good.\n2. Use [Vercel Pro](https://vercel.com/docs/concepts/payments-and-billing/pro) to make code review with preview deployments easier.\n\n(Architecture diagram can help later on here)\n\n### Complete Tech Stack\n\nThe complete stack are Node.js, TypeScript, Remix, Remix Auth, React, Tailwind CSS, Radix UI, Zod, Conform, Prisma ORM, PlanetScale, and Vercel. We also aim to prioritize which has open source option, free-tier, or freemium. [Check the GUIDE.md](GUIDE.md) if you need more info on the project setup, structure, and files.\n\nLegends:\n\n- 🧰 = required or should not be changed\n- 🎉 = 3rd party service or platform\n- 🧩 = optional or interchangeable\n- 💠 = available as open source\n- 🚧 = still in development or not available\n\n#### Core\n\n- [Node.js](https://nodejs.org): runtime 🧰💠\n  - [pnpm](https://pnpm.io): package manager 🧩💠\n- [TypeScript](https://typescriptlang.org): typed language 🧰💠\n- [React](https://react.dev): UI library 🧰💠\n- [Remix](https://remix.run): web framework 🧰💠\n\n#### Styling and Components\n\n- [Tailwind CSS](https://tailwindcss.com): styling 🧰💠\n- [Fontsource](https://fontsource.org): web fonts 🧰\n- [Radix UI](https://radix-ui.com): unstyled UI components 🧰🧩💠\n  - [Headless UI](https://headlessui.dev) 🧩💠\n  - [Ariakit](https://ariakit.org) 🧩💠\n- [Icones](https://icones.js.org): icon search 💠\n  - [Lucide](https://lucide.dev): icon set 💠\n  - [Iconoir](https://iconoir.com): icon set 💠\n- [React Email](https://react.email): email styling 🚧🧩💠\n- [TanStack Table](https://tanstack.com/table): unstyled table grid component 🚧🧩💠\n\n#### Form Handling and Data Validation\n\n- [Conform](https://conform.guide): form handling 🧰💠\n- [Zod](https://zod.dev): data validation 🧰💠\n  - [Zodix](https://github.com/rileytomasek/zodix) 🧩💠\n  - [zod-form-data](https://npmjs.com/package/zod-form-data) 🧩💠\n\n#### Database and ORM\n\n- [Prisma ORM](https://prisma.io): database ORM 🧰💠\n- [MySQL on PlanetScale](https://planetscale.com): database management system 🧩🎉💠\n\n#### Auth Provider\n\n- [Remix Auth](https://github.com/sergiodxa/remix-auth) 🧰💠\n  - [Lucia](https://lucia-auth.com) 🧩💠\n  - [Clerk](https://clerk.dev) 🧩🎉\n\n#### Tools: Code Quality\n\n- [Prettier](https://prettier.io): code formatter 🧰💠\n- [ESLint](https://eslint.org): code linter 🧰💠\n- [Stylelint](https://stylelint.io): styling linter 🧰💠\n\n#### Tools: Deployment\n\n- [Vercel](https://vercel.com) 🧰🧩🎉\n- [Fly](https://fly.io) 🧩🎉\n- [Render](https://render.com) 🧩🎉\n- [Railway](https://railway.app) 🧩🎉\n- [Google Cloud](https://cloud.google.com) 🧩🎉\n- [Amazon Web Services (AWS)](https://aws.amazon.com) 🧩🎉\n\n#### Tools: Domain and DNS and SSL/TLS\n\n- [Cloudflare](https://cloudflare.com) 🧩🎉\n\n#### Tools: Environment Variable/Secret\n\n- [Doppler](https://doppler.com) 🧩🎉\n- [Dotenv](https://dotenv.org) 🧩🎉\n\n#### Tools: Analytics\n\n- [Vercel Analytics](https://vercel.com/docs/concepts/analytics) 🧩🎉\n  - Enable it on your Vercel projects dashboard\n- [Posthog](https://posthog.com): product platform and data tools 🧩🎉💠\n- [Jitsu](https://jitsu.com): data pipeline and ingestion 🚧🧩🎉💠\n\n#### Tools: Image\n\n- Placeholders\n  - [Dicebear](http://dicebear.com): avatar placeholder 🧩🎉💠\n- Stock\n  - [Unsplash](http://unsplash.com): image placeholder 🚧🧩🎉\n- Upload and assets\n  - [Uploadcare](https://uploadcare.com): assets management 🧩🎉\n  - [ImageKit](https://imagekit.io): assets management 🚧🧩🎉\n  - [Cloudinary](https://cloudinary.com): assets management 🚧🧩🎉\n  - [UploadThing](http://uploadthing): upload management 🚧🧩💠\n- Maps\n  - [Mapbox](https://example.com) 🚧🧩💠\n  - [`mapbox-gl`](https://example.com)\n  - [`react-map-gl`](https://example.com)\n\n#### Tools: Video\n\n- [Mux](https://mux.com): video streaming and management 🚧🧩🎉\n\n#### Tools: Transactional Email 🚧\n\n- [Resend](https://resend.com) 🚧🧩🎉\n- [Mailjet](https://mailjet.com) 🚧🧩🎉\n\n#### Tools: Marketing Email 🚧\n\n- [ConvertKit](https://convertkit.com) 🚧🧩🎉\n- [Bento](https://bentonow.com) 🚧🧩🎉\n\n#### Tools: Cache and Rate Limiter\n\n- [Upstash](https://upstash.com) 🚧🧩🎉\n\n#### Tools: Payment 🚧\n\n- [Lemon Squeezy](https://lemonsqueezy.com) 🚧🧩🎉\n- [Paddle](https://paddle.com) 🚧🧩🎉\n- [Stripe](https://stripe.com) 🚧🧩🎉\n\n#### Tools: Testing 🚧\n\n- [Vitest](https://vitest.dev) 🚧🧩💠\n- [Testing Library](https://testing-library.com) 🚧🧩💠\n- [Mock Service Worker (MSW)](https://msw.io) 🚧🧩💠\n- [Playwright](https://playwright.dev) 🚧🧩💠\n- [Ladle](https://ladle.dev) 🚧🧩\n\n#### Tools: Container\n\n- [Docker](http://www.docker.com) 🧩💠\n  - [Docker Compose](https://docs.docker.com/compose) 🧩💠\n  - [Docker Hub](https://hub.docker.com) 🚧🧩💠\n\n### Extra Tech Stack\n\nAlthough these are not included, if you need a separate backend/server/service, here are the recommendations:\n\n#### REST API\n\n- [NestJS](https://nestjs.com)\n  - [Express](https://expressjs.com)\n  - [Fastify](https://fastify.io)\n\n#### GraphQL\n\n- [GraphQL](https://graphql.org)\n- [GraphQL Yoga](https://github.com/dotansimha/graphql-yoga)\n  - [Express](https://expressjs.com)\n- [Pothos](https://github.com/hayes/pothos)\n\n#### tRPC\n\n- [tRPC](https://trpc.io)\n\n#### Auth\n\n- [Passport](https://passportjs.org)\n\n## Roadmap\n\nIncluded features for the end users:\n\n- [x] Premade contents\n- [x] Light and dark mode theme\n- [x] Site layout and routes/pages\n- [x] Admin dashboard and metrics/statistics\n- [x] Register, log in, log out\n  - [x] Data validation and check availability\n  - [ ] Send welcome or verification email\n- [x] Public pages and search\n- [x] User dashboard, profile, settings\n  - [x] Manage notes (create, read, update, delete, search)\n  - [x] Change profile and avatar image\n  - [x] Change email\n  - [x] Change and reset password\n  - [ ] Notification\n- [x] Admin dashboard and search\n  - [x] Manage users, notes, etc\n- [x] Various others\n  - [x] Share URL with preview image from Open Graph\n  - [x] Add to home screen as app on mobile\n  - [x] Search data\n    - [ ] Full text search\n  - [x] Upload and manage image assets\n  - [ ] Map viewer\n\nIncluded setup for the developers:\n\n- [x] Full stack type safety with Remix, TypeScript, Zod\n  - [x] Follow the practices from the official docs and popular Remix Stacks\n  - [x] v2 future flags while still in v1\n    - [x] v2 flat routes convention\n    - [x] v2 meta data management\n    - [x] v2 normalized form method\n    - [x] v2 error boundary\n    - [x] Tailwind CSS and PostCSS support\n    - [x] New dev server with config for HMR/HDR (hot module/data reload)\n- [x] More than 50 of ready to use and 100% customizable UI components\n  - [x] Layouts and demo examples\n  - [ ] Rich text or WYSIWYG editor with TipTap\n  - [ ] Keyboard shortcuts with cmdk\n- [x] Preselected styles, colors, fonts, icons, and responsive design\n  - [x] Customize in Tailwind Config, for brand (primary) and surface (secondary) colors\n  - [x] Default avatar image with Dicebear API\n  - [x] Icon set system to avoid name conflict\n    - [x] Lucide\n    - [x] Iconoir\n    - [ ] Bring your own favorite\n- [x] Database with Prisma ORM and MySQL on PlanetScale\n  - [x] tRPC-style or GraphQL-style data models file structure\n- [x] Auth with Remix Auth using a session cookie\n- [x] Data validation with Zod for general and Zodix for Remix loader/action\n- [x] Form handling with Conform\n  - [x] Check for unallowed usernames\n  - [x] Upload file to Uploadcare\n  - [ ] Redirect to previous route\n  - [ ] Password strength meter\n- [ ] Image hosting integration\n- [ ] Email delivery system\n  - [ ] Transactional email with Mailjet/Resend and React Email\n  - [ ] Marketing email with ConvertKit/Bento\n- [x] SEO functions with meta tags\n  - [x] `robots.txt`\n  - [x] `canonical` tag\n  - [x] `sitemap.xml` generator\n  - [x] Open Graph and Twitter card\n- [x] Various utilities with external libraries\n  - [x] Root loader data for env, theme, user, etc\n  - [x] Cache control header\n- [x] No need for CLS loading screens/skeletons, only loading bar on top and loading button state\n- [x] Lighthouse or [Pagespeed Insights](https://pagespeed.web.dev/analysis/https-rewinds-mhaidarhanif-com/hbkn7kmahh?form_factor=desktop) optimized\n- [x] pnpm, Prettier, ESLint, Stylelint, and many more\n\nRecommended external setup:\n\n- Monitoring\n  - [Better Uptime](https://betteruptime.com)\n  - [Hyperping](https://hyperping.io)\n  - [Instatus](https://instatus.com)\n- Log management\n  - [Axiom](https://axiom.co)\n- Error reporting and analysis\n  - [Highlight](https://highlight.io)\n- SEO\n  - [Google Search Console](https://search.google.com/search-console/about) to check the sitemap and SERP-related stuffs.\n\nOptional workflow setup:\n\n- Install [Kodiak](https://github.com/marketplace/kodiakhq) to automate your GitHub pull requests.\n- Install [Socket Security](https://github.com/marketplace/socket-security) to prevent malicious open source dependencies from infiltrating your apps.\n\n### More Details\n\nThis repo is kind of over-engineered to have high flexibility and cover a lot of use cases for different applications/projects/products, especially what I'm working with several other people.\n\nThe components are using [shadcn UI](https://ui.shadcn.com) as the base components style. And the setup for full stack app development is mostly inspired by [T3 Stack](https://create.t3.gg). The main difference is this repo example uses Remix by default, not Next.js like those two.\n\n## Development\n\n### Install Dependencies\n\nBefore running your Remix app locally, make sure your project's local dependencies are installed using your preferred package manager agent:\n\n```sh\nnpm install\nyarn install\npnpm install\n```\n\nOr if using [`ni`](https://github.com/antfu/ni) which can autodetect the agent:\n\n```sh\npnpm add -g @antfu/ni  # Install once globally\nni                     # Will auto choose npm/yarn/pnpm\n```\n\n### Setup Environment Variables/Secrets\n\nThese are the main environment variables you need to set up on your own for developing locally:\n\n- `DATABASE_URL`\n  - Used with Prisma ORM. Get it from local database or [PlanetScale](https://planetscale.com/docs/concepts/connection-strings)\n- `UPLOADCARE_PUBLIC_KEY`\n  - Used with Uploadcare's file uploader widget. Get it from [Uploadcare](https://uploadcare.com/docs/start/settings)\n\nTo manage the environment variables, you can either use:\n\n1. Plain `.env` file\n2. Secrets management platform such as Doppler\n\n#### If using `.env` fie\n\n```sh\ncp -i .env.example .env\n# -i or --interactive will ask before overwrite\n```\n\nThen edit `.env` as you need.\n\n#### If using secrets management platform\n\nAlternatively, it's recommended to use [Doppler](https://doppler.com), or\n[Dotenv](https://dotenv.org), or something similar to manage the credentials. Especially if you're working with a team.\n\n```sh\ndoppler login\ndoppler setup\n```\n\nTo use the secrets directly:\n\n```sh\ndoppler -- pnpm \u003ccommand\u003e\n```\n\nTo download the secrets into the `.env` file:\n\n```sh\ndoppler secrets download --no-file --format env \u003e .env\n```\n\n\u003e ⚠️ Make sure to setup the environment variables/secrets here, on Vercel, or on your preferred deployment target. Otherwise the app will break on production. That's why a secrets management platform is recommended to manage them easily. There are also some preset strings in the `.env.example` which you can copy directly.\n\n### Prisma ORM and Database Connection\n\nIt's up to you which database/DBMS you want to use with the app that supported by Prisma ORM. This repo is suited to use either your own MySQL instance or MySQL on PlanetScale. But don't use SQLite because it doesn't have `@db.Text` annotation and `model.createMany()` function.\n\nOnce you have the database URL connection string from PlanetScale MySQL instance, for example:\n\n#### If using PlanetScale\n\n1. [Create a PlanetScale account](https://planetscale.com) which you can [sign up for free](https://auth.planetscale.com/sign-up).\n2. [Create a database](https://planetscale.com/docs) and get the database URL connection string as `DATABASE_URL` from there.\n3. Put the `DATABASE_URL` to the environment variables.\n\n```sh\nDATABASE_URL='mysql://username:pscale_pw_password@region.connect.psdb.cloud/name?sslaccept=strict'\n```\n\n#### If using local database\n\nRun Docker service and run [Docker Compose script](./docker-compose.yml):\n\n```sh\ndocker compose up\n```\n\nWhile in development, you can:\n\n- Generate Prisma types for `@prisma/client` with `nr prisma:generate` (it runs `prisma generate`)\n- Check generated Prisma documentation with `nr docs:prisma` (it runs `prisma-docs-generator serve`) then open \u003chttp://localhost:5858\u003e\n- Visualize the schema with [Prisma Editor](https://github.com/mohammed-bahumaish/prisma-editor) or [Prismaliser](https://prismaliser.app)\n- Push Prisma schema changes for PlanetScale with `nr prisma:push` (it runs `prisma db push`)\n  - Notice that with [PlanetScale](https://planetscale.com/docs/tutorials/prisma-quickstart) approach with [Prisma](https://prisma.io/docs/guides/database/using-prisma-with-planetscale), we don't need migration files in our repo, but rather managed in their platform.\n- Read the [official Prisma docs](https://prisma.io/docs) and [How to Prisma](https://howtoprisma.com)\n  - Follow the [PlanetScale \u0026 Prisma happy practices](https://planetscale.com/docs/prisma/prisma-best-practices)\n  - Can also try [PrismaGPT](https://gpt.howtoprisma.com) to help learn the query.\n\n### File upload with Uploadcare\n\nThis repo using [Uploadcare](https://uploadcare.com) to primarily upload and host the uploaded images and files. If you want the upload component to run, you need to paste your [Public API key](https://uploadcare.com/docs/start/settings/#keys-public) to `UPLOADCARE_PUBLIC_KEY` env var.\n\n1. [Create an Uploadcare account](https://uploadcare.com).\n2. Go to the Dashboard and get the public key string.\n3. Put it as `UPLOADCARE_PUBLIC_KEY` to the environment variables.\n\n### Run Development Server\n\nMake sure you've generated the latest Prisma schema with `nr prisma:generate`.\n\nAfterward, start the Remix development server like so based on your preference:\n\n- Run without HMR: `nr dev`\n- Run with HMR: `nr dev-hmr`\n\nWithout HMR, it will just run `remix dev`, the Remix server on development. Then wait until you see this:\n\n```sh\nLoading environment variables from .env\nRemix App Server started at http://localhost:3000\n```\n\nOpen up \u003chttp://localhost:3000\u003e and you should be ready to go!\n\nAlternatively, you can enable/disable HMR by changing this in the `remix.config.js`. By default we're not using it.\n\n```js\nconst isUsingHMR = false;\n```\n\nWith HMR, it will run both `dev:remix` and `dev:express`, the Remix server and the Express server with HMR enabled. Then wait until you see this:\n\n```sh\n📀 Remix on Express server port :3000\nLoading environment variables from .env\n💿 Built in 0s\n```\n\nOpen up \u003chttp://localhost:3000\u003e and you should be ready to go!\n\n### TypeScript and ESLint Server\n\nWhen you update some significant changes in the TypeScript config, ESLint config, or just generated a new Prisma schema, you can restart the language server as needed:\n\n```sh\n\u003e TypeScript: Restart TS Server\n\u003e ESLint: Restart ESLint Server\n\u003e Prisma: Restart Language Server\n```\n\n### Customize some contents\n\nLook up for these comments:\n\n- `EDITME`: You can edit them based on your need\n- `TODO`: You can see that they are in progress\n\n## Deployment\n\n### Vercel\n\nAs this repo was made after having run the `create-remix` command and selected \"Vercel\" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed. Alternatively you can just use the \"Deploy to Vercel\" button above.\n\nJust keep in mind to set up the environment variables/secret that preferably differentiated for each server environments such as local/development, staging/preview, and production.\n\nRequired for the app to run:\n\n```sh\n# Primary database that connects to Prisma ORM\nDATABASE_URL=\n\n# Session secret for cookie after authenticated or logged in\nREMIX_SESSION_SECRET=\n\n# Application name\nREMIX_APP_NAME=\n\n# Application transactional email\nREMIX_APP_EMAIL=\n\n# Upload image assets solution\nUPLOADCARE_PUBLIC_KEY=\n```\n\nThe session secret for `REMIX_SESSION_SECRET` can be generated more securely using either Node.js crypto module (JS) or OpenSSL (shell):\n\n```sh\n$ node scripts/generate-secret.js\n1234567890abcdefghijklmnopqrstuvwxyz1234567890\n\n$ sh scripts/generate-secret.sh\nyjudrrKv/W4jxzmQqXze9T7DEANxStDtg4YCdfgs/4E=\n```\n\nWhen managing environment variables/secrets using Doppler, there's the auto sync integration to Vercel:\n\n- \u003chttps://doppler.com/integrations/vercel\u003e\n- \u003chttps://vercel.com/integrations/doppler\u003e\n\nIf you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):\n\n```sh\nni -g vercel\nvercel\n```\n\nIt is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).\n\nTo make it automatic for Vercel CI to push the database schema changes (especially to PlanetScale) while building for Preview and Production, you can setup the build command to use the `build:ci` script instead of regular `build`.\n\nPut this into the Build Command in the Project Settings:\n\n```sh\npnpm build:ci\n```\n\n(Change `pnpm` to your package manager of choice)\n\n## Important Notes\n\n### Tailwind CSS Config\n\nUse [uicolors.app](https://uicolors.app/create) or [tints.dev](https://tints.dev) to generate the color tokens easily. Then replace what's inside `tailwind.config.js`.\n\n```js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        brand: {\n          50: \"#f2f9fd\",\n          // ...\n          950: \"#0c1c27\",\n        },\n        surface: {\n          50: \"#f4f8f9\",\n          // ...\n          950: \"#040506\",\n        },\n      },\n    },\n  },\n};\n```\n\n### Remix Entry Files\n\nThis repo already has the entry files. Since Remix `v1.14`, you might notice that the entry files might be able to be implicitly defined. At the moment, I still suggest revealing or explicitly defining them to make it work smoothly.\n\n```sh\nnpx remix reveal\n```\n\n### Remix SEO Configuration\n\nAs there's no official way yet to handle SEO related output for metadata and sitemap, here are the options ordered by preference:\n\n1. [`balavishnuvj/remix-seo`](https://github.com/balavishnuvj/remix-seo): Collection of SEO utilities like sitemap, robots.txt, etc. for a Remix Application\n2. [`chaance/remix-seo`](https://github.com/chaance/remix-seo): A package for easily managing SEO meta and link tags in Remix\n3. [`fedeya/remix-sitemap`](https://github.com/fedeya/remix-sitemap): Sitemap generator for Remix applications\n\n### Database backup\n\nSyntax to backup using PlanetScale's `pscale` CLI:\n\n```sh\npscale db dump database_name branch --output database_name.dump\n```\n\nFor example:\n\n```sh\npscale db dump rewinds main --output rewinds.dump\n```\n\n## References\n\n### General\n\n- [web.dev](https://web.dev)\n- [Rewinds Stack](https://rewinds.mhaidarhanif.com)\n- [Catamyst Stack](https://a.catamyst.com/stack)\n  - [Catamyst Stack All](https://a.catamyst.com/stack-all)\n- [The Web’s Next Transition - Epic Web Dev by Kent C. Dodds](https://epicweb.dev/the-webs-next-transition)\n- [Infra I'm Building On In 2023 - T3](https://t3.gg/blog/post/2023-infra)\n  - [The Infra That Saved Me From AWS - My 2023 Stack](https://youtube.com/watch?v=v-9AZKp-Ljo)\n\n### Remix\n\n- [Remix Docs](http://remix.run)\n- [Remix Blog Tutorial](http://remix.run/docs/en/main/tutorials/blog)\n- [Up and Running with Remix - Kent C. Dodds - egghead.io](https://egghead.io/courses/up-and-running-with-remix-b82b6bb6)\n- [Build a Fullstack App with Remix and Prisma - Prisma YouTub Playlist](https://youtube.com/watch?v=4tXGRe5CDDg\u0026list=PLn2e1F9Rfr6kPDIAbfkOxgDLf4N3bFiMn)\n- [Build a Fullstack App with Remix and Prisma - Prisma Blog](https://prisma.io/blog/fullstack-remix-prisma-mongodb-1-7D0BfTXBmB6r)\n\n### React\n\n- [React](https://react.dev)\n- [Rethinking React best practices - Frontend Mastery](https://frontendmastery.com/posts/rethinking-react-best-practices)\n- [Bulletproof React - A simple, scalable, and powerful architecture for building production-ready React applications](https://github.com/alan2207/bulletproof-react)\n\n### Tailwind CSS\n\n- [Tailwind CSS](https://tailwindcss.com)\n- [Why we use Tailwind CSS as our primary framework | Clean Commit](https://cleancommit.io/blog/why-we-use-tailwind-css-as-our-primary-framework)\n- [An Honest Look at Tailwind as an API for CSS | thoughtbot, inc.](https://thoughtbot.com/blog/an-honest-look-at-tailwind-as-an-api-for-css)\n- [Styling Best Practices I Use With Tailwind CSS | theodorusclarence.com](https://theodorusclarence.com/blog/tailwindcss-best-practice)\n\n### Inspirations\n\n- [Design System Checklist](https://designsystemchecklist.com)\n- [Remix Stacks](https://remix.run/stacks)\n  - [Remix Directory](https://remix.directory)\n  - [Epic Stack by Kent C. Dodds](https://github.com/epicweb-dev/epic-stack)\n  - [Spacewave Stack by Kent C. Dodds](https://github.com/epicweb-dev/spacewave-stack)\n  - [Synthwave Stack by I4O Open Source](https://github.com/i4o-oss/synthwave-stack)\n  - [Stripe Stack by Daniel Kanem](https://github.com/dev-xo/stripe-stack)\n- [T3 Stack by T3 Community / Theo Browne](https://create.t3.gg)\n- [shadcn UI](https://github.com/shadcn/ui)\n  - [Taxonomy](https://tx.shadcn.com)\n- [Precedent](https://precedent.dev)\n- [Reshaped](https://reshaped.so)\n- [neorepo - Remix/Next.js production-ready starter kit](https://neorepo.com)\n- [SaasRock - The One-Man SaaS Framework](https://saasrock.com)\n- [MakerKit - SaaS Starter Kits based on React](https://makerkit.dev)\n- [Saas UI - The React component library for Startups](https://saas-ui.dev)\n- [Rewind-UI - React component library using Tailwind CSS](https://github.com/rewindui/rewindui)\n- [saasui.design](https://saasui.design)\n- [saasinterface.com](https://saasinterface.com)\n\nAlso attempt to learn from others like Next.js, NestJS, Passport, tRPC, GraphQL, Swagger (OpenAPI), etc.\n\n### Rewinds in the wild\n\nSome other public repos/projects using Rewinds:\n\n- [🧊 M Haidar Hanif Website](https://github.com/mhaidarhanif/mhaidarhanif-web): Personal Website\n- [🐱 Catamyst](https://github.com/catamyst/catamyst-web): Learning Management System (LMS)\n- [🎨Super Duper Gallery](https://github.com/jonathannicolasdev/superduper): Art Gallery in Philippines\n- [🕌 Kawal Masjid](https://github.com/zainfathoni/kawalmasjid): Mosque Directory in Indonesia\n\n## Credits\n\n### Author\n\nM Haidar Hanif (@mhaidarhanif)\n\n### License\n\n[The MIT License](LICENSE)\n\n### Reminder\n\n\u003e \"Software is a just a tool to help accomplish something for people - many programmers never understood that. Keep your eyes on the delivered value, and don’t over focus on the specifics of the tools\" — John Carmack\n\n---\n\n\u003ca aria-label=\"Logo\" href=\"https://rewinds.mhaidarhanif.com\"\u003e\n  \u003cimg src=\"https://flat.badgen.net/badge/Made%20by/M%20Haidar%20Hanif?color=black\u0026labelColor=blue\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhaidarhanif%2Frewinds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmhaidarhanif%2Frewinds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhaidarhanif%2Frewinds/lists"}