Skip to content

clogan0910/EduCrateNoteHub

 
 

Repository files navigation

📚 EduCrate

A Modern Digital Library for S4 Computer Science & Engineering Students

Live Demo


📖 About

EduCrate is a modern, elegant digital library designed specifically for S4 Computer Science & Engineering students. Built with simplicity and accessibility in mind, this web application provides a centralized hub for storing, organizing, and accessing course materials, lecture notes, and study resources.

✨ Key Features

  • 📁 Subject-Based Organization - Materials categorized by subject folders for intuitive navigation
  • 🔍 Smart Search - Real-time search functionality to quickly find the notes you need
  • 📱 Fully Responsive - Seamless experience across desktop, tablet, and mobile devices
  • 🌓 Dark Mode Support - Toggle between light and dark themes for comfortable reading
  • 📄 Built-in PDF Viewer - View documents directly in the browser with download capabilities
  • Fast & Lightweight - Optimized performance with minimal dependencies
  • 🎨 Modern UI/UX - Clean, intuitive interface built with Tailwind CSS
  • 🔒 Google Drive Integration - Secure file storage and retrieval
  • 🛡️ Security First - Input validation, XSS protection, rate limiting, and Content Security Policy

🔒 Security

This application implements multiple security measures to protect users and data:

  • Input Validation - All user inputs are validated and sanitized
  • XSS Protection - HTML escaping and removal of inline event handlers prevent script injection
  • Content Security Policy - Strict CSP headers without unsafe-inline for scripts
  • ⚠️ Rate Limiting - Basic rate limiting implemented (may need enhancement for production serverless environments)
  • Secure CORS - Configurable cross-origin resource sharing
  • Error Handling - Secure error messages that don't expose internal details

For detailed security information, see SECURITY_AUDIT.md


🛠️ Tech Stack

Category Technology
Frontend HTML5, Vanilla JavaScript, Tailwind CSS
Backend Node.js, Express.js
Storage Google Drive API
Deployment Netlify
Styling Tailwind CSS (CDN)

🚀 How to Use

👨‍🎓 For Students (End Users)

  1. Browse Subjects 📚

    • Use the sidebar menu to navigate through different subjects
    • Click on the hamburger menu (mobile) to access subjects
  2. Search Notes 🔍

    • Click the search icon in the navigation bar
    • Type at least 2 characters to see instant results
    • Click on any result to open the document
  3. View PDFs 📄

    • Click on any note card to open it in the built-in viewer
    • The viewer loads with a smooth animation
  4. Download ⬇️

    • Use the "DOWNLOAD" button in the PDF viewer
    • Files are downloaded directly from secure storage
  5. Toggle Theme 🌓

    • Click the moon/sun icon to switch between dark and light modes
    • Your preference is saved automatically

💻 For Developers

Prerequisites

Before you begin, ensure you have the following installed:

Node.js >= 14.0.0
npm >= 6.0.0 or yarn >= 1.22.0
Git

📥 Installation

  1. Clone the repository

    git clone https://github.com/MabelMoncy/EduCrateNoteHub.git
    cd EduCrateNoteHub
  2. Install dependencies

    npm install
  3. Set up environment variables

    Copy the example environment file:

    cp .env.example .env

    Then edit .env and add your credentials:

    # Google Drive API Configuration
    GOOGLE_SERVICE_ACCOUNT_JSON={"type":"service_account",...}
    
    # Server Configuration
    PORT=3000
    NODE_ENV=development
  4. Run the development server

    npm start
  5. Access the application

    Open your browser and navigate to:

    http://localhost:3000
    

🔧 API Endpoints

Endpoint Method Description
/api/folders GET Get all subject folders
/api/files/:folderId GET Get files in a specific folder
/api/search?q=query GET Search for files across all folders

🚢 Deployment

Deploy to Netlify

  1. Connect your repository to Netlify
  2. Netlify will use the netlify.toml configuration automatically
  3. Add environment variables in Netlify dashboard
  4. Deploy!

Deploy to Netlify


🌐 Live Demo

🔗 View Live Demo

Experience EduCrate in action! The live demo showcases all features including:

✅ Subject browsing and navigation
✅ Real-time search functionality
✅ PDF viewing and downloading
✅ Dark/light mode theming
✅ Mobile-responsive interface

Note: The demo is populated with educational resources for S4 CS2 students.


🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Steps to Contribute

  1. Fork the Project
  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 created for educational purposes. Please credit the original author when using or modifying this code.


👨‍💻 Developer

Crafted with ❤️ for S4 CS2 Students

Mabel Anto Moncy

GitHub


🙏 Acknowledgments


📞 Support

If you have any questions or need help, please:


Made for Students, By Students 🎓

⭐ Star this repo if you find it helpful!

About

EduCrate is a centralized platform where the students of S4 Computer science can fetch the important notes which are shared on whatsapp

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 79.6%
  • HTML 20.4%