Wandity

Full-Stack Remix Frontend - Express.js Rest APIs

This project is under exclusive preview access. You can ask me for a preview account.

Take a look at wandity.com for more details.

What's this project about?

It's a social network for travellers that consists of a full-stack Remix project with two decoupled backend APIs using Express.js

How is it built?

Each backend API is built with its own PostgreSQL database, a Prisma ORM interface (shared with the Remix frontend using NPM public packages), a Redis cache layer and uses Express.js as the Node.js framework.

Wandity Users API

The first backend is a Typescript Express.js Rest API that handles authentication and authorization, user information, payments and a credit system. The auth is made using JWT with refresh tokens and Redis, for payments I use Stripe and everything is stored and connected using Prisma and PostgreSQL.

Wandity Community API

The second backend is also a Typescript Express.js Rest API that handles everything regarding the community like post entries, comments, votes, an innovative public feed system using credits and Stripe payments, subscriptions to other users, memberships and so many other things.

Users can create their unique user profile, link to their social networks, upload images, optimized on the backend with sharp and stored on AWS S3. Images are also analysed with AI using Amazon Rekognition. The backend also generate link previews using Puppeteer and OpenGraph data.

Wandity Remix Frontend

The frontend is made using Remix, React and TailwindCSS using web platform APIs and progressive enhancement. React is only used for improving the user experience when javascript is loaded in the browser.

Deployment

Finally, the three projects are deployed using Docker containers with CI/CD to Fly.io for using microVMs and replication to multiple regions.

What's the stack?

Remix, React, TailwindCSS, Express.js, JWT, Refresh Tokens, Redis, Prisma, PostgreSQL, SendGrid, Twilio, AWS S3, Amazon Rekognition, Docker, GitHub Actions and a few others.

Cool Features

Authentication and authorization

  • API authorization using JWT Access Token verification.
  • Server side user session control through Refresh Tokens in Redis
  • User session stored JWT in cookies.
  • Authentication though Magic Links.
  • Sending emails using SendGrid.
  • Account verification through SMS using Twilio.

Community

  • Public feed system.
  • Post entries.
  • Comments only for subscribers.
  • Vote system.
  • User profiles.
  • Social networks linking.

UI

  • TailwindCSS.
  • Remix.
  • React.
  • Web platform APIs.
  • Progressive Enhancement.

Progressive Enhancement

  • React is only used for improving the user experience when Javascript is loaded in the browser.
  • Web platform APIs.
  • HTML input elements instead of custom JS components.
  • HTML form elements instead of custom JS components.
  • Form validation on the server and through HTML5 validation attributes.

Image handling

  • Image uploads using HTML input elements.
  • Image optimization with Sharp.
  • Image caching cache control headers
  • Image storage on AWS S3.
  • Image analysis with AI using Amazon Rekognition.
  • Private images with authenticated Remix Resource Routes.

Link previews

  • Link previews using Puppeteer and OpenGraph data.
  • Website scraping for OpenGraph data.
  • Link previews caching using Redis.

Payments

  • Payments through Stripe.
  • Subscription to other users.
  • Membership system.
  • Credit system.

Database

  • PostgreSQL database with read replicas.
  • Prisma ORM interface.
  • Redis cache layer.
  • NPM public packages for sharing Prisma Generated Client between backend APIs and Remix frontend.
  • Prisma Migrate for database migrations.
  • Prisma Studio for database management.
  • Prisma Generated Client for database queries.

Deployment

  • Docker containers.
  • GitHub Actions
  • CI/CD to Fly.io for using microVMs and replication to multiple regions.
  • Auto scaling with Fly.io.
  • Clouflare CDN.

Tell us about your project.