A simple solution for shortening links built with React, Next.js and GraphQL with basic safety features. Initially designed and developed in 2021 as a personal challenge and to get some new experience.
I began work on a refactor in december 2024. Primary goal was to gain practical knowledge of current React (v19) and Next.js (v15) features, including the new App router. As a secondary goal, client application was to fully leverage TailwindCSS features and implement some subtle animations.
Now live! Development stage preview available at jals2.wirkijowski.dev
- React 19
- Next.js 15 with App router
- TypeScript
- Apollo Client +
experimental-nextjs-app-support - PostCSS
- Tailwind-CSS
- Autoprefixer
classnames- Motion (Framer Motion)
- Eslint
- Apollo Server
- GraphQL
@graphql-tools— schema loading and merging utilitiesgraphql-scalars— additional scalars (e.g.EmailAddress)
- Redis & Redis OM — Redis client and ORM interface
- Mongoose — ORM interface for MongoDB
- Eudoros - logging utility
- Luxon — date utilities
- Resend — transactional emails
- ulid — internal unique identifiers
- Redis-Stack
- MongoDB Community
- Docker
- CircleCI — deployment pipeline
- Nginx — reverse proxy on remote
- Sentry.io — error monitoring
- Axiom — collection of telemetry data, errors and warnings
- Session management on both client and api
- Auth code transactional emails
- Short link creation
- Redirection logic with safeguards
- Link inspection (
/inspect/[linkId]&/[linkId]/+) - Reporting functionality — link flagging
- User-agent and address collection (
@todo levarage User-Agent Client Hints API) - Light and dark themes
- Magic link functionality
- Transitions, animations
- Dashboards
- Link management
- User management
- Client to API health checks
- Full query error handling
See it in action! Production demo of v1 available at jals.wirkijowski.dev
- Client
- React — frontend framework
- React Router — navigation
- SCSS — CSS preprocessor
- CSS Modules — styling approach
- BEM — class naming methodology
- Apollo Client — communication with API
- API server
- Apollo Server — GraphQL server
- Mongoose — ORM interface for MongoDB
- Ioredis — Redis client used for cache
- Sentry.io — monitoring & error tracking
- Dotenv — environment variables loader
- Functional link shortening
- Link inspection using
+as a modifier at the end of the URL - Collected data included user's platform, if is mobile device and timestamp of click
- Users were redirected the moment a click is registered (positive response from API)
- If a link is flagged multiple times, users were warned about it and asked to confirm before proceeding with the redirect.
No license is available.