🎨 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.
- 🛍️ 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
- � 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
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
- 🌐 Modern web browser (Chrome, Firefox, Safari, Edge)
- 📁 Local web server (optional, for best experience)
-
Clone the repository
git clone https://github.com/JAE20/College-Saver.git
-
Navigate to the project directory
cd College-Saver -
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
- 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
College Saver is built with mobile-first design principles:
- 📱 Mobile: Optimized for smartphones
- 📱 Tablet: Perfect for iPad and similar devices
- 💻 Desktop: Full-featured experience
We welcome contributions from the community! Here's how you can help:
- 🍴 Fork the repository
- 🌱 Create a feature branch (
git checkout -b feature/AmazingFeature) - 💾 Commit your changes (
git commit -m 'Add some AmazingFeature') - 📤 Push to the branch (
git push origin feature/AmazingFeature) - 🔄 Open a Pull Request
Found a bug? Please open an issue with:
- 📝 Detailed description
- 🔄 Steps to reproduce
- 💻 Browser/device information
- Developer: JAE20
- GitHub: @JAE20
- Project Link: https://github.com/JAE20/College-Saver
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!