Store Demo

Store Demo is a web application developed with Next.js, TypeScript, and Bootstrap that simulates a B2C (Business to Consumer) online store. The project integrates the public FakeStoreAPI for managing products and categories, and the OpenWeatherMap API to display real-time weather information, enhancing the user experience.

The application features a responsive and modern design, using Bootstrap CSS for the interface, and leverages Next.js routing and client-side rendering system for smooth navigation. The user can explore products, filter them by name or category, and add them to a persistent shopping cart thanks to the use of React contexts and local storage.

The authentication system is simple but functional: it allows logging in with users defined in a local file, simulating a real login flow. Only authenticated users can complete the checkout process, which includes a validated checkout form and payment simulation. Upon completing the purchase, the cart is cleared and a success message is displayed.

Key features include:

• Product Catalog: Dynamic listing of products with images, prices, ratings, and advanced filtering.
• Shopping Cart: Management of selected products, persistence in localStorage, and purchase summary.
• Checkout and Authentication: Protected checkout process, payment form, and user validation.
• External API Integration: Consumption of FakeStoreAPI for products and OpenWeatherMap for weather.
• Modern and Responsive UI: Use of Bootstrap, Tailwind, and custom components for an attractive experience on any device.
• React and Next.js Best Practices: Use of contexts, custom hooks, modularity, and separation of concerns.

This project is ideal for demonstrating skills in modern frontend development, API integration, global state management, and user experience in e-commerce applications. Furthermore, it is prepared for deployment on platforms like Heroku and Vercel, showcasing knowledge of configuration and optimization for production.