RIVETO

---

---

🚀 Overview

RIVETO is a modern, fullstack web application built for scalability, advanced analytics, and seamless payment integration.
It features a robust admin panel for management, user tracking, advanced UI components, and secure file/image upload via Cloudinary.

---

🛠️ Tech Stack

• Frontend: React, Tailwind CSS
• Backend: Node.js, Express.js
• Database: MongoDB (Mongoose ODM)
• Payments: Razorpay Integration
• Tracking: Custom analytics & event tracking
• UI: Advanced, responsive design with Tailwind
• Image Uploads: Cloudinary for secure and performant media management

---

🏗️ Architecture

graph TD
    A[User] -->|HTTP| B[React App]
    B -->|REST API| C[Express.js Server]
    C -->|ODM| D[(MongoDB Database)]
    C -->|API| E[Razorpay]
    C -->|API| H[Cloudinary]
    B & C --> F[Admin Panel]
    B --> G[Tracking & Analytics]

Loading

---

⚙️ Features

• 📊 Admin Panel: Manage users, payments, analytics, and more
• 💳 Razorpay Integration: Seamless and secure payment workflow
• 📈 Advanced Tracking: User behavior, transactions, and event analytics
• 🎨 Modern UI: Responsive, accessible, and beautiful interface (Tailwind)
• 🖼️ Cloudinary Image Upload: Fast, secure, and optimized media storage
• 🔐 Authentication & Authorization: Secure user and admin access
• 📝 RESTful API: Powerful backend for frontend and mobile clients

---

🚦 Quick Start

1. Clone the repository

git clone https://github.com/Nsanjayboruds/RIVETO.git
cd RIVETO

2. Set up the environment

• Copy and edit environment files:
  • For backend:

    cp backend/.env.example backend/.env

  • For frontend:

    cp frontend/.env.example frontend/.env

• Fill in your MongoDB, Razorpay keys, Cloudinary credentials, JWT secrets, etc.

3. Install dependencies

# In root
cd backend
npm install

cd ../frontend
npm install

4. Start development servers

# Backend (Node.js/Express)
cd backend
npm run dev

# Frontend (React)
cd ../frontend
npm start

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

---

🖼️ Image Upload with Cloudinary

Backend Integration

• Uses the cloudinary npm package.
• Secure image upload endpoints with authentication/middleware.
• Stores Cloudinary URLs in MongoDB model fields.

Sample Endpoint (Express.js):

// /backend/routes/upload.js
const { CloudinaryStorage } = require('multer-storage-cloudinary');
const multer = require('multer');
const cloudinary = require('cloudinary').v2;

// Cloudinary config (use your .env)
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key:    process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

const storage = new CloudinaryStorage({
  cloudinary,
  params: {
    folder: 'riveto_uploads',
    allowed_formats: ['jpg', 'png', 'jpeg', 'svg', 'webp'],
  },
});
const upload = multer({ storage });

router.post('/upload', upload.single('image'), (req, res) => {
  res.json({ url: req.file.path });
});

Frontend Integration

• Use a file input and upload images using a form or fetch/Axios to the backend /upload endpoint.
• Store the returned Cloudinary URL for use in UI or database.

Sample Usage:

const handleUpload = async (event) => {
  const formData = new FormData();
  formData.append('image', event.target.files[0]);
  const response = await fetch('/api/upload', { method: 'POST', body: formData });
  const data = await response.json();
  setImageUrl(data.url); // Save/display Cloudinary URL
};

---

🧪 Testing

# Backend
cd backend
npm test

# Frontend
cd ../frontend
npm test

---

📂 Project Structure

RIVETO/
├── backend/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── middleware/
│   ├── services/
│   ├── .env.example
│   └── ...
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── hooks/
│   │   ├── utils/
│   │   └── App.jsx
│   ├── public/
│   ├── .env.example
│   └── ...
├── README.md
└── ...

---

🛡️ Environment Configuration

Backend (backend/.env.example)

MONGODB_URI=
JWT_SECRET=
RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=
BASE_URL=http://localhost:5000

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

Frontend (frontend/.env.example)

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_RAZORPAY_KEY=

---

🎨 UI/UX

• Fully responsive admin panel
• Advanced dashboard with analytics charts
• Dark/light mode with Tailwind CSS
• Custom components for user and payment management

---

💳 Payments

• Razorpay checkout integrated for secure payments
• Payment status tracking and webhooks

---

📈 Tracking

• Custom event logging and analytics
• Admin dashboard for real-time tracking

---

📝 Contribution Guidelines

1. Fork the project
2. Create your feature branch (git checkout -b feature/YourFeature)
3. Commit your changes (git commit -m 'Add feature')
4. Push to the branch (git push origin feature/YourFeature)
5. Open a Pull Request

Please review CONTRIBUTING.md for details.

---

🚀 Deployment

• Docker Compose and cloud deployment instructions coming soon!
• Easily deploy to Vercel (frontend) and Render or Heroku (backend).

---

📝 License

MIT License. See LICENSE for details.

---

🙋‍♂️ Contact

• Nishant Sanjay Borude – @Nsanjayboruds

---

Built with React, Tailwind, Node.js, Express, MongoDB, Razorpay, and Cloudinary