A modern, high-performance React application for viewing your PlayStation Network trophies with detailed statistics, smart grouping, automatic translations, and a premium neon UI.
- Dynamic Login: No more editing
.envfiles. Login directly through the web interface. - NPSSO Guide: Built-in step-by-step instructions on how to obtain your secure token.
- Persistence: Remembers your session using secure local storage.
- Multi-Device: Works seamlessly on PC and Mobile.
- Complete Library Sync: Bypasses standard limits to load your entire game library history using PSN API pagination.
- Play Time Tracking: Matches and displays total hours played across your games (works automatically for PS4/PS5 titles with playtime data recorded by PSN).
- Top 20 Leaderboard: A dedicated page showcasing your top 20 most played games, featuring animated progress bars and premium podium styling.
- Smart Grouping: Automatically separates base game trophies from DLC/Add-on packs.
- Total Points System: Calculates and displays the earned vs. total PSN points per DLC/Game (Platinum=300, Gold=90, Silver=30, Bronze=15).
- Spanish Translation: Automatic machine translation for all trophy titles and descriptions, displayed elegantly inline.
- Auto-Sorting: Trophies are automatically sorted by rarity (rarest first) for a better overview.
- Trophy Guide Lookup: Click the book icon on any trophy to instantly search for solutions across top guide sites (PSNProfiles, PSTHC, PowerPyx, PlayStationTrophies.org, YouTube, and Google).
- Live Profile Widget: A standalone, auto-refreshing profile card route (
/widget) designed specifically for OBS overlays, secondary monitors, or streaming setups (refreshes every 5 minutes). - Neon Highlights: Games with a Platinum trophy glow with a triple-layered cyan/blue neon effect. Games with 100% completion (but no platinum) glow with a premium gold aesthetic.
- Responsive Layout: perfectly centered interfaces (
flex,items-center) that adapt naturally to ultra-wide displays and smartphones. - Platform Badges: Visual indicators for PS5, PS4, PS3, and Vita titles.
- Smooth UX: Powered by Framer Motion for elegant hover behaviors, scale effects, and transitions.
Frontend:
- React 18 (Vite)
- Tailwind CSS (Styling)
- Framer Motion (Animations)
- Lucide React (Iconography)
- Axios (API Management)
Backend:
- Node.js + Express
- psn-api (Official PSN Integration)
- Vercel Serverless Functions (Cloud Deployment)
- Google Translate API (Automatic Translation)
-
Clone & Install
git clone https://github.com/JMgranaBUAB/psn-react.git cd psn-react npm install -
Run the App
npm run dev
- Frontend:
http://localhost:5173 - Backend:
http://localhost:3001
- Frontend:
To use the app on your phone during local development:
- Ensure both devices are on the same Wi-Fi.
- Check the terminal output for the Mobile URL (e.g.,
http://192.168.1.45:5173). - Open that URL on your phone!
This project is pre-configured for Vercel:
- Push your code to GitHub.
- Connect your repository to Vercel.
- Done! The project will automatically deploy using Serverless Functions.
psn-react/
├── api/ # Vercel Serverless Functions (Backend)
├── src/
│ ├── components/ # UI Building blocks (TrophyCard, UserProfile)
│ ├── pages/ # Full page views (Login, GameTrophies, Home)
│ ├── App.jsx # Routing & Auth Logic
│ └── index.css # Tailwind & Global styles
├── server.js # Local Express proxy server
├── vercel.json # Cloud deployment config
└── package.json # Dependencies & Scripts
The app requires an NPSSO token to access your private trophy data securely.
- Use the integrated guide on the login page.
- Log in at PlayStation.com.
- Visit ca.account.sony.com/api/v1/ssocookie.
- Copy the 64-character code and paste it into the app.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
Distributed under the MIT License. See LICENSE for more information.
JMgranaBUAB - GitHub
⭐ Give this project a star if it helped you track your trophies!