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.
- 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
- React
- TypeScript
- Material-UI
- React Router
- Context API
src/
├── core/
│ ├── context/
│ |__ model/
│ |__ data/
│ |__ mui/
├── layout/
├── pods/
│ ├── cart/
| ├── checkout/
│ ├── city-category/
| ├── home/
│ ├── landscape-category/
│ └── navbar/
├── scenes/
└── routes/
- Navigation between image categories
- Detailed view of each image
- Price and title information
- Add/remove images from cart
- Automatic total calculation
- Cart state persistence
- Responsive design
- Intuitive navigation
- Visual effects on interaction
The application uses Context API to manage global state, including:
- Image list
- Cart state
- Purchase total
- Drawer state
The project uses Material-UI for interface design, providing:
- Consistent components
- Responsive design
- Customizable themes
- Smooth animations
The application is optimized for different screen sizes:
- Mobile
- Tablet
- Desktop
This project is licensed under the MIT License - see the LICENSE.md file for details.
- Guste Gaubaite - React Laboratory Project "Image Gallery" for Lemoncode Frontend Master