Lemonstock - Image Gallery with React

This project is a web application developed with React that allows users to view and manage an image gallery divided into two categories: nature and city. The application includes a functional shopping cart and a modern, responsive user interface.

🚀 Features

• Image visualization in two categories: nature and city
• Functional shopping cart
• Responsive user interface
• Intuitive navigation between categories
• Modern design with Material-UI
• State management with Context API
• Implemented with TypeScript

🛠️ Technologies Used

• React
• TypeScript
• Material-UI
• React Router
• Context API

📁 Project Structure

src/
├── core/
│   ├── context/
│   |__ model/
│   |__ data/
│   |__ mui/
├── layout/
├── pods/
│   ├── cart/
|   ├── checkout/
│   ├── city-category/
|   ├── home/
│   ├── landscape-category/
│   └── navbar/
├── scenes/
└── routes/

🎯 Main Features

Image Visualization

• Navigation between image categories
• Detailed view of each image
• Price and title information

Shopping Cart

• Add/remove images from cart
• Automatic total calculation
• Cart state persistence

User Interface

• Responsive design
• Intuitive navigation
• Visual effects on interaction

🔄 Application State

The application uses Context API to manage global state, including:

• Image list
• Cart state
• Purchase total
• Drawer state

🎨 Design

The project uses Material-UI for interface design, providing:

• Consistent components
• Responsive design
• Customizable themes
• Smooth animations

📱 Responsive Design

The application is optimized for different screen sizes:

• Mobile
• Tablet
• Desktop

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.

👥 Authors

• Guste Gaubaite - React Laboratory Project "Image Gallery" for Lemoncode Frontend Master