TechBuy - E-commerce Web Application

TechBuy is a simple e-commerce web application built with PHP and Tailwind CSS. It supports product listing, user authentication, shopping cart functionality, and an admin dashboard for managing products and users.

---

Table of Contents

• Features
• Project Structure
• Technologies Used
• Installation
• Development
• Tailwind CSS Setup
• Security Features
• Usage
• Contributing
• License
• Acknowledgements

---

Features

• User registration and login with session management
• Admin user management and dashboard
• Product listing with categories and attributes (e.g., storage, colors)
• Product detail page with selectable attributes
• Shopping cart with add/remove functionality
• CSRF protection on forms
• Input sanitization and validation
• Responsive UI using Tailwind CSS

---

Project Structure

techbuy/ ├── app/ │ ├── controllers/ # PHP controllers │ ├── models/ # PHP models │ ├── views/ # PHP view templates │ └── csrf.php # CSRF protection utility ├── config/ # Configuration files (e.g., database.php) ├── node_modules/ # Node.js dependencies (ignored by git) ├── public/ # Public assets (images, compiled CSS, JS) │ └── css/ │ └── styles.css # Compiled Tailwind CSS file ├── routes/ # Route handling logic ├── src/ # Tailwind input CSS file and related sources ├── tailwind.config.js # Tailwind CSS config file ├── package.json # Node.js dependencies and scripts ├── package-lock.json # Node.js lock file ├── .gitignore # Git ignore rules ├── README.md # This file └── index.php # Main entry point

---

Technologies Used

• PHP 8.3
• MySQL / MariaDB (or any compatible database)
• Tailwind CSS (via CLI build process)
• JavaScript (vanilla for UI interactions)
• Node.js and npm (for Tailwind build tooling)

---

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/techbuy.git
   cd techbuy
   

2. Set up your PHP environment (e.g., MAMP, XAMPP, native PHP server).

3. Configure your database credentials in config/database.php.

4. Run the SQL schema script to create required tables.

5. Install Node.js dependencies for Tailwind:

   npm install

6. Build tailwind CSS:

   npx tailwindcss -i ./src/input.css -o ./public/css/styles.css --watch

7. Start your PHP server and visit the site (e.g., http://localhost:8888/techbuy/public).

Development

• All backend logic is inside the app folder, divided into controllers, models, and views.
• Routing is handled via index.php and routes folder.
• Tailwind CSS is compiled from src/input.css to public/css/styles.css.
• JavaScript files (if any) are inside public/js.

---

Tailwind CSS Setup

• This project uses Tailwind CLI for CSS.

• Source styles are in src/input.css.

• Compiled CSS is output to public/css/styles.css.

• The main layout includes the compiled CSS file instead of CDN.

• Use this command to build and watch for changes:

  npx tailwindcss -i ./src/input.css -o ./public/css/styles.css –watch

---

Security Features

• CSRF Protection: All forms include CSRF tokens generated in app/csrf.php.
• Input Validation & Sanitization: User inputs are validated and sanitized before database operations.
• Password Hashing: Passwords are securely hashed using PHP’s password_hash and verified with password_verify.
• Session Management: Sessions protect authenticated routes.
• Role-based Access Control: Admin pages are restricted to admin users.

---

Usage

• Visit /index.php?page=register to create a user account.
• Login via /index.php?page=login.
• Browse products at /index.php?page=product_list.
• View product details, select attributes, and add products to cart.
• Access the admin dashboard (if admin) at /index.php?page=admin_dashboard.
• Manage products and users via admin interfaces.

---

Contributing

Contributions are welcome! Please fork the repository and submit pull requests for improvements or bug fixes.

---

License

This project is licensed under the MIT License.

---

Acknowledgements

• Tailwind CSS
• PHP
• University project for learning PHP MVC and Tailwind CSS integration.