⭐ YoLearn-Campus

Hackathon Project | Best UI Award Winner 🏆

A peer-to-peer skill exchange platform designed to help users learn and share skills collaboratively. Built during a hackathon with a focus on creating an intuitive and beautiful user interface.

---

🎯 Project Overview

YoLearn-Campus is a web platform that connects learners and teachers in a collaborative learning environment. Users can share their expertise, learn new skills, and build a community around knowledge exchange.

✨ Key Features

• 🔐 User Authentication - Secure login and registration system
• 👥 Peer-to-Peer Learning - Connect with other learners and teachers
• 📚 Skill Exchange - Share and learn various skills
• 💬 Interactive UI - Modern, responsive design
• 🎨 Best UI Award - Recognized for outstanding user interface design

---

🖼️ Screenshots

Homepage

Add your actual screenshot here

Dashboard

Add your actual screenshot here

Skill Exchange Interface

Add your actual screenshot here

---

🚀 Live Demo

🔗 View Live Demo

Experience the platform in action! The live demo showcases all features and the award-winning UI design.

---

🛠️ Tech Stack

Frontend

• React.js - UI library for building interactive interfaces
• JavaScript (ES6+) - Modern JavaScript features
• Bootstrap - Responsive CSS framework
• CSS3 - Custom styling and animations

Backend

• Node.js - JavaScript runtime environment
• Express.js - Web application framework
• MongoDB - NoSQL database for data storage

Deployment

• Vercel - Frontend hosting and deployment

---

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn package manager
• MongoDB (local or cloud instance like MongoDB Atlas)
• Git for version control

---

🔧 Installation & Setup

1. Clone the Repository

git clone https://github.com/Nikhitha-spec/YoLearn-Campus.git
cd YoLearn-Campus

2. Install Dependencies

Frontend

cd client  # or frontend (depending on your project structure)
npm install

Backend

cd server  # or backend (depending on your project structure)
npm install

3. Environment Variables

Create a .env file in the backend directory:

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development

4. Run the Application

Development Mode

Terminal 1 - Backend:

cd server
npm run dev

Terminal 2 - Frontend:

cd client
npm start

The application will be available at:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

---

📁 Project Structure

YoLearn-Campus/
├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/    # Reusable React components
│   │   ├── pages/         # Page components
│   │   ├── services/      # API service functions
│   │   ├── styles/        # CSS and styling files
│   │   └── utils/         # Utility functions
│   ├── public/            # Static assets
│   └── package.json
├── server/                 # Backend Node.js application
│   ├── routes/            # API routes
│   ├── models/            # Database models
│   ├── middleware/        # Custom middleware
│   ├── controllers/       # Route controllers
│   └── package.json
├── README.md
└── .gitignore

---

🎨 UI/UX Highlights

Design Principles

• Clean & Modern - Minimalist design with focus on content
• Responsive - Works seamlessly on all device sizes
• Intuitive Navigation - Easy-to-use interface
• Accessible - Follows web accessibility guidelines
• Performance - Optimized for fast loading times

Color Scheme

• Primary: Modern blue tones
• Secondary: Complementary colors for accents
• Typography: Clear, readable fonts

---

🏆 Hackathon Experience

Challenge

Create a platform that facilitates peer-to-peer learning and skill exchange within a campus community.

Solution

YoLearn-Campus provides an intuitive interface where students can:

• List skills they want to teach
• Find skills they want to learn
• Connect with peers
• Build a learning community

Achievement

🏆 Best UI Award - Recognized for exceptional user interface design and user experience.

Key Learnings

• Rapid prototyping and development
• UI/UX design principles
• Team collaboration under time constraints
• Modern React patterns and best practices

---

🔮 Future Enhancements

• Real-time chat functionality
• Video call integration for virtual learning sessions
• Rating and review system
• Skill verification badges
• Mobile app development
• Advanced search and filtering
• Notification system
• Analytics dashboard

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your 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

---

📝 License

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

---

👥 Team

• Nikhitha Talari - Developer & UI Designer
  • GitHub: @Nikhitha-spec
  • LinkedIn: Nikhitha Talari

---

🙏 Acknowledgments

• Hackathon organizers for the opportunity
• Judges for recognizing the UI design
• All contributors and testers
• Open-source community for amazing tools and libraries

---

📞 Contact

For questions, suggestions, or collaboration opportunities:

• Email: [Your Email]
• LinkedIn: Nikhitha Talari
• GitHub: @Nikhitha-spec

---

⭐ If you like this project, give it a star! ⭐

Made with ❤️ by Nikhitha Talari