📚 DevStash

DevStash is a high-performance MERN stack platform built for developers to discover, save, and contribute high-quality learning resources. It focuses on security-first authentication, scalable architecture, and a smooth, modern user experience.

This project demonstrates real-world full-stack practices including OAuth integration, protected routing, API optimization, and production-ready deployment.

---

🚀 Live Demo & Deployment

The application follows a service-oriented deployment architecture, with frontend and backend hosted independently.

Component	Deployment Platform	URL
🌐 Frontend (Client)	Vercel	https://devstash-nine.vercel.app/
⚙️ Backend (API Proxy)	Render	https://devstash-1.onrender.com

⚠️ Note: Backend may take a few seconds to respond initially due to Render free-tier cold starts.

---

📸 Screenshots

🏠 Home Page	📚 All Resources Page

📄 Resource Detail Page	⭐ Saved Resources Page

🔐 Login Page	📝 Signup Page

---

🏆 Recognition

DevStash has been officially featured on Product Hunt 🚀
Your support helps the project grow and reach more developers!

💬 If you like DevStash, consider upvoting and sharing your feedback!

---

✨ Features

🔐 Authentication & Security

• JWT-based authentication with secure email/password login
• Password hashing using bcrypt
• Google OAuth 2.0 implemented via a custom redirect flow
  (Designed to safely bypass COOP/COEP browser security constraints)

---

🧭 Routing & Access Control

• Protected routes using ProtectedRoute
• Public-only routes using PublicRoute
• Role-aware access handling

---

📦 Resource Management

• Curated content across:

  • 6+ domains
  • 48 technologies
  • 109+ developer resources

• Save, explore, and manage learning materials efficiently

---

🤝 Community-Driven

• GitHub Issue templates integrated directly into the app
• Users can suggest new resources without modifying code

---

⚡ Performance Optimizations

• Cold-start mitigation logic to wake Render backend proactively

• Axios interceptors for:

  • Automatic JWT injection
  • Centralized error handling
  • Instant redirects on unauthorized access

---

🎨 UI / UX

• Fully responsive dark-themed UI
• Built with Tailwind CSS
• Subtle glow effects & smooth animations using AOS
• Mobile-first design approach

---

🛠️ Tech Stack

Frontend

• React 18 (Vite-powered)
• Tailwind CSS (Styling)
• React Router DOM (Navigation)
• React Hot Toast (Notifications)
• AOS (Scroll Animations)
• Axios (API Management)

---

Backend

• Node.js & Express
• MongoDB & Mongoose (Database)
• JWT (Session Management)
• Axios (Server-side API calls for OAuth verification)

---

Deployment

• Frontend: Vercel
• Backend: Render
• Database: MongoDB Atlas

---

🚀 Getting Started

Prerequisites

• Node.js installed
• MongoDB Atlas Account
• Google Cloud Console Project (for OAuth Client ID)

---

Installation

1. Clone the repository

   git clone https://github.com/TonyStark-19/DevStash.git
   cd DevStash

2. Frontend Setup

   cd frontend
   npm install
   
   # Create a .env file
   VITE_GOOGLE_CLIENT_ID=your_google_id
   VITE_API_URL=[https://your-backend-link.com/api](https://your-backend-link.com/api)
   
   npm run dev

3. Backend Setup

   cd backend
   npm install
   
   # Create a .env file
   MONGO_URI=your_mongodb_uri
   JWT_SECRET=your_secret
   GOOGLE_CLIENT_ID=your_google_id
   PORT=5000
   
   npm start

---

⭐ Support & Contributions

This project thrives on community input!

• Give it a Star ⭐: If you find this project useful.
• Contribute: Found a great tutorial? Use the "Suggest a Resource" button in the app to add it to the stash!
• Report Bugs: Open an issue if you encounter any technical glitches.

Please read the CONTRIBUTING.md before you start.

---

📜 License

This project is licensed under the MIT License. Feel free to use, modify, and share it – just give proper credit.

Check the LICENSE file for more details.

---

Made with ❤️ by Aditya chandel