chore: update .gitignore and enhance README for Tulis e-commerce platform

- Added environment variable files to .gitignore for better security.
- Expanded README to provide a comprehensive overview of the Tulis e-commerce platform, detailing features, installation instructions, project structure, and technologies used.

Author: Al Aqsa Reto Wijaya

.firebase/hosting.ZGlzdA.cache

@@ -1,5 +1,5 @@
 vite.svg,1755380691932,12b282beddfe94d624e7f1155761299a42ce1e3eac8053ebe3f38bd1fa04816c
 index.html,1755380692071,dd153f266981623e8c4c6645d404d0b11058725048af9ba794313e533a92d19c
-assets/index-COzo0pl4.css,1755380692071,0935406db05f2a45fd95f79dd213491e2cba30de0106b20d1f56c9806fb41e7b
 assets/tulis-logo-RCPKZwBo.png,1755380692071,babae3aad12011083e9c9c3b0a413876c58eb548624b45f48d87673b0d4d8f52
 assets/index-w3jXouWS.js,1755380692071,a261f0fdf7db5cb0b9ef8bf743373c068f42774c04129640a2d9aaf52ea58a47
+assets/index-COzo0pl4.css,1755380692071,0935406db05f2a45fd95f79dd213491e2cba30de0106b20d1f56c9806fb41e7b

.gitignore

@@ -22,4 +22,16 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.env
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Firebase
+.firebase/
+firebase-debug.log
+firestore-debug.log
+ui-debug.log

README.md

@@ -1,12 +1,218 @@
-# React + Vite
+# 🖊️ Tulis - Stationery E-commerce Platform
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A modern, responsive e-commerce platform for stationery products built with React, Firebase, and Tailwind CSS. Features a comprehensive dark theme system, user authentication, and admin management capabilities.
 
-Currently, two official plugins are available:
+![Tulis Logo](src/assets/tulis-logo.png)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) 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
+## ✨ Features
 
