This is my first full-stack web application built using Next.js.
Through this project, I learned how to: - Build a full-stack app using
modern React and Next.js - Implement theme switching (light/dark
mode) using next-themes - Add multi-language support (i18n) using
next-intl
The app focuses on delivering a clean and modern user experience while applying best practices in frontend architecture.
🔗 Live Website: https://audiophile-nine.vercel.app/en
- Next.js (App Router)
- React 19
- TypeScript
- Tailwind CSS
- Zustand --- lightweight global state management
- Immer --- immutable state updates with simpler logic
- React Hook Form --- efficient form handling
- Zod --- schema validation
- Hookform Resolvers --- integration between RHF and Zod
- Tailwind CSS v4
- ShadCN UI --- accessible UI components
- Radix UI --- unstyled primitives for building UI
- clsx & tailwind-merge --- conditional styling utilities
- Lucide Icons & React Icons --- icon libraries
- Sonner --- toast notifications
- tw-animate-css --- animations
- slugify --- URL-friendly strings
- next-themes --- theme management
- next-intl --- internationalization (multi-language support)
- 🌗 Light / Dark theme switching
- 🌍 Multi-language support
- ⚡ Fast and optimized with Next.js
- 🎯 Type-safe development with TypeScript
- 🧩 Modular and scalable structure
Install dependencies:
npm install
Run the development server:
npm run dev
Build for production:
npm run build
npm start
This project represents my first step into building a modern full-stack application using Next.js.
It helped me understand: - App Router structure and rendering patterns - Managing global state effectively - Handling themes and internationalization in real-world apps
This project is for learning purposes.