A modern web application for tracking Nintendo Switch game achievements and trophies, built with Next.js, TypeScript, and Prisma. Follows Nintendo's visual design principles for a clean, playful, and user-friendly experience.
- Game Library Management: Add and organize your Nintendo Switch games
- Achievement Tracking: Create and track custom achievements for each game
- Trophy System: Earn trophies for completing special challenges
- User Dashboard: View your progress and recent accomplishments
- Nintendo-Inspired Design: Clean, playful UI following Nintendo's visual identity
- Authentication: Secure user accounts with Clerk
- Responsive Design: Works seamlessly on desktop and mobile devices
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Database: PostgreSQL with Prisma ORM
- Authentication: Clerk
- Styling: Tailwind CSS
- Testing: Jest with React Testing Library
- Deployment: Ready for Vercel deployment
- Node.js 18+
- PostgreSQL database
- Clerk account for authentication
-
Clone the repository
git clone <repository-url> cd trophy-rooms
-
Install dependencies
npm install
-
Set up environment variables Create a
.env.localfile in the root directory:DATABASE_URL="postgresql://username:password@localhost:5432/trophy_rooms" NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your_clerk_publishable_key" CLERK_SECRET_KEY="your_clerk_secret_key"
-
Set up the database
npx prisma generate npx prisma db push
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
Run the test suite:
# Run all tests
npm test
# Run API tests only
npm run test:api
# Run tests in watch mode
npm test -- --watchtrophy-rooms/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── api/ # API routes
│ │ ├── games/ # Game management pages
│ │ ├── achievements/ # Achievement pages
│ │ └── dashboard/ # User dashboard
│ ├── components/ # Reusable React components
│ └── __tests__/ # Test files
├── prisma/ # Database schema and migrations
├── public/ # Static assets
└── terraform/ # Infrastructure as Code
The application follows Nintendo's visual identity guidelines:
- Colors: Nintendo Red (#E60012), clean whites and grays
- Typography: Nunito font family for a friendly, rounded feel
- Components: Rounded corners, subtle shadows, playful interactions
- Layout: Clean, spacious design with clear information hierarchy
GET /api/games- List all gamesPOST /api/games- Create a new gameGET /api/games/[id]- Get game detailsPUT /api/games/[id]- Update gameDELETE /api/games/[id]- Delete game
GET /api/achievements- List all achievementsPOST /api/achievements- Create a new achievement
GET /api/user-achievements- Get user's completed achievementsPOST /api/user-achievements- Mark achievement as completed
The application uses the following main entities:
- User: User accounts and profiles
- Game: Nintendo Switch games in the library
- Achievement: Custom achievements for each game
- UserAchievement: User's completed achievements
- Trophy: Special trophies earned by users
- Connect your GitHub repository to Vercel
- Set up environment variables in Vercel dashboard
- Deploy automatically on push to main branch
-
Build the application:
npm run build
-
Start the production server:
npm start
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Nintendo for the visual design inspiration
- Next.js team for the amazing framework
- Clerk for authentication services
- Prisma for the excellent ORM
Note: This project is not affiliated with Nintendo. It's a fan-made application for tracking gaming achievements.