PhoneHub Frontend

A modern web application for managing and browsing stationery products, developed using React, TypeScript, and Redux. This project utilizes several state-of-the-art libraries and tools, including ShadCN UI for styling and TailwindCSS for custom design. The app provides users with features like product browsing, cart management, and profile customization.

🌐 Live Demo

• Frontend: https://phone-hub-frontend.vercel.app
• Backend: https://phonehub-server.vercel.app

---

✨ Features

• User Authentication: Login and register functionality.
• Dynamic Routing: Seamless navigation using react-router-dom.
• State Management: Redux Toolkit with Redux Persist for state persistence.
• Product Browsing: View all products and detailed product pages.
• Shopping Cart: Add, view, and manage items in the cart.
• Dashboard: A private dashboard for managing personal settings and data.
• Responsive Design: Optimized for both desktop and mobile devices.

---

Frontend Stack

• React: UI framework for building components.
• TypeScript: Type-safe development for JavaScript.
• Redux Toolkit: State management solution.
• Redux Persist: To maintain state across sessions.
• React Router: Navigation and routing.

Styling

• TailwindCSS: Utility-first CSS framework.
• ShadCN: A set of beautifully-designed, accessible components and a code distribution platform. It provides TailwindCSS minimally styled components for rapid UI development.

Build Tool

• Vite: Fast and modern build tool.

Prerequisites

• Node.js (v16 or higher)
• npm / yarn / bun

---

🚀 Setup Instructions

Frontend

git clone https://github.com/mostaryjahan/PhoneHub-frontend.git
cd PhoneHub-frontend
npm install
npm run dev

Backend

git clone https://github.com/mostaryjahan/PhoneHub-backend.git
cd PhoneHub-backend
npm install
npm run start:dev

Links:

• GitHub Frontend: Frontend Repo URL

• GitHub Backend: Backend Repo URL