A responsive single-page application (SPA) built with React and React Router. This project serves as a portfolio hub to seamlessly showcase and navigate between various frontend applications, demonstrating client-side routing, component-based architecture, and complex state management.
A fully functional e-commerce storefront demonstrating advanced frontend architecture and state management.
Key Features:
- Dynamic Shopping Cart: Users can add items, adjust quantities with step controls (+/-), and safely remove products.
- Smart State Management: Implements confirmation alerts before deleting items, dynamic array manipulation, and real-time total cost calculations using array reduction.
- Category Filtering: Real-time data filtering utilizing JavaScript
Setobjects for unique category extraction and checkbox state tracking. - Responsive UI: Clean, professional interface built with CSS Grid and Flexbox, featuring a slide-out cart sidebar that adapts to different screen sizes.
- React.js: Functional components and React Hooks (
useState,useEffect) for managing UI state and lifecycles. - React Router DOM: For seamless client-side navigation between different applications without page reloads.
- CSS3: Custom styling featuring CSS Grid, Flexbox, and smooth CSS transitions.
- Vercel: Cloud deployment and hosting.
To run this project locally on your machine, follow these steps:
1. Clone the repository
git clone https://github.com/ptrypos/react-apps.git
2. Navigate to the project directory
cd react-apps
3. Install dependencies
npm install
4. Start the development server
npm run dev
Panagiotis Trypos