E-Commerce Website

🧭 Objective

• Develop a fully client-side responsive E-Commerce website.
• Allow users to explore a wide range of products efficiently.
• Enable smooth product Browse with an intuitive UI.
• Implement a fast and accurate product search feature.
• Provide detailed product information including name, price, and image.
• Allow users to add and remove items from a shopping cart.
• Use JavaScript and localStorage to persist cart data without backend.
• Support checkout process on the same page without reloading.
• Offer organized product categories like Men, Women, Kids, Gifts, Others.
• Include visual enhancements like high-quality product images and descriptions.
• Provide easy product filtering and quick navigation.
• Ensure fully mobile-responsive and cross-browser compatible design.
• Create glowing animated project cards for visual appeal.
• Showcase frontend development skills without server-side logic.
• Lay a scalable foundation for future backend integration and real-world deployment.

🧩 List of Modules Used

• Frontend Development: HTML, CSS, and JavaScript used to build all pages and interfaces.
• User Interface Design: Clean and responsive UI for Browse, searching, and viewing products.
• Cart Management: JavaScript used to add, update, and remove items dynamically in the cart.
• Product Display Pages: Each product has a dedicated HTML page with images and descriptions.
• Category-wise Browse: Organized product categories like Men, Women, Kids, Gifts, Others.
• Search Functionality: JavaScript-powered search to find products by name or category.
• Data Handling: Static product data managed via product.json (no backend/database).
• Image and Media Assets: All product and UI images stored locally in structured folders.
• Navigation System: Navbar and footer components used for smooth page transitions.
• Local Hosting & Testing: Can be opened in any browser or run using Live Server extensions (e.g., VS Code Live Server).

✅ Functional Requirements

These define what the system should do:

• Product Browse: Users must be able to browse through product categories such as Men, Women, Kids, Gifts, and Others.
• Product Detail View: Clicking on a product redirects users to a dedicated product detail page.
• Dynamic Shopping Cart: Users can add products to a shopping cart.
• Search Functionality: A search bar is available for users to find products by name or keyword.
• Navigation Between Pages: Users can navigate smoothly between Home, Categories, About, Contact, Cart, and Checkout pages.
• Checkout View: Users can proceed to a static Checkout page to review cart items and total cost.
• Responsive Design: The layout adjusts to different screen sizes and devices (desktop, tablet, mobile).

✅ Non-Functional Requirements

These define how well the system performs:

• Performance: The website should load quickly and respond to user interactions (like cart updates and search) within 1–2 seconds.
• Usability: The interface is clean, simple, and intuitive, allowing users to browse, search, and manage their cart with ease.
• Portability: The system is fully browser-based and can run on any modern device with a web browser.
• Security: No login or sensitive data is collected, minimizing security risks.
• Maintainability: The codebase is organized into clearly structured folders (like categories/, components/, etc.).
• Reliability: Since it’s a static site with no backend, there are fewer points of failure.
• Scalability (Limited): New product pages or categories can be easily added by duplicating templates and updating data in product.json (if used).

Limitations of the Project

• No Backend Integration: The site is purely frontend-based with no support for real-time database or user login features.
• No Payment Gateway: Checkout is static — there is no integration with real-world payment systems like Razorpay or Stripe.
• No Order History: Users cannot view previous orders or receive confirmation since there’s no server or database handling transactions.
• Static Product Data: All product details are hardcoded or stored in static JSON. There's no dynamic product management or inventory system.
• Limited Security: No user authentication or data encryption, as it doesn’t handle any personal/user-sensitive information.
• No Admin Panel: There’s no backend dashboard to add or remove products dynamically. Everything must be edited manually.
• Limited Scalability: While new products can be added manually, there’s no CMS or auto-generated product pages.
• No Cart Persistence after Checkout: Cart is cleared on checkout but doesn’t generate or store any invoice or summary.

Page 5: UML Diagrams

Page 6: Website Screenshots

Expense Tracker - Page 1: Objective

• To build a simple, user-friendly platform for managing personal income and expenses.
• Allow users to record daily transactions and categorize them effectively.
• Enable automatic calculation and display of balance, total income, and expenses.
• Provide monthly financial summaries to support better budgeting.
• Ensure each user’s data is secure and isolated using session-based login.
• Support features like editing, deleting, and filtering of transactions.
• Design the system to be responsive and work on multiple devices.
• Minimize backend complexity while ensuring accurate and consistent data management.
• Enhance financial discipline by helping users track and visualize their spending habits.

Page 2: Features

• Login System: Secure login with session tracking to protect user data.
• Income Entry: Users can input income with date, amount, and source.
• Expense Entry: Add expense details with category, amount, and purpose.
• Transaction Management: Edit, delete, and update transaction records easily.
• Dashboard View: Summarized view of balance, income, and expenses.
• Monthly Report: View categorized monthly summaries of expenses and income.
• Category Filtering: Quickly filter records by category like food, rent, travel, etc.
• Password Change: Update password using form with validation.
• Responsive Layout: Accessible and usable on mobile, tablet, and desktop.
• User Feedback: Error messages and success alerts provided after actions.

Page 3: Tools Used

• HTML5: Used to create the basic structure and layout of web pages.
• CSS3: Styling for UI design, form controls, dashboard layout, and responsiveness.
• JavaScript: Dynamic behavior for forms, validation, and interactivity.
• PHP: Server-side logic for handling user login, data insertion, updates, etc.
• MySQL: Database for storing users, income, expense records.
• XAMPP: Local web server used for development and testing.
• Sessions: PHP sessions used to store login info and restrict access.
• VS Code: Main editor used for writing and managing code.
• File Structure: Organized directories for PHP files, assets, and modules.

Page 4: Functional Requirements

• User Login: Secure login with validation and session-based access control.
• Transaction Input: Add income and expense records with relevant details.
• Transaction Update: Edit or delete previous records from the dashboard.
• Dashboard View: Visual summary of income, expense, and balance in real time.
• Category-Based Filtering: Sort records by categories (like Food, Travel, Rent).
• Monthly Reports: View expense/income records based on month or date range.
• Password Management: Allow users to change password securely.
• Logout: Proper logout mechanism to end sessions and secure data.
• Error Handling: Show user-friendly error messages on invalid input.
• Navigation: Smooth transitions between login, dashboard, entry forms, and reports.

Page 5: UML Diagrams

Page 6: Website Screenshots