Introduction

I am excited to share the journey of building an Amazon clone, a React Native application developed as a portfolio project. This project was a collaborative effort with Mensah Bernard and Bill Nyamekye Mensah. The project kicked off on July 4, 2024, and had to be completed by July 11, 2024. Our goal was to create an e-commerce platform that mimics some core functionalities of Amazon, such as product browsing, detailed views, cart management, and checkout.

Target Audience

This application is designed for anyone who wants a simple, user-friendly platform to browse products, add items to a cart, and proceed to checkout—essentially, anyone familiar with the Amazon shopping experience.

Personal Focus

My personal focus was on ensuring efficient state management and a clean, maintainable project architecture. I also took the lead in integrating Redux for state management and Firebase for backend services.

The Story Behind the Project

Everyone on our team enjoys shopping online, and we often discuss the user experience of different e-commerce platforms. Growing up in a small town, I didn't have access to many stores, so I relied heavily on online shopping. This project was a way for me to combine my passion for online shopping with my technical skills to create something that provides a similar experience to others.

One particular memory stands out from my childhood. I vividly remember the excitement of waiting for a package to arrive, tracking its progress every step of the way. This project brought back those feelings and inspired me to work on something that could bring that same joy to users.

Summary of Accomplishments

Project Overview
This Amazon clone successfully mimics key features of the original platform:

Product Browsing: Users can browse products by category.
Product Details: Each product has a detailed view with descriptions and pricing.
Cart Management: Users can add products to their cart and view cart contents.
Checkout: Users can proceed to checkout and place orders.

Technologies Used

Frontend: Html, Css and Javascript

Architecture Diagram
Key Features
Product Browsing: Users can explore various categories of products.
Detailed Product View: Provides comprehensive details about each product.
Cart Management: Allows users to add, view, and manage items in their cart.

The Most Difficult Technical Challenge

Situation
One of the most challenging aspects of the project was implementing real-time cart updates across different components.

Task
The goal was to ensure that the cart updates instantly and reflects changes regardless of where the user is in the application.

Action
To achieve this, I decided to use Redux for state management. This required setting up Redux actions, reducers, and ensuring that the components were correctly connected to the Redux store. Additionally, Firebase was integrated to sync the cart data in real-time.

javascript
Copy code
// Adding a product to the cart
const addToCart = (product) => {
return {
type: 'ADD_TO_CART',
payload: product
};
};

// Reducer for cart
const cartReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_TO_CART':
return [...state, action.payload];
default:
return state;
}
};

Result
After several iterations and debugging sessions, I managed to get the cart updating in real-time. This seamless experience was crucial for maintaining the app's usability and provided a valuable learning experience in handling real-time data synchronization.

_
What I've Learned_

Technical Takeaways
State Management: Understanding the importance of efficient state management in a complex application.
Real-time Data Sync: Gaining experience in integrating Netlify for real-time updates.
User Experience: Ensuring a seamless and intuitive user interface.
Personal Growth
Problem-Solving: Enhanced my problem-solving skills by tackling real-time data challenges.
Team Collaboration: Improved my ability to collaborate and communicate effectively within a team.
Future Improvements
User Authentication: Implementing a more robust authentication system.
Product Search: Adding a search functionality to help users find products quickly.
Enhanced UI/UX: Improving the design and adding animations for a better user experience.

About Me

I am a passionate software engineer with a keen interest in building user-centric applications. This project allowed me to combine my technical skills with my love for creating intuitive user experiences. You can find more about this project and my other works on my GitHub and LinkedIn profiles.

GitHub: Project Repository (https://github.com/bill-sparkx/Amazon_clone.git)

LinkedIn: My LinkedIn Profile (https://www.linkedin.com/in/bernardbill/)

Deployed Project: Amazon Clone App (https://capstone-amazonclone.netlify.app/)

Thank you for reading about my journey in building this Amazon clone. I look forward to applying these skills in future projects and continuing to grow as a software engineer.