🎓 College Saver

🛠️ Tech Stack & Tools

Core Technologies

Development Tools

Design & Assets

Browser Support

License

🎨 A web design mockup for college essentials e-commerce platform

College Saver is a frontend prototype/mockup of an e-commerce platform designed specifically for students. This project showcases the user interface and user experience design for browsing and purchasing essential supplies for Engineering, IT, and Medical courses.

⚠️ Note: This is currently a design prototype with frontend-only functionality. Backend integrations and payment processing are not yet implemented.

✨ Current Features (Frontend Only)

• 🛍️ Category-based Browsing: Visual layouts for Engineering, IT, and Medicine supplies
• 🛒 Cart Interface: Frontend cart design with item display
• 💳 Checkout Mockup: Payment interface design (no actual processing)
• 👤 User Interface: Login and signup page designs
• � Responsive Design: Mobile-first design approach
• 💬 Contact Form: Frontend contact interface
• ℹ️ About Page: Information section design

🚧 In Development / Future Features

• � Backend Authentication: User registration and login functionality
• � Payment Integration: Real PayPal, GCash, and credit card processing
• 📦 Order Management: Order tracking and history
• 🗄️ Database Integration: Product and user data management
• � Search Functionality: Product search and filtering
• 📧 Email Notifications: Order confirmations and updates
• 🛡️ Security Features: Data encryption and secure transactions
• 📊 Admin Dashboard: Inventory and order management

🏗️ Project Structure

College-Saver/
├── 📄 HTML Pages
│   ├── index.html          # Landing page
│   ├── home.html           # Home dashboard
│   ├── engineering.html    # Engineering supplies
│   ├── IT.html            # IT supplies
│   ├── medical.html       # Medical supplies
│   ├── cart.js            # Shopping cart
│   ├── checkout.html      # Checkout process
│   ├── login.html         # User login
│   ├── signup.html        # User registration
│   ├── contact.html       # Contact form
│   └── about.html         # About page
├── 🎨 Stylesheets
│   ├── style.css          # Main styles
│   ├── cart.css           # Cart-specific styles
│   └── product.css        # Product page styles
├── ⚡ JavaScript
│   ├── script.js          # Main functionality
│   ├── cart.js            # Cart operations
│   ├── checkout.js        # Checkout logic
│   └── user.js            # User management
└── 🖼️ Assets
    └── img/               # Images and icons
        ├── Engineering/   # Engineering product images
        ├── IT/           # IT product images
        └── Medicine/     # Medical product images

🚀 Getting Started

Prerequisites

• 🌐 Modern web browser (Chrome, Firefox, Safari, Edge)
• 📁 Local web server (optional, for best experience)

Installation

1. Clone the repository

   git clone https://github.com/JAE20/College-Saver.git

2. Navigate to the project directory

   cd College-Saver

3. Open in browser

   # Simply open index.html in your preferred browser
   # Or use a local server for better functionality
   python -m http.server 8000  # Python 3
   # Then visit http://localhost:8000

🛠️ Technologies Used

• Frontend: HTML5, CSS3, JavaScript (Vanilla)
• Styling: Custom CSS with responsive design
• Icons & Images: Custom product imagery
• Payment Integration: PayPal, GCash, Credit Cards
• Version Control: Git & GitHub
• Development: VS Code, Browser DevTools
• Design Tools: Figma, Adobe Photoshop, Canva

📱 Responsive Design

College Saver is built with mobile-first design principles:

• 📱 Mobile: Optimized for smartphones
• 📱 Tablet: Perfect for iPad and similar devices
• 💻 Desktop: Full-featured experience

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

1. 🍴 Fork the repository
2. 🌱 Create a feature branch (git checkout -b feature/AmazingFeature)
3. 💾 Commit your changes (git commit -m 'Add some AmazingFeature')
4. 📤 Push to the branch (git push origin feature/AmazingFeature)
5. 🔄 Open a Pull Request

🐛 Bug Reports

Found a bug? Please open an issue with:

• 📝 Detailed description
• 🔄 Steps to reproduce
• 💻 Browser/device information

📧 Contact

• Developer: JAE20
• GitHub: @JAE20
• Project Link: https://github.com/JAE20/College-Saver

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ for students, by students

⭐ Star this repo if you found it helpful!