AskStore is a full-featured e-commerce platform built with Next.js and PostgreSQL. It showcases complete store functionality including product catalog browsing, advanced search and filtering, shopping cart management, secure checkout, and comprehensive admin inventory management.
This project demonstrates full-stack development expertise with a production-ready e-commerce solution featuring both customer-facing and admin interfaces.
- Grid-based product display (105+ items)
- High-quality product photography
- Product categorization (Smart Home, Art, Tech, etc.)
- Price display with currency formatting
- Product availability indicators
- Responsive product cards
- Global product search functionality
- Category-based filtering (10+ categories)
- Real-time filter updates
- Smart search with auto-suggestions
- Filter count indicators
- Clear filter button
- Detailed product pages
- Multiple product images with gallery
- Product specifications and descriptions
- Category labeling (Smart Home, Tech, Art, etc.)
- Pricing information
- Stock status display
- Related products suggestions
- Add/remove products
- Quantity adjustment
- Real-time cart updates
- Cart item count display
- Cart total calculation
- Persistent cart state
- Quick cart access from header
- Secure checkout flow
- Customer identity verification
- Communication link entry
- Acquisition funding options
- Order manifest display
- Cart summary review
- Secure protocol status
- Order completion with confirmation
- Mobile-first approach
- Tablet optimization
- Desktop experience
- Touch-friendly interface
- Adaptive layouts
- Performance optimized
- Complete product database access
- Create new products
- Edit existing products
- Delete products
- Bulk operations support
- Stock quantity tracking
- Price management
- Name and description fields
- Category assignment
- Price and sale price configuration
- Quantity tracking
- Product status (Limited, In Stock, etc.)
- Multi-image upload
- Product specifications
- Drag-and-drop image reordering
- Search and filter inventory
- Batch product creation
- File upload support
- Image management (drag to reorder)
- Detailed product editing
- SKU management
- Charging configuration
- Product limiting options
- Product listing with counts
- Quick edit/delete actions
- Inventory status indicators
- Quantity monitoring
- Product categorization
- Administrative search
| Technology | Purpose |
|---|---|
| Next.js 15+ | React framework with App Router |
| PostgreSQL | Robust relational database |
| JavaScript | Frontend interactivity |
| Tailwind CSS | Production-grade styling |
| Netlify | Deployment and hosting |
store/
├── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home/storefront
│ ├── products/
│ │ ├── page.tsx # Product catalog
│ │ └── [id]/
│ │ └── page.tsx # Product detail
│ ├── cart/
│ │ └── page.tsx # Shopping cart
│ ├── checkout/
│ │ └── page.tsx # Checkout flow
│ ├── admin/
│ │ ├── layout.tsx # Admin layout
│ │ ├── inventory/
│ │ │ └── page.tsx # Inventory management
│ │ └── products/
│ │ └── page.tsx # Product admin
│ └── api/
│ ├── products/ # Product API routes
│ ├── cart/ # Cart API routes
│ ├── checkout/ # Checkout API routes
│ └── admin/ # Admin API routes
├── components/
│ ├── ProductCard.tsx # Product display
│ ├── ProductGallery.tsx # Image gallery
│ ├── SearchBar.tsx # Search interface
│ ├── FilterPanel.tsx # Category filters
│ ├── Cart.tsx # Cart interface
│ ├── Checkout.tsx # Checkout form
│ └── AdminPanel.tsx # Admin interface
├── lib/
│ ├── db.ts # Database connection
│ ├── products.ts # Product queries
│ ├── cart.ts # Cart logic
│ └── auth.ts # Authentication
├── styles/ # Global styles
└── public/ # Images, assets
- Node.js 18+
- npm or yarn
- PostgreSQL 12+
# Clone the repository
git clone https://github.com/askoti/store.git
cd store
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Add DATABASE_URL and other config
# Run database migrations
npm run db:migrate
# Run development server
npm run devOpen http://localhost:3000 to browse the store.
# Build for production
npm run build
# Start production server
npm start
# Deploy to Netlify
netlify deploy --prod- 105+ products across multiple categories
- High-quality product images
- Detailed product information
- Real-time availability tracking
- Price management system
- Full-text search across product names and descriptions
- Category-based filtering
- Multi-filter support
- Instant search results
- Filter count display
- Intuitive product discovery
- Easy cart management
- Seamless checkout flow
- Secure payment processing
- Order confirmation
- Complete inventory control
- Product CRUD operations
- Bulk management tools
- Image handling
- Stock tracking
- Category management
- Secure protocol implementation
- Authentication system
- Encrypted data transmission
- Secure checkout protocol
- Customer identity verification
- Modern Aesthetic: Clean, minimalist design
- Neon Accents: Bright lime-green call-to-action buttons
- Dark Theme: Professional dark background
- Responsive Grid: Adapts to all screen sizes
- Professional Typography: Clear, readable fonts
- Smooth Interactions: Polished hover states
- Intuitive Navigation: Clear information architecture
✅ Full-Stack Architecture: Next.js frontend + PostgreSQL backend
✅ Database Integration: Robust relational database
✅ API Routes: RESTful API for all operations
✅ Authentication: Secure user authentication
✅ Cart Management: State-based shopping cart
✅ Checkout Flow: Multi-step secure checkout
✅ Admin Panel: Complete inventory management
✅ Responsive Design: Mobile to desktop optimization
✅ Image Management: Product image handling
✅ Search & Filter: Advanced discovery system
✅ Type Safety: JavaScript/TypeScript implementation
✅ Performance: Optimized queries and rendering
Perfect for:
- E-commerce startups
- Product retailers
- Digital storefronts
- Inventory management systems
- Multi-category stores
- Tech product sales
- Admin dashboard solutions
- Smart Home devices
- Art and design
- Tech gadgets
- Cameras and imaging
- Wearables
- Audio equipment
- Smart watches
- Security systems
- And more...
- Page Load Time: <2 seconds
- Search Response: Instant
- Product Load: Optimized queries
- Image Optimization: Lazy loading
- Mobile Experience: Fully responsive
- Admin Performance: Real-time updates
- Payment gateway integration (Stripe, PayPal)
- User accounts and order history
- Product reviews and ratings
- Wishlist functionality
- Advanced analytics dashboard
- Email notifications
- Automated inventory alerts
- Multi-currency support
- Discount code system
- Shipping integration
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)
This project is licensed under the MIT License – see the LICENSE file for details.
- GitHub: @askoti
- Portfolio: kastriotaliu.com
- Email: kastriootaliiu@gmail.com
- LinkedIn: linkedin.com/in/kastriootaliiu/
- Next.js team for excellent framework
- PostgreSQL community for robust database
- Tailwind CSS for styling excellence
- Netlify for deployment services
Complete E-Commerce Solution for Modern Retail
Made with by @askoti