Campusconnect

• 

  home page

💡 Inspiration

Every semester, students struggle to buy expensive textbooks, find reliable notes, and keep track of campus events. Meanwhile, others have unused books and materials lying around. I wanted to solve this gap by creating a single, student-friendly platform that makes academic resources more affordable, accessible, and sustainable. That idea led to CampusConnect — a digital marketplace and community hub built by students, for students.

⚙️ What it does

CampusConnect is a web-based platform that allows students to:

Buy and sell books, electronics, or study materials within their college.

Share and download notes to support peer learning.

Create and register for campus events and workshops.

Receive notifications for sales, events, and updates in real time.

Manage personal profiles, track listings, and monitor engagement — all in a clean, Google-inspired interface.

It helps reduce costs, promotes reuse, and fosters stronger collaboration across the student community.

🛠️ How we built it

Frontend: HTML5, CSS3, JavaScript

Icons & UI: Font Awesome + custom CSS styling

Design System: Responsive layout inspired by Google’s Material Design

Data Handling: Simulated local data arrays in JavaScript for items, events, and users

Dynamic Interactions: Vanilla JS functions to handle modals, search, notifications, and page routing

Prototype Deployment: Can be easily hosted on GitHub Pages or Netlify

The entire application runs smoothly in the browser — no backend needed for the demo phase.

🚧 Challenges we ran into

Designing a mobile-first responsive UI that feels native on both phones and desktops.

Structuring multiple modals and dynamic views (for sell, events, profile, notifications) without frameworks.

Simulating data persistence and notifications without an actual backend.

Ensuring clarity and usability for new users while keeping the interface visually clean.

🏆 Accomplishments that we’re proud of

Built a complete working prototype that covers the full student experience: buying, selling, events, and learning resources.

Achieved a professional, responsive design comparable to production-level apps.

Designed a solution that delivers tangible social impact — helping students save money and reduce waste.

Created a platform that’s both scalable and adaptable for real-world college ecosystems.

📚 What we learned

How to create intuitive UI/UX flows using pure HTML, CSS, and JavaScript.

How to think about real-world usability and measurable social outcomes, not just code.

The importance of simplicity in design — users value clarity over complexity.

Collaboration tools and version control that can streamline hackathon development.

🚀 What’s next for CampusConnect

Integrate Firebase backend for real-time data and authentication.

Add AI-based recommendations for relevant study materials or events.

Implement secure payment gateway and verified student login system.

Launch a mobile app version using React Native for better accessibility.

Partner with universities to make CampusConnect a real community solution for students everywhere.

Built With

• and-data-handling-font-awesome-?-for-icons-and-ui-consistency-google-material-design-principles-?-for-clean
• css3
• design
• font
• html5
• interactivity
• javascript
• material
• modern-styling-javascript-(vanilla-js)-?-for-logic
• vs