---

Rendera 🚀

Rendera is an AI-powered image generation SaaS app developed as part of showcasing my skills in full-stack development. It allows users to generate stunning images using advanced AI technology, all within a simple and minimalistic design. The project demonstrates my proficiency in both frontend and backend development, including user authentication, payment integration, and real-time data handling.

---

🛠️ Tech Stack

• Frontend:

  • React.js 🖥️ – A powerful library for building dynamic user interfaces.
  • Vite ⚡ – A modern build tool that significantly improves the development experience with fast hot-reloading and optimized build times.
  • Tailwind CSS 🌿 – A utility-first CSS framework to create responsive and customizable designs without writing custom CSS.
  • React Router DOM 🔄 – For handling dynamic routing in the frontend app.
  • Axios 📡 – For making HTTP requests to the backend API.
  • React Toastify 🥳 – To show success or error notifications in a simple and elegant way.

• Backend:

  • Node.js 🌍 – A powerful runtime for building server-side applications in JavaScript.
  • Express.js 🚀 – A minimal and flexible Node.js web application framework to build APIs quickly.
  • MongoDB 🗄️ – A NoSQL database for storing user data and images, offering flexibility and scalability.
  • Razorpay 💳 – Payment gateway for managing transactions and buying credits in the app.
  • JSON Web Token (JWT) 🔐 – For secure user authentication.
  • Bcrypt 🔑 – For encrypting user passwords before storing them.
  • CORS 🌐 – For enabling cross-origin requests between the frontend and backend.

---

💡 Features

• User Authentication:

  • User login, logout, and registration with secure password encryption.

• Responsive Design:

  • Clean, minimalistic, and fully responsive UI, ensuring a seamless experience across devices.

• AI Image Generation:

  • Users can generate unique images using AI technology integrated into the app.

• Payment Integration:

  • Secure payment functionality for buying credits, powered by Razorpay.

---

🚀 Setup

1. Clone the Repository

git clone https://github.com/adithyandileep/Rendera.git

2. Install Dependencies

For both Frontend & Backend:

• Navigate to the respective directories:

  • Frontend: cd Client
  • Backend: cd Server

• Install dependencies by running:

npm install

3. Environment Variables

Create .env files in both the Client and Server directories.

• Client (.env):
  Add the following environment variables in the client/.env file:

  VITE_BACKEND_URL='http://localhost:4000'
  RAZORPAY_KEY_ID='your-razorpay-key-id'
  

• Server (.env):
  Add the following environment variables in the server/.env file:

  MONGODB_URI='your-mongodb-connection-string'
  JWT_SECRET='your-jwt-secret'
  CLIPDROP_API='your-clipdrop-api-key'
  RAZORPAY_KEY_ID='your-razorpay-key-id'
  RAZORPAY_KEY_SECRET='your-razorpay-secret-key'
  CURRENCY='INR'
  

4. Run the Project

• Frontend (Client):

  npm run dev

• Backend (Server):

  npm run server

---

🏗️ Project Structure

Frontend (Client)

The client/ directory contains the source code and assets for the React.js frontend application.

Client/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── pages/
│   ├── App.jsx
│   ├── Index.css
│   ├── main.jsx
├── .env
├── .gitignore
├── package-lock.json
├── package.json
└── ...

---

Backend (Server)

The server/ directory holds the backend application, which is responsible for the logic of handling requests, authentication, and interactions with the database.

Server/
├── config/
│   ├── mongodb.js
├── controllers/    
│   ├── imageController.js 
│   ├── userController.js
├── middlewares/
│   ├── auth.js
├── models/
│   ├── transactionModel.js 
│   ├── userModel.js  
├── routes/          
│   ├── imageRoutes.js  
│   ├── userRoutes.js   
├── .env             
├── server.js       
├── package-lock.json 
├── package.json      
└── node_modules

---

🎨 Screenshots

---

🏗️ Future Enhancements

• User Profiles: Allow users to create and manage personal profiles with saved images.
• Image Gallery: Create a gallery where users can view their previously generated images.
• Advanced AI Features: Integrate additional image manipulation tools powered by AI.

---

🧑‍💻 Author

This project was developed by Adithyan Dileep.
You can connect with me on LinkedIn => Adithyan Dileep.

---

📜 License

This project is licensed under the MIT License – see the LICENSE file for details.

---