Skip to content

README.md

Latest commit

 

History

History
230 lines (151 loc) · 6.26 KB

README.md

File metadata and controls

230 lines (151 loc) · 6.26 KB

📚 DevStash

Repo Size Stars Last Commit

React Node.js Express MongoDB Tailwind

JWT Google OAuth Secure Vercel Render

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
Home Page Resources Page
📄 Resource Detail Page ⭐ Saved Resources Page
Detail Page Saved Page
🔐 Login Page 📝 Signup Page
Login Page Signup Page

🏆 Recognition

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

DevStash - Featured on Product Hunt

💬 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