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 and PostCSS features.
- React 19
- Next.js 15 with App router
- TypeScript
- Apollo Client +
experimental-nextjs-app-support - PostCSS
- Tailwind-CSS
- Autoprefixer
classnames- 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
- Nginx
- Redis-Stack
[...]
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.