Toko Digital Kita - Web Application

Toko Digital Kita is a responsive web application designed to simulate an online store for selling mobile top-up (pulsa), data packages, and electronic devices like mobile phones, tablets, and smartwatches. It features user authentication (mocked), a shopping cart, and a simulated QRIS payment process.

Table of Contents

1. Key Features
2. Technology Stack
3. Project Structure
4. Installation
5. Running the Project
6. Core Components
7. State Management
8. Authentication Flow (Mocked)
9. Shopping Cart Functionality
10. QRIS Payment Simulation
11. Styling
12. Future Enhancements

Key Features

• Product Browsing: Users can browse electronic products and pulsa/data denominations.
• Pulsa/Data Purchase:
  • Select mobile operator (Telkomsel, Indosat, XL, etc.) with visual logos.
  • Choose from various pulsa or data denominations.
  • Enter phone number for top-up.
  • Simulated purchase process with loading states and success notifications.
• Electronics Shopping:
  • View a grid of electronic products (smartphones, tablets, etc.).
  • Product cards display name, image, description, price, brand, tags (e.g., "Baru", "Diskon"), and stock status.
  • "Add to Cart" functionality with loading state.
  • Button disabled for out-of-stock items.
  • Placeholder filters for category, brand, and sorting.
• User Authentication (Mocked):
  • User registration with email and password.
  • User login.
  • User data (list of registered users) is persisted in localStorage.
  • Current logged-in user state is managed and persisted.
  • Header dynamically updates to show user email and logout option, or login button.
  • Modals for login and registration forms.
• Shopping Cart:
  • Add electronic products to a shopping cart.
  • Cart modal displays items, total price, and allows item removal.
  • Cart icon in the header shows the number of items.
  • Cart contents are persisted in localStorage (separately for guest and logged-in users).
  • "Empty Cart" state.
• QRIS Payment Simulation:
  • "Checkout" from the cart initiates a simulated QRIS payment.
  • A modal displays a mock QRIS code and the total amount.
  • "I Have Paid" button simulates payment confirmation after a delay.
  • Cart is cleared upon successful simulated payment.
• Responsive Design: The application is designed to work on various screen sizes.
• Alerts/Notifications: Informative alerts for actions like successful purchase, login, registration, errors, etc.
• UI/UX Enhancements:
  • Loading spinners for asynchronous operations.
  • Visually distinct sections for Pulsa and Electronics.
  • Polished modals for interactions.
  • Custom icons for a richer visual experience.
  • Enhanced header and footer.

Technology Stack

• Frontend:
  • React 19: For building the user interface.
  • TypeScript: For static typing and improved code quality.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • ES6 Modules: For JavaScript code organization.
• Dependencies Delivery:
  • React and ReactDOM are loaded via CDN from esm.sh.
  • Tailwind CSS is loaded via CDN.

Project Structure

.
├── README.md                 // This documentation file
├── metadata.json             // Application metadata
├── index.html                // Main HTML entry point
├── index.tsx                 // React application root
├── App.tsx                   // Main application component, layout, routing logic, and global state
├── types.ts                  // TypeScript type definitions
├── constants.ts              // Application-wide constants (e.g., product data)
└── components/               // Reusable UI components
    ├── Alert.tsx
    ├── CartModal.tsx
    ├── ElectronicsSection.tsx
    ├── LoginForm.tsx
    ├── Modal.tsx
    ├── ProductCard.tsx
    ├── PulsaSection.tsx
    ├── QrisPaymentModal.tsx
    ├── RegisterForm.tsx
    ├── Spinner.tsx
    └── icons/                // SVG icon components
        ├── CheckCircleIcon.tsx
        ├── ChevronDownIcon.tsx
        // ... other icons
        └── XlIcon.tsx

Installation

This project is designed to run directly in a web browser without a complex build process or local server setup (though using a simple HTTP server is recommended for proper ES module handling).

