A modern, full-stack web application built with cutting-edge technologies for seamless product management and secure authentication.
Threadora is a production-ready full-stack application demonstrating professional software engineering practices, including:
- Secure Authentication with JWT and Google OAuth integration
- RESTful API with comprehensive validation and error handling
- Modern Frontend with responsive UI and state management
- MongoDB integration with Mongoose ORM
- Cloud Image Storage using ImageKit
- Professional Code Architecture with middleware pattern and service layer
Node.js + Express 5.2.1
├── Authentication
│ ├── JWT (jsonwebtoken)
│ ├── Passport.js with Google OAuth 2.0
│ └── Password hashing (bcryptjs)
├── Database
│ └── MongoDB + Mongoose 9.6.3
├── File Management
│ ├── Multer for uploads
│ └── ImageKit for cloud storage
├── Validation & Security
│ ├── express-validator
│ ├── CORS enabled
│ └── Cookie Parser
└── Logging
└── Morgan HTTP logger
React 19.0 + Vite
├── State Management
│ └── Redux Toolkit
├── Routing
│ └── React Router v7
├── Styling
│ └── Tailwind CSS v4
├── HTTP Client
│ └── Axios
└── UI/UX
├── React Toastify (notifications)
└── Responsive Design
Threadora/
├── Backend/
│ ├── src/
│ │ ├── app.js # Express app configuration
│ │ ├── config/ # Database & environment config
│ │ ├── controllers/ # Business logic handlers
│ │ ├── middlewares/ # Auth, validation, error handling
│ │ ├── models/ # MongoDB schemas (User, Product)
│ │ ├── routes/ # API endpoints
│ │ ├── services/ # Business logic services
│ │ ├── validators/ # Request validation rules
│ │ └── utils/ # Async handler utilities
│ ├── server.js # Entry point
│ └── package.json # Dependencies
│
└── Frontend/
├── src/
│ ├── app/ # App configuration
│ │ ├── App.jsx # Root component
│ │ ├── app.routes.jsx # Route definitions
│ │ └── app.store.js # Redux store
│ └── features/ # Feature modules
│ ├── auth/ # Authentication feature
│ │ ├── components/ # Login, Signup, Protected routes
│ │ ├── hooks/ # useAuth hook
│ │ ├── pages/ # Auth pages
│ │ ├── services/ # Auth API calls
│ │ └── states/ # Redux slices
│ └── shared/ # Shared components
└── vite.config.js # Build configuration
- ✅ JWT-based authentication
- ✅ Google OAuth 2.0 integration
- ✅ Secure password hashing with bcryptjs
- ✅ Protected routes with middleware
- ✅ Cookie-based session management
- ✅ CRUD operations for products
- ✅ Image upload with cloud storage
- ✅ Comprehensive input validation
- ✅ Error handling and logging
- ✅ Separation of concerns (Controllers, Services, Models)
- ✅ Middleware pattern for request processing
- ✅ Global error handling
- ✅ Request validation layer
- ✅ Async/await error wrapper utilities
- ✅ Modern React with Hooks
- ✅ Redux state management
- ✅ Client-side routing
- ✅ Responsive Tailwind CSS design
- ✅ Toast notifications for user feedback
- ✅ Protected routes and role-based access
- Node.js (v16 or higher)
- MongoDB local instance or MongoDB Atlas connection
- Google OAuth credentials
cd Backend
npm install
# Create .env file with:
# PORT=5000
# MONGODB_URI=your_mongodb_uri
# JWT_SECRET=your_secret_key
# GOOGLE_CLIENT_ID=your_client_id
# GOOGLE_CLIENT_SECRET=your_client_secret
# IMAGEKIT_PUBLIC_KEY=your_imagekit_key
# IMAGEKIT_PRIVATE_KEY=your_private_key
# IMAGEKIT_URL_ENDPOINT=your_url_endpoint
# Development
npm run dev
# Production
npm run startcd Frontend
npm install
npm run devVisit http://localhost:5173 (or your configured Vite port)
POST /api/auth/signup- User registrationPOST /api/auth/login- User loginPOST /api/auth/logout- User logoutGET /api/auth/google- Google OAuth
GET /api/products- Get all productsPOST /api/products- Create product (authenticated)GET /api/products/:id- Get product by IDPUT /api/products/:id- Update product (authenticated)DELETE /api/products/:id- Delete product (authenticated)
- JWT Authentication - Stateless, secure token-based auth
- CORS Protection - Configured for trusted origins
- Request Validation - express-validator middleware
- Password Security - Bcryptjs hashing with salt rounds
- Error Handling - No sensitive information leakage
- HTTP Only Cookies - Secure cookie configuration
- Environment Variables - Sensitive data protection
- Express 5.2.1 - Latest web framework
- Mongoose 9.6.3 - ODM for MongoDB
- Passport.js - Authentication middleware
- express-validator - Request validation
- bcryptjs - Secure password hashing
- ImageKit - Cloud image management
- React 19.0 - Latest React version
- Redux Toolkit - State management
- React Router v7 - Client-side routing
- Tailwind CSS v4 - Utility-first CSS
- Axios - Promise-based HTTP client
- Vite - Next-gen build tool
This project demonstrates:
- ✅ Clean code architecture with separation of concerns
- ✅ Middleware pattern for cross-cutting concerns
- ✅ Service layer for business logic
- ✅ Comprehensive error handling
- ✅ Input validation and sanitization
- ✅ RESTful API design principles
- ✅ Component-based UI architecture
- ✅ State management with Redux
- ✅ Environment-based configuration
- ✅ Responsive design patterns
- Backend Documentation (if available)
- Frontend Documentation (if available)
- Design System
npm run dev # Start development server with hot reload
npm run start # Start production servernpm run dev # Start Vite development server
npm run build # Build for production
npm run lint # Run ESLint
npm run preview # Preview production buildFeel free to fork this repository and submit pull requests to help improve Threadora.
This project is licensed under the ISC License - see LICENSE file for details.
Threadora is built with a focus on modern development practices, scalability, and maintainability. It serves as a comprehensive example of full-stack JavaScript development with industry best practices.
Created with ❤️ using Node.js, React, and MongoDB