-## Expanding the ESLint configuration
+### 🛍️ **E-commerce Functionality**
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+- **Product Catalog**: Browse stationery items with categories (Pen, Pencil, Brush, Case)
+- **Product Filtering & Sorting**: Filter by category and sort by price (low to high, high to low)
+- **Shopping Cart**: Add items to cart with quantity management
+- **Product Details**: Detailed product pages with images and descriptions
+- **Responsive Design**: Mobile-first design that works on all devices
+
+### 👤 **User Authentication**
+
+- **Email/Password Login**: Traditional authentication with Firebase Auth
+- **Google OAuth**: One-click sign-in with Google
+- **User Registration**: Secure account creation with validation
+- **Role-based Access**: Separate interfaces for customers and admins
+- **Session Management**: Persistent login state with automatic redirects
+
+### 🎨 **Advanced UI/UX**
+
+- **Dark/Light Theme**: Toggle between themes with system preference detection
+- **Theme Persistence**: Remembers user's theme preference across sessions
+- **Smooth Animations**: CSS transitions and hover effects throughout
+- **Loading States**: Skeleton loaders and loading indicators
+- **Error Handling**: User-friendly error messages and alerts
+
+### 🔧 **Admin Panel**
+
+- **Product Management**: Add, edit, and delete products
+- **Inventory Control**: Manage stock levels and product information
+- **Image Upload**: Cloudinary integration for product images
+- **Data Tables**: Sortable product tables with bulk actions
+- **Real-time Updates**: Instant UI updates after data changes
+
+### 🛠️ **Technical Features**
+
+- **State Management**: Redux Toolkit for global state
+- **Real-time Database**: Firebase Firestore for data persistence
+- **Image Hosting**: Cloudinary for optimized image storage
+- **Routing**: React Router with protected routes
+- **Form Validation**: Client-side and server-side validation
+- **Error Boundaries**: Graceful error handling throughout the app
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- Node.js (v16 or higher)
+- npm or yarn
+- Firebase account
+- Cloudinary account (for image uploads)
+
+### Installation
+
+1. **Clone the repository**
+
+   ```bash
+   git clone https://github.com/yourusername/tulis.git
+   cd tulis
+   ```
+
+2. **Install dependencies**
+
+   ```bash
+   npm install
+   ```
+
+3. **Environment Setup**
+   Create a `.env` file in the root directory:
+
+   ```env
+   # Firebase (matches src/config/firebase.js)
+   VITE_API_KEY=your_firebase_api_key
+   VITE_AUTH_DOMAIN=your_firebase_auth_domain
+   VITE_PROJECT_ID=your_firebase_project_id
+   VITE_STORAGE_BUCKET=your_firebase_storage_bucket
+   VITE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
+   VITE_APP_ID=your_firebase_app_id
+   VITE_MEASUREMENT_ID=your_firebase_measurement_id
+
+   # Optional: if you parameterize Cloudinary later
+   # VITE_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
+   # VITE_CLOUDINARY_UPLOAD_PRESET=your_cloudinary_upload_preset
+   ```
+
+4. **Firebase Configuration**
+
+   - Create a Firebase project
+   - Enable Authentication (Email/Password and Google)
+   - Create a Firestore database (native mode)
+   - Add your Firebase config to `src/config/firebase.js` (already wired to use the `.env` variables above)
+
+5. **Cloudinary Setup**
+
+   - Add the Cloudinary upload widget script (already included in `index.html`):
+     ```html
+     <script
+       src="https://upload-widget.cloudinary.com/global/all.js"
+       type="text/javascript"
+     ></script>
+     ```
+   - Configure `cloudName` and `uploadPreset` in `src/components/UploadWidget.jsx`
+     (currently hardcoded to `dvkwdyyc7` and `tulis-image`). Replace with your values.
+
+6. **Run the development server**
+
+   ```bash
+   npm run dev
+   ```
+
+7. **Build for production**
+   ```bash
+   npm run build
+   ```
+
+### Scripts
+
+- `npm run dev` — start Vite dev server
+- `npm run build` — build for production
+- `npm run preview` — preview the production build
+- `npm run lint` — run ESLint
+
+## 📁 Project Structure
+
+```
+tulis/
+├── src/
+│   ├── app/                 # Redux store and actions
+│   ├── components/          # Reusable UI components
+│   ├── config/              # Firebase and external service configs
+│   ├── context/             # React context (ThemeContext, ThemeProvider, AuthContext, AuthProvider)
+│   ├── hooks/               # Custom hooks/utilities (login/register/google login)
+│   ├── layouts/             # Layout components
+│   ├── pages/               # Page components
+│   ├── router/              # Routing configuration
+│   ├── utils/               # Utility functions (SweetAlert wrappers)
+│   └── assets/              # Static assets
+├── public/                  # Public assets
+├── firebase.json            # Firebase hosting config (SPA rewrites to index.html)
+└── package.json             # Dependencies and scripts
+```
+
+## 🗃️ Data Model (Firestore)
+
+- `users/{uid}`: `{ name: string, email: string, role: 'customer' | 'admin' }`
+- `products/{id}`: `{ name, desc, images, category, price: number, stock: number }`
+- `cart/{id}`: `{ userId, productId, qty: number, status: 'unpaid', totalPrice: number }`
+
+> Note: Admin access is controlled via the `role` field in `users`. Set `role: 'admin'` to grant admin panel access.
+
+## 🔐 Routing & Access Control
+
+- Public routes: `/`, `/login`, `/register`, `/cart`, `/detail-product/:id`
+- Protected admin routes: `/admin`, `/add-product`, `/edit-product/:id`
+- `ProtectedRoute` checks `AuthContext` for `user` and `role`.
+
+## 🛠️ Technologies Used
+
+- **Frontend**: React 19, Vite
+- **Styling**: Tailwind CSS 4
+- **State Management**: Redux Toolkit (slices: `product`, `cart`)
+- **Routing**: React Router DOM
+- **Authentication**: Firebase Auth
+- **Database**: Firebase Firestore
+- **Image Hosting**: Cloudinary (Upload Widget)
+- **UI Components**: Lucide React Icons
+- **Notifications**: SweetAlert2
+- **Deployment**: Firebase Hosting
+
+## 🎨 Theme System
+
+The application features a comprehensive dark/light theme system:
+
+- **Automatic Detection**: Detects system theme preference
+- **Manual Toggle**: User can switch themes manually
+- **Persistence**: Remembers theme choice across sessions (localStorage)
+- **CSS Variables**: Consistent theming across all components
+- **Smooth Transitions**: 0.3s ease transitions for theme changes
+
+## 🚀 Deployment
+
+### Firebase Hosting
+
+```bash
+npm run build
+firebase deploy
+```
+
+`firebase.json` is preconfigured with SPA rewrites to `index.html`.
+
+### Environment Variables
+
+Ensure all environment variables are set in your hosting platform:
+
+- Firebase configuration (see `.env` section)
+- Cloudinary credentials (if you parameterize them)
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+- Firebase for backend services
+- Cloudinary for image hosting
+- Tailwind CSS for styling
+- React community for excellent documentation
+- Lucide for beautiful icons
+
+---
+
+**Built with ❤️ using React, Firebase, and Tailwind CSS**