🛒 PicSome

PicSome is a mock E-commerce site built using React.js as part of Scrimba's Frontend Career Path. You can access the live site here.

Technologies Used

• React.js for building the user interface and implementing component-based architecture.
• JavaScript for handling logic and functionality.
• CSS Grid for designing responsive layouts and handling grid-based positioning.

Features

• Allows users to mark favorite pictures and add them to their cart for later purchase.
• Provides the ability to edit cart items before proceeding to checkout.
• Implements order placement functionality for completing the purchase process.

Skills Acquired & Topics Researched

During the development of PicSome, the following skills were acquired and topics were researched:

• Implemented API calls in React.js to fetch data and display it in the user interface.
• Utilized the useRef() hook to implement event listeners in React components, allowing for efficient event handling.
• Implemented React Router for handling routing in a React application, enabling smooth navigation between different pages.
• Managed state using the Context API in React to efficiently share data among different components and improve performance.
• Created custom hooks for reusability, encapsulating common logic and functionality.
• Implemented conditional rendering techniques in React components to dynamically display content based on different conditions or states.
• Validated props types using PropTypes in React to ensure correct usage of props and catch potential errors early in the development process.

Installation

To run PicSome locally, follow these steps:

1. Clone the repository to your local machine.
2. Navigate to the project directory in your terminal.
3. Run npm install to install the necessary dependencies.
4. Run npm start to start the development server.
5. Open your web browser and go to http://localhost:3000 to view and interact with the application.