https://github.com/2manoj1/link-previewer
Link Previewer - Remix Full stack web app. Using Meta Scrapper and Prisma
https://github.com/2manoj1/link-previewer
postgresql prisma remix-run tailwindcss typescript
Last synced: 2 months ago
JSON representation
Link Previewer - Remix Full stack web app. Using Meta Scrapper and Prisma
- Host: GitHub
- URL: https://github.com/2manoj1/link-previewer
- Owner: 2manoj1
- Created: 2022-08-01T22:09:23.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-02T09:24:05.000Z (almost 4 years ago)
- Last Synced: 2025-06-12T19:41:35.230Z (about 1 year ago)
- Topics: postgresql, prisma, remix-run, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://link-previewer-plum.vercel.app
- Size: 587 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Link Previewer
[Link Previewer Demo App -> Click here](https://link-previewer-sigma.vercel.app)
Page 1
Page 2
Demo:
https://user-images.githubusercontent.com/15128569/182339581-bc769602-37d5-46f8-92be-976944757791.mov
Build using [Remix Stacks](https://remix.run/stacks).
```sh
npx create-remix --template remix-run/blues-stack
```
## What's in the stack
- [Multi-region Fly app deployment](https://fly.io/docs/reference/scaling/) with [Docker](https://www.docker.com/)
- [Multi-region Fly PostgreSQL Cluster](https://fly.io/docs/getting-started/multi-region-databases/)
- Healthcheck endpoint for [Fly backups region fallbacks](https://fly.io/docs/reference/configuration/#services-http_checks)
- [GitHub Actions](https://github.com/features/actions) for deploy on merge to production and staging environments
- Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
- Database ORM with [Prisma](https://prisma.io)
- Styling with [Tailwind](https://tailwindcss.com/)
- End-to-end testing with [Cypress](https://cypress.io)
- Local third party request mocking with [MSW](https://mswjs.io)
- Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
- Code formatting with [Prettier](https://prettier.io)
- Linting with [ESLint](https://eslint.org)
- Static Types with [TypeScript](https://typescriptlang.org)
- Deployed vercel with Prisma cloud and Heroku PostgreSQL [Visit](https://link-previewer-sigma.vercel.app)
Not a fan of bits of the stack? Fork it, change it, and use `npx create-remix --template your/repo`! Make it your own.
## Quickstart
Click this button to create a [Gitpod](https://gitpod.io) workspace with the project set up, Postgres started, and Fly pre-installed
[](https://gitpod.io/from-referrer/)
## Development
- This step only applies if you've opted out of having the CLI install dependencies for you:
```sh
npx remix init
```
- Start the Postgres Database in [Docker](https://www.docker.com/get-started):
```sh
yarn docker
```
> **Note:** The yarn script will complete while Docker sets up the container in the background. Ensure that Docker has finished and your container is running before proceeding.
- Initial setup:
(Data proxy prisma)
```sh
npx prisma generate --data-proxy
```
or (If only local database)
```sh
yarn setup
```
- Run the first build:
```sh
yarn build
```
- Start dev server:
```sh
yarn dev
```
### Vitest
For lower level tests of utilities and individual components, we use `vitest`. We have DOM-specific assertion helpers via [`@testing-library/jest-dom`](https://testing-library.com/jest-dom).
### Type Checking
This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run `yarn typecheck`.
### Linting
This project uses ESLint for linting. That is configured in `.eslintrc.js`.
### Formatting
We use [Prettier](https://prettier.io/) for auto-formatting in this project. It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. There's also a `yarn format` script you can run to format all files in the project.