Link Previewer

screenshot of Link Previewer

Link Previewer

Link Previewer - Remix Full stack web app. Using Meta Scrapper and Prisma

Overview

The Link Previewer is a demo app that showcases various features of the Remix Stacks framework. It allows users to generate previews for URLs by providing a link, and then displays information such as the title, description, and image of the website.

Features

  • Multi-region Fly app deployment with Docker
  • Multi-region Fly PostgreSQL Cluster
  • Healthcheck endpoint for Fly backups region fallbacks
  • GitHub Actions for deploy on merge to production and staging environments
  • Email/Password Authentication with cookie-based sessions
  • Database ORM with Prisma
  • Styling with Tailwind
  • End-to-end testing with Cypress
  • Local third party request mocking with MSW
  • Unit testing with Vitest and Testing Library
  • Code formatting with Prettier
  • Linting with ESLint
  • Static Types with TypeScript
  • Deployed vercel with Prisma cloud and Heroku PostgreSQL

Installation

To install and set up the Link Previewer app, follow these steps:

  1. Click the "Quickstart" button to create a Gitpod workspace with the project set up, Postgres started, and Fly pre-installed.
  2. Start the Postgres Database in Docker by running the following command:
    yarn start-db
    
    Note: The yarn script will complete while Docker sets up the container in the background. Make sure Docker has finished setting up and the container is running before proceeding.
  3. Run the initial setup command based on your needs:
    • If you want to use a data proxy with Prisma, run:
      yarn setup-proxy
      
    • If you only want to use a local database, run:
      yarn setup-local
      
  4. Run the first build by executing the following command:
    yarn build
    
  5. Start the development server by running:
    yarn start
    

Note: Make sure to have TypeScript set up in your editor for a better in-editor experience with type checking and auto-complete. You can run yarn typecheck to check types across the whole project. ESLint and Prettier are used for linting and code formatting respectively.

Summary

The Link Previewer is a demo app built using Remix Stacks that showcases various features and technologies. It allows users to generate previews for URLs and displays relevant information. The app utilizes Docker for multi-region app deployment and PostgreSQL cluster, GitHub Actions for automated deployment, and various other tools for testing, authentication, styling, and more. The installation process involves setting up the environment, running build scripts, and starting the development server.