DiObral (E-commerce Mobile Application)

DiObral, an e-commerce platform developed for high-quality clothing sales, manufacturing, and export. This platform offers a sleek and elegant design, reflecting the premium nature of our products. With a focus on user experience, our site provides a seamless and engaging shopping experience, complemented by advanced features and interactive elements.

---

Project Description:

This React Native e-commerce app delivers a seamless shopping experience with elegant animations and a user-friendly interface. The homepage features a clean, Android-optimized design with smooth React Native Reanimated transitions. Users can browse detailed product pages, adjust quantities, and add items to their cart, which automatically clears upon logout. The app integrates with a Node.js, Express, and MongoDB backend for reliable order processing, profile management, and review submissions, ensuring a dynamic and interactive shopping journey.

Designed for performance and usability, this React Native app offers robust e-commerce functionality, including cart management, order tracking, and user profile customization. Customers can submit and paginate reviews, while the backend—powered by Express, Node.js, and MongoDB—ensures secure data handling. With polished animations and intuitive navigation, the app provides a modern shopping experience, from product discovery to checkout, all optimized for Android devices.

---

🤖 Tech Stack

---

Check out the latest demo of Project DiObral-Ecommerce-App. Check out the Backend Server demo of Project DiObral-Server.

---

Tech Stack For Backend

Run Locally

Clone the project using following command

  git clone https://github.com/BazilSuhail/DiObral-Mobile-App.git

Go to the project directory

  cd DiObral-Mobile-App

Then Run this command in your terminal to install all required dependancies:

  npm install

In the project directory, you can run:

  npm expo start -c

Run the app in your mobile using Expo Go App or using Android Studio after reading instructions from the commands listed after running the above command.

---

Features

Homepage

• Design: Clean and elegant layout optimized for android.
• React-Native reanimated Animations: Sophisticated animations to bring the applications's content to life.

Product Details Component

• Display Information: Comprehensive details of products including images, descriptions, and pricing.
• Add to Cart: Functionality to add items to the cart with adjustable quantities.

Cart Management

• Add to Cart: Add products with adjustable quantities.
• Cart Summary: View cart items including product name, price, quantity, and total price.
• Clear Cart: Automatically clears the cart when the user logs out.

Order Management

• Order Display: View order details such as the number of items, order date, total amount, and order ID.
• Order Details: Detailed view of individual orders and their items.

User Profile Management

• View and Edit Profile: Allows users to view and update their profile information, including full name, email, and phone number.

Review System

• Submit Reviews: Users can submit reviews for products, including rating and comments.
• Review Pagination: Reviews are displayed in groups of four with a 'Load More' button to view additional reviews.

---

Live Web Application Demo

Check out the Web Application demo of Project DiObral.