01
Abozor
RESPONSIVE DESIGN • NEXTJS • MANTINE UI • SEO
- ROLE
- Frontend Developer
- DURATION
- 6 months
- CATEGORY
- E-commerce Platform
ABOUT THE PROJECT
Abozor is a modern e-commerce platform designed to provide seamless shopping experience with advanced features including real-time inventory management, secure payment processing, and personalized product recommendations. Built with Next.js 15 and React 19, the platform leverages server-side rendering for optimal performance and SEO. Integrated with Firebase for real-time data synchronization and Amplitude for analytics tracking.
TECHNOLOGIES USED
- Next.js 15
- React 19
- TypeScript
- Mantine UI
- TailwindCSS
- Tanstack Query
- Firebase
- NextAuth
- Sentry
- Amplitude Analytics
- i18next
- Formik & Yup
- Embla Carousel
KEY FEATURES
- Multi-language support with i18next
- Advanced product search and filtering with infinite scroll
- Real-time inventory tracking with Firebase
- User authentication with NextAuth
- Push notifications with OneSignal
- Image optimization and lazy loading
- Analytics and error tracking with Amplitude and Sentry
- Responsive design optimized for all devices
- Form validation with Formik and Yup
- Progressive Web App (PWA) capabilities
CHALLENGES
The main challenge was creating a scalable architecture that could handle high traffic during sales events while maintaining fast page load times and ensuring data consistency across the platform. Integration of multiple third-party services (Firebase, Amplitude, Sentry, OneSignal) while keeping the bundle size optimized was critical. Supporting multiple languages and managing complex state across the application required careful architecture decisions.
SOLUTION
Implemented server-side rendering with Next.js 15 for optimal performance and SEO. Used Tanstack Query for efficient data fetching and caching. Integrated Firebase for real-time updates and WebSocket for live inventory tracking. Implemented code splitting and dynamic imports to reduce initial bundle size. Used Mantine UI for consistent, accessible components and TailwindCSS for custom styling. Set up comprehensive error tracking with Sentry and analytics with Amplitude to monitor user behavior and app performance.
RESULTS
Achieved 40% improvement in page load times with Next.js 15's optimizations. Successfully handles 10,000+ concurrent users during peak sales periods. 95% uptime maintained through proper error handling and monitoring. Increased conversion rate by 25% through improved UX and performance. Multi-language support expanded market reach by 60%. Push notifications increased user engagement by 35%.