1. Get the Code:

   • Download or clone all the project files (.html, .tsx, .ts, metadata.json, and the components directory) to a single folder on your local machine.
   • Ensure the directory structure shown in the "Project Structure" section is maintained.

2. No Further Installation Steps:

   • There are no npm install or yarn install steps required as dependencies (React, Tailwind CSS) are loaded via CDNs.

Running the Project

There are two main ways to run/view the application:

1. Using a Simple Local HTTP Server (Recommended for Development):

This method ensures that ES modules (import/export) and other web features work correctly, avoiding potential issues with file:/// URLs.

• If you have Node.js installed: You can use npx serve or other simple HTTP server packages. 1. Open your terminal or command prompt. 2. Navigate to the root directory where you saved the project files (the folder containing index.html). 3. Run the command: npx serve 4. The terminal will output a local address, usually http://localhost:3000 or http://localhost:5000. 5. Open this address in your web browser.

• Using Python's built-in HTTP server: 1. Open your terminal or command prompt. 2. Navigate to the root directory of the project. 3. If you have Python 3: python -m http.server 4. If you have Python 2: python -m SimpleHTTPServer 5. Open http://localhost:8000 (or the port shown) in your browser.

• Using VS Code Live Server Extension: 1. If you are using Visual Studio Code, install the "Live Server" extension by Ritwick Dey. 2. Open the project folder in VS Code. 3. Right-click on the index.html file in the VS Code explorer. 4. Select "Open with Live Server". This will automatically open the application in your default browser.

2. Opening index.html Directly (May have limitations):

• Navigate to the folder where you saved the project files.
• Double-click the index.html file.
• This will open the file in your default web browser using a file:/// path.

Important Note: While this might work for simple viewing, browsers have security restrictions for file:/// URLs (especially concerning ES modules and some APIs). For development and to ensure all features work as expected, using a local HTTP server is strongly recommended.

Once opened in the browser, you should see the "Toko Digital Kita" application interface.

Core Components

• App.tsx: The main application component. It manages:
  • Global state (active section, alerts, user authentication, shopping cart, payment modals).
  • Navigation between Pulsa and Electronics sections.
  • Header and Footer rendering.
  • Modal visibility and interactions.
  • Core logic for purchases, authentication, and cart management.
• PulsaSection.tsx: Handles the UI and logic for selecting an operator, denomination, entering a phone number, and initiating a pulsa/data purchase.
• ElectronicsSection.tsx: Displays electronic products using ProductCard.tsx and includes placeholder filters.
• ProductCard.tsx: Renders individual electronic product details and handles adding products to the cart.
• Modal.tsx: A generic, reusable modal component used for login, registration, cart, and QRIS payment.
• LoginForm.tsx / RegisterForm.tsx: Components for user authentication, handling input and submission.
• CartModal.tsx: Displays items in the shopping cart, allows removal, and initiates checkout.
• QrisPaymentModal.tsx: Simulates the QRIS payment process with a mock QR code.
• Alert.tsx: Displays feedback messages (success, error, info) to the user.

State Management

• The application primarily uses React's built-in state management (useState, useEffect).
• Global state relevant to the entire application (like current user, cart items, active UI section, alerts) is managed within the App.tsx component and passed down to child components via props.
• localStorage is used for persistence:
  • DUMMY_USERS_STORE_KEY: Stores the list of registered users (mock).
  • CURRENT_USER_STORE_KEY: Stores the currently logged-in user's details.
  • CART_ITEMS_STORE_KEY_PREFIX: Stores cart items. The key is prefixed and includes the user ID (if logged in) or "guest" to maintain separate carts.

Authentication Flow (Mocked)

1. Registration:
   • Users can register with an email and password via the RegisterForm.tsx in a modal.
   • Basic client-side validation (fields filled, password match, password length) is performed.
   • If the email is not already in the users list (from localStorage), the new user is added.
   • Upon successful registration, the user is automatically logged in.
