4 min read
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
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.
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.
- Public feed system.
- Post entries.
- Comments only for subscribers.
- Vote system.
- User profiles.
- Social networks linking.
- Web platform APIs.
- Progressive Enhancement.
- 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 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 using Puppeteer and OpenGraph data.
- Website scraping for OpenGraph data.
- Link previews caching using Redis.
- Payments through Stripe.
- Subscription to other users.
- Membership system.
- Credit system.
- 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.
- Docker containers.
- GitHub Actions
- CI/CD to Fly.io for using microVMs and replication to multiple regions.
- Auto scaling with Fly.io.
- Clouflare CDN.