Hi, I'm C SREERAG ! 👋

PhoneHub

PhoneHub is a web application for a smartphone store, showcasing the latest brands and phones available in the market.

Click the below Link

PhoneHub

Technologies Used

• React: Frontend JavaScript library for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for styling.
• Framer Motion: Animation library for React.
• Firebase: Platform for building and running web and mobile applications.
• Firestore: Flexible, scalable database for mobile, web, and server development.
• Redux: State management library for JavaScript apps.
• Stripe: Payment processing platform for online transactions.
• Emailjs: For sending email in contact us.

Tech Stack

Client: React, Redux, TailwindCSS

Server: Node, Express

Features

• Browse and search for the latest smartphones.
• Login and signup using Firebase.
• Filter phones.
• Skeleton loading.
• Pagination.
• Dark mode and light mode.
• View details and specifications of each phone.
• Add phones to cart and proceed to checkout.
• Secure payment processing with Stripe.
• Responsive design for mobile and desktop.

Getting Started

To get a local copy up and running follow these steps:

Prerequisites

• Node.js installed on your machine
• Firebase project with Firestore setup
• Stripe account for payment integration

Installation

1. Clone the repository:

   git clone https://github.com/your-username/phonehub.git
   cd phonehub

2. Install dependencies:

   npm install

3. Set up Firebase:

   • Create a Firebase project at Firebase Console.
   • Add a web app to your Firebase project.
   • Copy Firebase configuration settings (found in Firebase Console > Project settings > Your apps) and replace them in src/firebase/firebaseConfig.js.

4. Set up Stripe:

   • Obtain your Stripe API keys from Stripe Dashboard.
   • Replace your Stripe publishable key in src/components/CheckoutForm.js.

Usage

1. Start the development server:

   npm start

2. Open http://localhost:3000 to view it in the browser.

Deployment

Deploy your app to Firebase Hosting or any other hosting provider:

1. Build the app for production:

   npm run build

2. Deploy to Firebase (example):

   firebase deploy

Contributing

Contributions are welcome! Feel free to open a pull request for adding new features, fixing bugs, or improving documentation.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Thanks to the creators of React, Tailwind CSS, Framer Motion, Firebase, Firestore, Redux, and Stripe for their awesome tools and services.

🔗 Links