nightshift-ninjas · MarinaKramarchuk · Dec 4, 2025 · Nov 15, 2025 · Nov 15, 2025 · Nov 15, 2025
diff --git a/.env b/.env
@@ -0,0 +1,13 @@
+VITE_FIREBASE_API_KEY=AIzaSyBE4unvqtmbkqvHK6wsmp76CZlk4sJMi2k
+VITE_FIREBASE_AUTH_DOMAIN=nicegadgets-57840.firebaseapp.com
+VITE_FIREBASE_PROJECT_ID=nicegadgets-57840
+VITE_FIREBASE_STORAGE_BUCKET=nicegadgets-57840.firebasestorage.app
+VITE_FIREBASE_MESSAGING_SENDER_ID=1008000652504
+VITE_FIREBASE_APP_ID=1:1008000652504:web:1413dc4d501b95502c33ad
+VITE_FIREBASE_MEASUREMENT_ID=G-VL31HFGCWD
+
+VITE_PAYPAL_CLIENT_ID=AQ08Mqg0gNl9c6vLDhbyazrbdUhBRGXi0ZtrbxixLSDSQnu_7vCoNZTIzTt6p1Ya7CI6Y9o8pqbJRAae
+
+VITE_EMAILJS_SERVICE_ID=service_xhw8s4n
+VITE_EMAILJS_TEMPLATE_RECEIPT_ID=template_sr0o5jj
+VITE_EMAILJS_PUBLIC_KEY=41scgEAATYOVe9gbz
diff --git a/.prettierrc b/.prettierrc
@@ -1,8 +1,8 @@
 {
-  "experimentalTernaries": true,
+  "experimentalTernaries": false,
   "singleQuote": true,
   "quoteProps": "consistent",
-  "singleAttributePerLine": true,
+  "singleAttributePerLine": false,
   "arrowParens": "always",
   "bracketSameLine": false,
   "bracketSpacing": true,

diff --git a/.vite/deps/_metadata.json b/.vite/deps/_metadata.json
@@ -28,4 +28,4 @@
       "file": "chunk-KHA5YKM3.js"
     }
   }
-}
+}
diff --git a/.vite/deps/chunk-KHA5YKM3.js b/.vite/deps/chunk-KHA5YKM3.js
diff --git a/.vite/deps/react-dom_client.js b/.vite/deps/react-dom_client.js
diff --git a/.vite/deps/react.js b/.vite/deps/react.js
@@ -1,4 +1,2 @@
-import {
-  require_react
-} from "./chunk-KHA5YKM3.js";
+import { require_react } from './chunk-KHA5YKM3.js';
 export default require_react();
