Created by Eduard Herasym (GitHub: edkido);
Gadgets Store is a comprehensive web application developed as a personal project to showcase proficiency in modern web development technologies. Built with React, React Router, TypeScript, and SCSS, this project adheres to best practices and utilizes the BEM methodology for scalable and maintainable CSS architecture.
LINKS
You can view a live demo of the Gadgets Store DEMO LINK.
Design MOCKUP
FEATURES
- Responsive Design: Gadgets Store is optimized for seamless viewing across various devices and screen sizes, ensuring a consistent user experience.
- Dynamic Pages: The application consists of multiple pages including the Home page, Phones, Tablets, and Accessories pages, providing users with a smooth navigation experience.
- User Interaction: Users can engage with the platform by 'liking' articles, which are then stored locally and displayed on the Favorites page for easy access.
- Shopping Cart: Gadgets Store includes a fully functional shopping cart feature, allowing users to add desired items for purchase. Cart items are stored locally to maintain persistence across sessions.
- Touch Interactions: Gadgets Store enhances user experience on mobile devices with Swipers, enabling smooth touch interactions for navigating through product carousels and image galleries.
- Centralized State Management: Gadgets Store utilizes a main store state using Context, allowing for centralized management of application data. This ensures consistency and facilitates efficient data sharing between components.
- Modern Technologies: Gadgets Store utilizes a stack of modern technologies:
- React: A JavaScript library for building user interfaces, providing a declarative and component-based approach to building UIs.
- React Router: A routing library for React applications, enabling navigation between different components/pages.
- TypeScript: A statically typed superset of JavaScript that enhances code quality and developer productivity by catching errors early in the development process.
- SCSS: A powerful CSS preprocessor that enhances maintainability and reusability of stylesheets through features like variables, mixins, and nested rules.
- BEM Methodology: Gadgets Store follows the BEM (Block, Element, Modifier) methodology for naming CSS classes, promoting consistency and clarity in the codebase.
CONTRIBUTING
Contributions to Gadgets Store are welcome! Feel free to open issues or submit pull requests for any enhancements or bug fixes.