📦 ShareX - Smart Campus Resource Sharing Platform A modern, responsive web application that enables students to share and borrow campus resources. Built with pure HTML, CSS, and JavaScript - no frameworks required!

Show Image

✨ Features Core Functionality 🔍 Browse Items - View all available items with search and filter capabilities 📝 List Items - Add your own items for sharing with the community 🏷️ Category Filters - Electronics, Books, Sports, Stationery, Musical, and more 🔎 Smart Search - Real-time search across item names and descriptions 📊 Sort Options - Sort by newest, price (low to high), price (high to low), or name 💾 Persistent Storage - Items saved to localStorage for persistence across sessions User Experience 🎨 Modern UI Design - Clean, intuitive interface with smooth animations 🌓 Dark/Light Mode - Toggle between themes with preference saved 📱 Fully Responsive - Optimized for mobile, tablet, and desktop ⚡ Fast & Lightweight - No framework overhead, pure vanilla JavaScript 🎯 Item Details Modal - View complete information about any item ✅ Form Validation - Client-side validation for all user inputs Pages Included Homepage (index.html) - Landing page with features and categories Login Page (login.html) - User authentication interface Signup Page (signup.html) - New user registration Dashboard (dashboard.html) - Browse and list items 🚀 Getting Started Prerequisites A modern web browser (Chrome, Firefox, Safari, Edge) A text editor (VS Code, Sublime Text, etc.) - optional Git (for cloning) - optional Installation Option 1: Download ZIP Download the project as a ZIP file Extract to your desired location Open index.html in your browser Option 2: Clone with Git bash

Clone the repository

git clone https://github.com/TomHacker69/ShareX.git

Navigate to project directory

cd sharex

Open in browser

On Mac

open index.html

On Linux

xdg-open index.html

On Windows

start index.html File Structure sharex/ │ ├── index.html # Homepage/Landing page ├── login.html # Login page ├── signup.html # Registration page ├── dashboard.html # Main dashboard for browsing items ├── style.css # Complete stylesheet ├── script.js # All JavaScript functionality └── README.md # Documentation Running Locally Method 1: Direct File Opening Simply double-click on index.html to open in your default browser.

Method 2: Using Live Server (Recommended) If you have VS Code:

Install the "Live Server" extension Right-click on index.html Select "Open with Live Server" Site will open at http://localhost:5500 Method 3: Using Python bash

Python 3

python -m http.server 8000

Python 2

python -m SimpleHTTPServer 8000

Then open http://localhost:8000 in your browser

Method 4: Using Node.js bash

Install http-server globally

npm install -g http-server

Run server

http-server

Open http://localhost:8080

🌐 Deploying to GitHub Pages Step 1: Create GitHub Repository Go to GitHub and create a new repository Name it sharex (or any name you prefer) Don't initialize with README (we already have one) Step 2: Push Code to GitHub bash

Initialize git repository (if not already done)

git init

Add all files

git add .

Commit changes

git commit -m "Initial commit - ShareX platform"

Add remote repository

git remote add origin https://github.com/yourusername/sharex.git

Push to GitHub

git branch -M main git push -u origin main Step 3: Enable GitHub Pages Go to your repository on GitHub Click on Settings Scroll down to Pages section (left sidebar) Under Source, select main branch Click Save Your site will be published at: https://yourusername.github.io/sharex/ Step 4: Access Your Site Wait 1-2 minutes for deployment, then visit:

https://yourusername.github.io/sharex/ 🎯 Usage Guide For Users (Borrowers)

1. Browse Items Visit the Dashboard page Use search bar to find specific items Filter by category using the dropdown Sort items by price, name, or date
2. View Item Details Click on any item card View complete details, pricing, and owner info Contact owner or request to borrow
3. Sign Up/Login Create an account to list items Login saves your session to localStorage Session persists across browser refreshes For Owners (Lenders)
4. List an Item Click "+ List Item" button on dashboard Fill in item details: Item name Category Description Price per day Availability status Image URL (optional) Submit to add to marketplace
5. Manage Listings All items are stored in localStorage Items persist across sessions Can be updated via browser localStorage 🎨 Customization Changing Colors Edit CSS variables in style.css:

css :root { --primary-color: #6366f1; /* Main brand color / --secondary-color: #10b981; / Accent color / --background: #ffffff; / Page background / / ... more variables */ } Adding New Categories In script.js, update the items array and add category options in HTML:

javascript // Add to category options in dashboard.html

Your Category Modifying Sample Items Edit the items array in script.js:

javascript let items = [ { id: 1, name: "Your Item Name", category: "Category", description: "Description", price: 100, // ... more properties } ]; 🔧 Technical Details Technologies Used HTML5 - Semantic markup CSS3 - Modern styling with Flexbox & Grid JavaScript (ES6+) - Vanilla JS, no frameworks LocalStorage API - Data persistence Key Features Implementation Dark Mode javascript // Automatically saves preference localStorage.setItem('theme', 'dark'); document.body.classList.add('dark-mode'); Item Storage javascript // Save items to localStorage localStorage.setItem('sharexItems', JSON.stringify(items));

// Retrieve items const savedItems = JSON.parse(localStorage.getItem('sharexItems')); Form Validation Email regex validation Password strength checking Required field validation Real-time error messages Browser Compatibility ✅ Chrome (90+) ✅ Firefox (88+) ✅ Safari (14+) ✅ Edge (90+) 📱 Responsive Breakpoints Desktop: > 768px Tablet: 768px - 1024px Mobile: < 768px 🐛 Known Limitations No Backend - All data stored in localStorage (client-side only) No Real Authentication - Login/signup is UI only No Image Upload - Uses URLs only (no file upload) LocalStorage Limits - ~5-10MB storage limit per domain Single User Context - No multi-user database 🔮 Future Enhancements (For Full Implementation) Backend API with Node.js/Express Database integration (MongoDB/PostgreSQL) Real authentication with JWT Image upload functionality User profiles and ratings Messaging system between users Payment integration Email notifications Admin dashboard Analytics and reporting 🤝 Contributing This is a hackathon demo project. Feel free to fork and enhance!

Making Changes Fork the repository Create a feature branch (git checkout -b feature/AmazingFeature) Commit changes (git commit -m 'Add AmazingFeature') Push to branch (git push origin feature/AmazingFeature) Open a Pull Request 📄 License This project is open source and available for educational purposes.

👨‍💻 Developer Notes Code Structure Separation of Concerns - HTML (structure), CSS (style), JS (behavior) Modular Functions - Each function has a single responsibility Comments - Comprehensive inline documentation Naming Conventions - camelCase for JS, kebab-case for CSS Performance Optimizations Minimal DOM manipulation Event delegation where possible CSS animations over JavaScript Lazy loading considerations 🎓 Learning Resources Built this as a learning project? Here are resources to go deeper:

MDN Web Docs JavaScript.info CSS Tricks Web.dev 📞 Support For hackathon judges or questions:

Open an issue on GitHub Email: your.email@example.com 🏆 Hackathon Presentation Tips Live Demo - Show the working site Mobile View - Demonstrate responsiveness Dark Mode - Toggle theme to show feature Add Item - Show the listing process LocalStorage - Explain data persistence Code Quality - Highlight clean, commented code Built with ❤️ for campus communities

Demo Project - Ready for Hackathon Presentation