/trav_blog

A Nextjs App Router Application built with Typescript, Prisma,Tailwindcss, ShadCn UI, Clerk auth

Primary LanguageTypeScript

Readme

Overview

  • The Travel Blog is a minor pet project of mine. Remix has been my Framework of choice for the past year or so but the introduction of the App Router, React Server Components and Server Actions in Next.js 14 inspired me to build this project and see how my experience with Remix would translate to Next.js.

Goals

Build an Image Carousel

Display Images using CSS Masonry Layout

Technologies

Features

Image Manipulation

  • I used Cloudinary to store and retreive responsive images.

  • I had previously manually uploaded these images to Cloudinary and used the Cloudinary API to retrieve the images and their respective URLs. I may include that GIST in the future.

  • Blur Image was used to create a blur effect on the image while it was loading.

    
    
  • I used KCdodds github

Image Carousel

  • I used

Markdown

  • I used Marked to parse markdown strings into HTML
  • I took inspiration from Jacob Paris and his Remix blog post on how to use build a DIY markdown editor and preview.

Fly.io

  • In one terminal
  • ❯ fly proxy 5555:5555 --app travel-blog
  • In another terminal
  • fly ssh console -C "npm run prisma:studio" --app travel-blog