Google Store - React

Table of Contents

• Project Description
• Technical Competencies
• Technologies
• Tools
• Key Features
• Installation and Execution
• Project Development
• Useful Resources
• Contributors

Project Description

We have designed a web application for Google Store, allowing customers to explore and purchase two new products through an interactive and modern interface, developed using the JavaScript library React.js. The project includes product pages, a functional shopping cart, and navigation adapted for various devices.

Technical Competencies

Create a dynamic and adaptable web user interface. Create a user interface with a content management or e-commerce solution.

Technologies

• HTML5: Version 1.4802.
• CSS3: Version 2.34
• JavaScript: Version 14
• React.js
• Vitejs

Tools

• Figma
• Visual Studio Code
• Git
• GitHub
• Jira

Key Features

Dynamic Interface: Interactive product display. Navigation Bar: Navigate between earbuds, watches, and cart pages. Image Change: Change main images based on selected type or color. Shopping Cart: Manage the shopping cart with options to add, remove, and adjust product quantities. Subtotal and Total: Automatically calculate the subtotal and total of the order. Social Media: Redirect to social media from the footer. Bonus: Testing functionalities using Vitest.

Installation and Execution

To install and run the project locally, follow these steps:

1. Clone the Repository: git clone https://github.com/GabyRosas/GoogleStoreReact

2. Navigate to the Project Directory: cd google-store-react

3. Install Dependencies: npm install

4. Start the Development Server: npm run dev

Project Development

The project was developed in a collaborative environment using agile methodologies. The following key functionalities were implemented:

Reusable Components: Use of React components to modularize the application. State Management: Managing application state using React hooks. Functional Programming: Use of advanced ECMAScript 6 methods such as map, filter, reduce, and forEach.

Useful Resources

• React.js Documentation
• Flexbox CSS Guide
• GitHub Documentation
• React.js Course
• Styling in React.js
• Common Mistakes by Junior Developers in React.js
• useEffect

Contributors

The following people have contributed to the development of "Google Store - React." Their efforts and dedication have been essential to bringing this project to fruition:

• Gaby Rosas, Developer: https://github.com/GabyRosas/GoogleStoreReact
• Carla Sanchez, Developer and Scrum Master: https://github.com/Carlassanchez24
• Valentina Toni, Developer: https://github.com/ItalianCookieMonster
• Carol Alonso, Developer: https://github.com/Calonsogon
• Shaila González, Developer: https://github.com/ShailaGonzalez