A full-stack e-commerce portfolio project built with Next.js, TypeScript, and modern web technologies. This isn't just another demo store—it's a fully functional wishlist application featuring real products I've researched and want, demonstrating both technical expertise and attention to detail.
Robo's Wishlist is a personal e-commerce wishlist application that showcases my full-stack development capabilities while maintaining a unique, personal touch. Every product featured is something I've genuinely researched and added to my real wishlist—from development tools to dream items. This project demonstrates my ability to build production-ready applications with complex state management, authentication, and user experience features.
What makes this different? Unlike typical portfolio projects with dummy data, every aspect of this site—from the purple gradient color scheme to each individual product—reflects my personal taste, goals, and identity. It's proof that I can build beautiful, functional applications while being a real person with goals, hobbies, and a healthy sense of humor about my own ambitions.
- Complete authentication system with user registration and login
- User profile management with personalized dashboards
- Secure session handling and protected routes
- Guest checkout option for non-registered users
- Dynamic Product Catalog: Browse products across multiple categories (Technology, Home & Kitchen, Clothing, Vehicles)
- Advanced Filtering: Filter by category, brand, price range, and sort options
- Search Functionality: Quick product search with real-time results
- Color Variants: Product color selection with visual swatches
- Responsive Design: Fully optimized for mobile, tablet, and desktop
- Redux-powered cart management with persistent state
- Multi-step checkout process with form validation
- Guest checkout with secure token generation
- Saved addresses for registered users
- Order history and tracking
- Dark/Light Mode: Full theme switching with smooth transitions
- Framer Motion Animations: Smooth, professional animations throughout
- Hero Carousel: Dynamic featured products showcase
- Category Carousels: Featured items by category
- Custom Styling: Custom cursor and scrollbar designs
- 404 Page: Custom error handling with branded design
- Server-side rendering (SSR) with Next.js
- Type-safe development with TypeScript
- Component-based architecture for maintainability
- LocalStorage integration for cart persistence
- EmailJS integration for order notifications
- Responsive Tailwind CSS styling
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: Redux Toolkit
- Animations: Framer Motion
- Icons: Lucide React
- Email Service: EmailJS
- Deployment: Vercel
The visual identity of Robo's Wishlist is built around a vibrant purple gradient that represents modernity and personality. Every design decision—from the color palette to the animation timing—was made intentionally to create a cohesive, professional user experience that stands out from typical e-commerce sites.
- Primary: Purple gradient (
from-gray-900 via-purple-300 to-purple-600) - Accent: Teal (
#14B8A6) - Supporting: Gray scale for balance
- Modes: Full dark/light theme support
robos-wishlist/
├── app/ # Next.js app directory
│ ├── (auth)/ # Authentication routes
│ ├── about/ # About page
│ ├── cart/ # Shopping cart
│ ├── checkout/ # Checkout flow
│ ├── profile/ # User profile
│ ├── shop/ # Product browsing
│ └── layout.tsx # Root layout
├── components/ # Reusable React components
├── lib/ # Utilities and helpers
├── public/ # Static assets
├── store/ # Redux store configuration
└── types/ # TypeScript type definitions
- Home: Hero carousel with featured products and category showcases
- Shop: Full product catalog with filtering and search
- Product Details: Individual product pages with variants and direct purchase links
- Cart: Full cart management with quantity adjustments
- Checkout: Multi-step checkout with address management
- Profile: User dashboard with saved addresses and order history
- About: The story behind the project and why each product matters
Experience Robo's Wishlist live at: robos-wishlist.vercel.app
- Browse products across different categories
- Add items to cart with different color variants
- Test the search and filter functionality
- Try both guest checkout and user registration
- Switch between dark and light modes
- Check out the About page to learn the story behind each product
As a developer transitioning into web development, I wanted to create a portfolio project that demonstrated my full-stack capabilities while being something I'd actually use. Building a wishlist site allowed me to:
- Work with modern technologies (Next.js, TypeScript, Redux)
- Implement complex state management and authentication
- Create a polished, production-ready user interface
- Show attention to detail and design thinking
- Demonstrate my ability to see a project through from concept to deployment
But beyond the technical stack, I wanted potential employers to see who I am as a person. The products I choose tell a story about my goals, my interests, and my ambitions—from the development tools I need now to the dream items that keep me motivated.
- Backend API integration for dynamic product management
- Payment processing integration (Stripe)
- Product reviews and ratings system
- Wishlist sharing functionality
- Email notifications for price drops
- Admin dashboard for product management
Through building Robo's Wishlist, I've gained hands-on experience with:
- Next.js App Router and server components
- TypeScript for type-safe development
- Complex state management patterns (Redux)
- Authentication flows and session management
- Responsive design and accessibility
- Animation libraries (Framer Motion)
- Deployment and CI/CD with Vercel
- Git workflow and version control
- Portfolio: alexrobo.dev
- GitHub: @Arobaczewski
- LinkedIn: linkedin.com/in/alex-robaczewski
This project is open source and available under the MIT License.
Note: This is a portfolio project. While the site functions as a complete e-commerce application, it's designed to showcase development skills and personal interests. All products link to their actual purchase pages on external sites.
Built with 💜 by Alex Robaczewski