2. Login:
   • Registered users can log in with their email and password via LoginForm.tsx.
   • The system checks if the email exists in the stored users list (password check is mocked).
   • On success, currentUser state is updated.
3. Logout:
   • Logged-in users can log out. This clears the currentUser state.
4. Persistence:
   • The list of all registered users and the current logged-in user are persisted in localStorage, allowing session continuity.

Note: Passwords are not securely handled or stored as this is a frontend-only mock system. In a real application, authentication would be managed by a secure backend.

Shopping Cart Functionality

1. Adding Items:
   • Users can add electronic products to their cart from ProductCard.tsx.
   • A loading state is shown on the "Add to Cart" button.
   • The cartItems state in App.tsx is updated.
2. Viewing Cart:
   • The CartModal.tsx displays all items in the cart, including their image, name, brand, and price.
   • The total price is calculated and displayed.
   • A badge on the header's cart icon shows the number of unique items.
3. Removing Items:
   • Users can remove items from the cart via a "Trash" icon in the CartModal.tsx.
4. Persistence:
   • Cart items are saved to localStorage. The storage key is dynamic, based on whether a user is logged in (CART_ITEMS_STORE_KEY_PREFIX + userId) or browsing as a guest (CART_ITEMS_STORE_KEY_PREFIX + 'guest'). This ensures cart items are preserved across sessions and are specific to the user/guest.
5. Checkout:
   • Clicking "Lanjut ke Pembayaran" in the cart triggers the QRIS payment simulation.

QRIS Payment Simulation

1. Initiation: After the user proceeds to checkout from the cart, the QrisPaymentModal.tsx is displayed.
2. Display: The modal shows:
   • A mock/placeholder QRIS code (SVG representation).
   • The total amount due.
   • Instructions to scan the code.
3. Confirmation (Simulated):
   • The user clicks "Saya Sudah Bayar".
   • A loading spinner is shown to simulate payment processing.
   • After a timeout (2.5 seconds), the payment is "confirmed".
4. Outcome:
   • A success alert is displayed.
   • The shopping cart is cleared.
   • The QRIS modal closes.

Note: This is purely a frontend simulation. No real payment processing or backend integration occurs.

Styling

• Tailwind CSS: The primary styling mechanism, used for most layout, typography, colors, and responsive design. The configuration is done directly in index.html via a <script> tag.
  • Custom primary and secondary colors are defined in tailwind.config.
• Custom CSS:
  • Global styles for scrollbars are defined in index.html.
  • Some components (e.g., Alert.tsx, ProductCard.tsx, PulsaSection.tsx, CartModal.tsx) include scoped <style> tags for specific animations or fine-tuned scrollbar appearances.
• Icons: SVG icons are used extensively and are organized as individual React components in the components/icons/ directory.

Future Enhancements

• Real Backend Integration:
  • Implement actual user authentication with a database.
  • Manage product inventory and orders on a server.
  • Integrate a real payment gateway for QRIS or other methods.
• State Management Library: For more complex applications, consider using a dedicated state management library like Redux Toolkit, Zustand, or Jotai.
• Advanced Product Filtering & Sorting: Make the filter and sort dropdowns in the electronics section functional.
• Product Detail Page: Allow users to click on a product to see a more detailed view.
• Quantity Management in Cart: Allow users to change the quantity of items in the cart.
• Order History: For logged-in users, display a history of their past purchases.
• Improved Form Validation: Add more robust client-side and server-side validation.
• Unit & Integration Tests: Implement testing to ensure code quality and reliability.
• Build System: Integrate a build tool like Vite or Webpack for optimization, module bundling, and a better development experience if the project grows beyond CDN usage.
• Accessibility (A11y) Audit: Perform a thorough accessibility review and implement improvements.
• Image Optimization: Use optimized images and perhaps a CDN for serving static assets.
• API for Pulsa Operators: Integrate with a real API for fetching pulsa operators and denominations dynamically.