diff --git a/.vite/deps/react_jsx-dev-runtime.js b/.vite/deps/react_jsx-dev-runtime.js
diff --git a/README.md b/README.md
@@ -1,73 +1,146 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## React Compiler
-
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x';
-import reactDom from 'eslint-plugin-react-dom';
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-]);
-```
+<p align="center">
+  <h1 align="center">NiceGadgets 🛒</h1>
+</p>
+
+
+<p align="center">
+  <a href="https://nightshift-ninjas.github.io/react_phone-catalog/">
+    <img src="https://img.shields.io/badge/✨Live-Preview-brightgreen" alt="Live Preview">
+  </a>
+  <a href="https://github.com/nightshift-ninjas/react_phone-catalog">
+    <img src="https://img.shields.io/badge/💻Source-Code-blue" alt="Source Code">
+  </a>
+</p>
+
+
+<p align="center">
+  <a href="">
+    <img src="https://img.shields.io/badge/Status-Active-brightgreen?style=for-the-badge" alt="Status">
+  </a>
+  <a href="LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-blue?style=for-the-badge" alt="License">
+  </a>
+  <a href="https://nodejs.org/">
+    <img src="https://img.shields.io/badge/Node.js-v23.11.0-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js">
+  </a>
+  <a href="https://www.npmjs.com/">
+    <img src="https://img.shields.io/badge/npm-v11.4.2-orange?style=for-the-badge" alt="npm">
+  </a>
+</p>
+
+
+Welcome to **NiceGadgets**, the ultimate online store for purchasing the latest Apple devices. This e-commerce website is designed to provide a modern, user-friendly shopping experience with a variety of features and a sleek design. It is built with **React**, **TypeScript**, **Sass**, and many other modern technologies to ensure a smooth and responsive user interface.
+
+
+## Features 🚀
+
+### Cart Logic 🛒
+
+* Users can add/remove items from their cart.
+* The cart data is persisted in **Firebase Firestore** for authenticated users, making it available across sessions.
+
+### Checkout and Payment 💳
+
+* The checkout page integrates **Paypal**, allowing users to complete their purchases securely.
+* Order summary, shipping, and payment details are presented in a user-friendly way.
+
+### Authentication & Profile 🔑
+
+* Users can sign up and log in with their **Google account**.
+* Users have the option to view and edit their profile information.
+
+### Wishlist 💖
+
+* Users can save their favorite products for later purchase.
+* The wishlist is stored in **Firebase Firestore** for authenticated users.
+
+### Theme & Language Switcher 🌞🌙
+
+* Easily toggle between light and dark themes.
+* Switch between different languages (English, Spanish, French, etc.).
+
+### Sliders 🎠
+
+* The app features multiple image and product sliders across different sections using **Swiper JS**.
+* The sliders are fully responsive, ensuring a great experience on all devices.
+
+### Apex Charts for Statistics 📊
+
+* View real-time product statistics and performance in the form of interactive **Apex Charts**.
+
+## Technologies Used 🛠️
+[![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)](https://reactjs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![Sass](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white)](https://sass-lang.com/)
+[![Radix UI](https://img.shields.io/badge/Radix_UI-000000?style=for-the-badge&logo=radix&logoColor=white)](https://www.radix-ui.com/)
+[![Firebase](https://img.shields.io/badge/Firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=black)](https://firebase.google.com/)
+[![Paypal](https://img.shields.io/badge/PayPal-003087?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/)
+[![Framer Motion](https://img.shields.io/badge/Framer_Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white)](https://www.framer.com/motion/)
+[![ApexCharts](https://img.shields.io/badge/ApexCharts-FF4560?style=for-the-badge&logo=apexcharts&logoColor=white)](https://apexcharts.com/)
+[![i18n](https://img.shields.io/badge/i18n-0A0A0A?style=for-the-badge&logo=translation?color=white)](https://www.i18next.com/)
+
+
+## Installation 📥
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/nightshift-ninjas/react_phone-catalog.git
+   ```
+
+2. Enter the directory:
+   ```bash
+   cd react_phone-catalog
+   ```
+
+3. Install the dependencies:
+
+   ```bash
+   npm install
+   ```
+
+4. Run the development server:
+
+   ```bash
+   npm run dev
+   ```
+
+5. Open the app in your browser at `http://localhost:3000`.
+
+## Team 👥
+
+This project was developed by a talented team of four developers:
+
+#### Kramarchuk Marina – Tech Lead
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/marina-kramarchuk-5a009b333/)
+[![GitHub](https://img.shields.io/badge/GitHub-333333?style=for-the-badge&logo=github&logoColor=white)](https://github.com/MarinaKramarchuk)
+[![Telegram](https://img.shields.io/badge/Telegram-0088CC?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/mar_kram)
+
+#### Holovach Nazariy – Project Manager
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/nazariy-holovach-a6a30738a/)
+[![GitHub](https://img.shields.io/badge/GitHub-333333?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Aiiyuu)
+[![Telegram](https://img.shields.io/badge/Telegram-0088CC?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/nazariyholovach)
+
+#### Viktoriia Pitsan – Frontend Developer
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/viktoriia-pitsan-4426a238b/)
+[![GitHub](https://img.shields.io/badge/GitHub-333333?style=for-the-badge&logo=github&logoColor=white)](https://github.com/ViktoriiaPitsan)
+[![Telegram](https://img.shields.io/badge/Telegram-0088CC?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/Pitsan_Viktoriia)
+
+#### Linkevych Andrii – Frontend Developer
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/andrii-linkevych-928823394/)
+[![GitHub](https://img.shields.io/badge/GitHub-333333?style=for-the-badge&logo=github&logoColor=white)](https://github.com/andriiLink)
+[![Telegram](https://img.shields.io/badge/Telegram-0088CC?style=for-the-badge&logo=telegram&logoColor=white)](https://t.me/andrL1nk)
+
+
+## Contributing 🤝
+
+We welcome contributions from the community! If you'd like to contribute, please follow the steps below:
+
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feature/your-feature`).
+3. Commit your changes (`git commit -am 'Add new feature'`).
+4. Push to the branch (`git push origin feature/your-feature`).
+5. Create a new Pull Request.
+
+---
+
+Made with ❤️ by the **Nightshift-Ninjas** team.
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,4 +28,4 @@ @@
           "file": "chunk-KHA5YKM3.js"
         }
       }
-    }
+    }