Fakestore

Fakestore is a sleek and simple React Native app built using Expo that brings an online shopping experience to life. This app fetches data from the Fake Store API and includes features like viewing product listings, adding items to a cart, and checking out—all within a user-friendly mobile experience.

Features

• Authentication Page: Sign in to unlock a personalized shopping experience.
• Home Page: View a dynamic list of products fetched from the Fake Store API.
• Product Detail Page: Dive deeper into individual products with detailed views, including price, description, and images.
• Add to Cart: Easily add products to your cart with a single tap.
• Cart Page: View all items in your cart and proceed to checkout.
• Checkout Page: Finalize your shopping experience by confirming your purchase.
• Bottom Navigation Bar: Quickly navigate between Home, Cart, and other core sections of the app.

Get Started

1. Install dependencies:

   npm install

2. Start the app:

    npx expo start

   Setup Instructions

3. Copy the .env-example file and rename it to .env.

   cp .env-example .env

You can then open the app in:

• A development build
• An Android emulator
• An iOS simulator
• Or scan the QR code with your physical device using the Expo Go app

Pages Overview

• Authentication Page: Simple login system to personalize the experience for each user.
• Home Page: Displays a list of products, each with a thumbnail image, description, and price.
• Product Detail Page: Shows detailed information about a product with an option to add it to the cart.
• Cart Page: Lists all products added to the cart, allowing the user to review and modify items.
• Checkout Page: A summary of the cart contents with a button to proceed with the purchase.
• Bottom Navigation Bar: Persistent navigation bar at the bottom of the app for easy access to Home, Cart, and other key sections.

Test User Credentials (Fakestore API)

Username	Password
johnd	m38rmF$
mor_2314	83r5^_
kevinryan	kev02937@
donero	ewedon
derek	jklg*_56

Screens

References

This application was built using the following resources:

1. Expo Documentation
2. React Native Documentation
3. NativeWind
4. React Native SafeArea
5. React Native Testing Library
6. Stack Overflow: For troubleshooting various issues.
7. ChatGPT: Assisted in code troubleshooting and project guidance.