<div align="center"> <br /> <a href="https://bit.ly/3LboNOQ" target="_blank"> <img src="https://i.postimg.cc/3xjm5F9w/main-thumbnail.png" alt="Project Banner"> </a> <br /> <div> <img src="https://img.shields.io/badge/-React_Native-black?style=for-the-badge&logoColor=white&logo=react&color=61DAFB" alt="react-native" /> <img src="https://img.shields.io/badge/-React_Native_Reanimated-black?style=for-the-badge&logoColor=white&logo=react&color=61DAFB" alt="react-native-reanimated" /> <img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" /> <img src="https://img.shields.io/badge/-Node.js-black?style=for-the-badge&logoColor=white&logo=node.js&color=339933" alt="node.js" /> <img src="https://img.shields.io/badge/-Express-black?style=for-the-badge&logoColor=white&logo=express&color=000000" alt="express" /> <img src="https://img.shields.io/badge/-MongoDB-black?style=for-the-badge&logoColor=white&logo=mongodb&color=47A248" alt="mongodb" /> </div> <h3 align="center">Full Stack E-Commerce App</h3> <div align="center"> Build this project step by step with our detailed tutorial on <a href="https://www.youtube.com/@Dev-Minds/videos" target="_blank"><b>Dev Minds</b></a> YouTube. Join the DM family! </div> </div>

📋 Table of Contents

🤖 Introduction
⚙️ Tech Stack
🔋 Features
🤸 Quick Start
🖼️ Assets
🔗 Links

🚨 Tutorial

This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, <a href="https://www.youtube.com/@WebMindsYT/videos" target="_blank"><b>Web Minds</b></a>.

If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

<a name="introduction">🤖 Introduction</a>

Welcome to the Full Stack E-Commerce App! This app is designed to offer a comprehensive E-Commerce solution with a focus on responsiveness and smooth animations. Built using React Native, Node.js, and MongoDB, it ensures high performance and scalability.

<a name="tech-stack">⚙️ Tech Stack</a>

React Native
React Native Reanimated
Tailwind CSS
Node.js
Express
MongoDB

<a name="features"> 🔋 Features</a>

👉 Beautiful Subtle Smooth Animations using React Native Reanimated: Enhance user experience with seamless and captivating animations.

👉 Completely Responsive: Access and optimal viewing on any device with a fully responsive design.

👉 Real-time Updates: Stay up-to-date with real-time data synchronization across the app.

👉 Check-out Page: Simplified and efficient check-out process for user convenience.

👉 Secure Authentication: Robust authentication mechanisms to protect user data.

👉 Scalable Backend: Powered by Node.js and Express for a scalable and efficient backend.

<a name="quick-start">🤸 Quick Start</a>

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

Git
Node.js
npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/Abdullah0Dev/stylish.git
cd stylish

Installation

Navigate to the frontend folder and install dependencies:

cd frontend
npm install

Navigate to the backend folder and install dependencies:

cd ../backend
npm install

Running the Backend

Start the backend server:

npm start

Running the Frontend

Navigate back to the frontend folder and start the React Native app:

cd ../frontend
npx react-native run-android # For Android
npx react-native run-ios # For iOS

Open the app on your simulator or real device to view the project.

<a name="assets">🖼️ Assets</a>

Find all assets here.

<a name="links">🔗 Links</a>

🎨 Design : Figma App Desing✍

Stylish

Install / Use

README