Forem: Ravindra Kumar

AI Content Assistant with Role-Based Access Control (RBAC)

Ravindra Kumar — Mon, 05 May 2025 09:10:34 +0000

This is my submission for the [https://Permit.io Dev Challenge]
#permitio #devchallenge #rbac #javascript #webdev #ai

🔍 What I Built

An AI-powered content assistant where:

Users submit content for AI summarization.
Admins can review, approve, reject, and publish summaries.
RBAC is handled using Permit.io to ensure only authorized actions.

💡 AI Summary is mocked due to API limits, but the RBAC and flows are fully functional!

🎯 The Problem It Solves

AI-generated content is powerful, but publishing it without review can lead to misinformation.

This tool helps solve that by ensuring:

Users can use AI to generate drafts.
Only approved roles (admins) can publish or approve that content.

🌟 Demo

🔗 Live App: [https://ai-content-review-fjt8.vercel.app/)

📁 GitHub Repo: https://github.com/Ravi-Coding/ai-content-review

🛠️ How I Built It

Frontend: React (Vite) + TypeScript + Tailwind CSS
Backend: Express.js + Node.js
Authorization: @permit.io/sdk
Hosting: Vercel (Frontend), Render (Backend)
AI Summary: Mocked for now (can be extended using OpenAI)

🔐 RBAC with Permit.io

Using permit.check(user, action, resource) to validate access.


ts
const allowed = await permit.check(user, "summarize", "content");
if (!allowed) {
  return res.status(403).json({ error: "Access Denied" });
}

## 🔐 Roles Defined

- **user**: Can submit content  
- **admin**: Can approve, delete, and publish  

---

## 🖥️ Dashboards Included

### User Dashboard:
- Submit content  
- View status  

### Admin Dashboard:
- View all submissions  
- Approve / Delete / Publish  

---

## 💡 Lessons & Challenges

- 🔄 Mocked AI summaries to simulate production AI logic  
- 🛡️ Implemented clean role-based permissions using Permit.io’s policy UI  
- ⚠️ Error handling and fallback logic to ensure seamless UX  

---

## 🙌 Special Thanks

Huge thanks to **Permit.io** for this opportunity and their powerful SDK + Policy Studio!

---

## 📌 Final Thoughts

Permit.io made it **incredibly easy** to manage permissions without hardcoding logic.  
This challenge helped me understand how secure AI tools can be built in real-world production.

Feel free to try it out and give feedback 🙏

Multilingual AI Blog Generator | Hugging Face + Pulumi + S3 Static Hosting

Ravindra Kumar — Mon, 07 Apr 2025 00:20:02 +0000

🌍 Multilingual AI Blog Generator — Pulumi Challenge Submission 🚀

This is a submission for the Pulumi Deploy and Document Challenge: Fast Static Website Deployment

🛠️ What I Built

I created a Multilingual AI Blog Generator, a full-stack web app that uses Hugging Face models to generate blogs and translate them into multiple languages — promoting inclusive and accessible content creation.

To meet the static deployment requirement of the Pulumi challenge, I built a visually engaging static landing page, deployed using Pulumi + AWS S3. This static page serves as the gateway to the full AI app hosted on Vercel.

🌐 Live Demo

🔗 Static Landing Page (Pulumi + AWS S3):

https://blog-static-bucket-4d15c3f.s3-website.ap-south-1.amazonaws.com

🚀 Full AI App (Next.js + Hugging Face + Tailwind):

https://multilingual-ai-blog.vercel.app

🌟 The static page loads instantly, and links you to the dynamic multilingual blog generator powered by AI.

📦 Project Repo

🔗 GitHub Repository:

https://github.com/Ravi-Coding/multilingual-ai-blog

🌱 My Journey

This challenge allowed me to blend AI, frontend design, and DevOps deployment. Key highlights:

✅ Designed a clean and responsive UI with Next.js + Tailwind CSS
✅ Used Hugging Face Transformers for multilingual blog generation
✅ Built a static landing page for instant S3 loading using Pulumi
✅ Solved real-world IAM permission and bucket policy issues
✅ Balanced static + dynamic site architecture for scalability

💬 It was exciting to see the synergy between DevOps automation and AI application delivery — truly a full-stack experience!

⚙️ Using Pulumi

Pulumi helped me:

🚀 Provision an S3 bucket for static hosting
📂 Upload files (index.html, images, favicon) automatically
🔐 Setup a BucketPolicy to enable public access
🤖 Use Pulumi Copilot in VS Code to:
- Generate policy snippets
- Fix permission errors
- Speed up IAC development

🧠 Pulumi made it seamless to deploy infrastructure with real code. I didn’t just click buttons — I engineered the cloud!

🙌 Thank You

This challenge was fun, challenging, and helped me grow. Grateful to Dev.to + Pulumi for the opportunity! 💙

Let’s build more together 🚀

How to Build Your First Full-Stack MERN App: A Beginner’s Guide

Ravindra Kumar — Sat, 25 Jan 2025 11:00:39 +0000

Content:
Introduction:

↪ If you're new to full-stack development, the MERN stack is one of the best ways to dive in. MERN stands for MongoDB, Express.js, React.js, and Node.js—a powerful stack for building modern web apps.

In this guide, we’ll create a simple MERN app step-by-step. Whether you’re a beginner or just looking to sharpen your skills, you’ll learn the fundamentals of building a full-stack application.

Step 1: Setting Up Your Development Environment
Before diving into the code, make sure you have the following installed:

1.Node.js and npm: Download Here
2.MongoDB: Install Locally or Use MongoDB Atlas
3.Code Editor: VS Code is recommended (Download Here)

Step 2: Initializing Your MERN Project
Backend Setup:
1.Create a new folder:

mkdir mern-app
cd mern-app

2. Initialize a Node.js project:

npm init -y

3.Install Express and Mongoose:

npm install express mongoose cors

4.Create a basic server in server.js:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));

Frontend Setup:
1.Navigate to your project folder and create a React app:

npx create-react-app client

2.Start the React app

cd client
npm start

Step 3: Building the MERN App
Connect Frontend and Backend:
↦ Set up a simple API in your backend to fetch and post data.
↦ Use Axios in React to call your backend API.
Example Axios Call in React:

import axios from 'axios';

const fetchData = async () => {
  const response = await axios.get('http://localhost:5000/api/data');
  console.log(response.data);
};

Step 4: Deploy Your MERN App
↦ Host your frontend on Visit Vercel.
↦ Host your backend on Host on Render or any platform of your choice.
↦ Use MongoDB Atlas for the database.

Conclusion
Congratulations! 🎉 You’ve just built your first full-stack MERN app. With the basics in place, you can now explore more features like authentication, state management, and advanced deployment techniques.

Got questions or feedback? Drop a comment below or share your experience with building a MERN app!

Why does my React useEffect hook run multiple times even with an empty dependency array?

Ravindra Kumar — Sun, 08 Dec 2024 07:55:08 +0000

The Question
While working on a React project, I encountered an issue with the useEffect hook. My goal was to fetch data from an API only once when the component mounts. However, the useEffect kept running multiple times, even though I provided an empty dependency array.

Here’s the code snippet:

import React, { useEffect, useState } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    console.log("Fetching data...");
    axios.get("https://jsonplaceholder.typicode.com/posts")
      .then(response => setData(response.data))
      .catch(error => console.error(error));
  }, []);
  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default MyComponent;

Despite the empty dependency array ([]), the useEffect was executed multiple times. I tried restarting the development server, but the issue persisted. After some research and troubleshooting, I identified the root cause and resolved it.
The Answer

Why This Happens

Strict Mode in Development:

If your app is running in React's development mode with StrictMode enabled, React intentionally mounts and unmounts components multiple times. This is a development-only behavior meant to detect side effects that may cause issues.

Re-renders or Hot Module Replacement (HMR):

During development, changes in the code may trigger Hot Module Replacement, causing the component to re-render and useEffect to execute again.

How to Fix or Handle This Behavior

Identify Strict Mode:

If you're using StrictMode, understand that this behavior happens only in development and won’t affect the production build. You can temporarily disable it by removing

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

However,it’s better to leave it enabled and adapt your code to handle potential side effects gracefully.

Prevent Duplicate API Calls:

Use a flag to ensure that the API call happens only once during the component’s lifecycle, even

import React, { useEffect, useState, useRef } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState([]);
  const isFetched = useRef(false);

  useEffect(() => {
    if (isFetched.current) return;

    console.log("Fetching data...");
    axios.get("https://api.example.com/data")
      .then(response => setData(response.data))
      .catch(error => console.error(error));

    isFetched.current = true;
  }, []);

  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default MyComponent;

Using a useRef ensures that the API call happens only once, regardless of the additional renders caused by StrictMode.

Key Takeaways
. React’s Strict Mode in development is intentional and safe to leave on.
. Production builds won’t have this issue. . Use useRef or other techniques to manage side effects when necessary.
Use useRef or other techniques to manage side effects when necessary.
Production builds won’t have this issue.
Use useRef or other techniques to manage side effects when necessary.

How to Master the MERN Stack: A Guide for Full-Stack Developers

Ravindra Kumar — Mon, 09 Sep 2024 19:21:54 +0000

The MERN stack (MongoDB, Express.js, React.js, Node.js) has become one of the most popular technologies for full-stack web development. As a developer, learning the MERN stack can open up a world of opportunities and set you on the path to building powerful, dynamic web applications. Here's how you can master the MERN stack and take your full-stack development skills to the next level.

Understanding the Core Components of the MERN Stack Before jumping into code, it’s essential to understand what each component of the MERN stack does:

MongoDB: A NoSQL database that stores data in JSON-like documents. It’s highly flexible and scalable, making it a popular choice for modern applications.
Express.js: A lightweight framework for building web applications in Node.js. It provides a simple interface for creating routes, handling requests, and building APIs.
React.js: A JavaScript library for building user interfaces. React allows you to create dynamic, component-based UIs that can handle large amounts of data efficiently.
Node.js: A JavaScript runtime that allows you to run JavaScript on the server-side. It’s fast, efficient, and perfect for building scalable web applications.
To master the MERN stack, you need to develop a deep understanding of how these technologies work together.

Start with the Backend (Node.js and Express) Begin by setting up your Node.js server. Start simple—create a basic API using Express.js to handle routes and requests. Focus on building RESTful APIs that can communicate with a database.

Learn how to create GET, POST, PUT, and DELETE routes.
Connect your server to MongoDB using Mongoose.
Understand error handling, middleware, and authentication (using JWT or OAuth).
By mastering the backend, you will gain a solid understanding of how the data flows between the client and the server.

Build Dynamic UIs with React.js Once you’re comfortable with the backend, move on to the frontend. Learn React.js to create dynamic and responsive user interfaces.

Understand the basics of components, props, and state.
Practice using hooks like useState, useEffect, and useContext for managing state and side effects.
Learn how to consume your backend APIs using fetch or Axios.
React is at the core of the frontend development in the MERN stack, so take your time to understand component-based architecture and how it can help you build scalable applications.

Connecting the Dots: Full-Stack Integration Now that you have a good grasp of the frontend and backend, it’s time to integrate them. Focus on building full-stack applications where your React frontend interacts with the Express backend.

Implement CRUD functionality across your stack (e.g., create a simple task manager).
Learn about state management libraries like Redux for handling complex states.
Deploy your full-stack application using Heroku or Netlify.
Understanding how the client and server communicate will enhance your ability to build feature-rich applications.

Tips for MERN Stack Beginners Practice Regularly: The more you practice, the better you’ll get. Start small and build simple projects, gradually increasing complexity. Work on Real Projects: Apply what you’ve learned by building projects like a blog, e-commerce store, or task manager. Working on real projects will give you hands-on experience and a deeper understanding of how the stack works. Learn Version Control: Using Git and GitHub will help you manage your projects and collaborate with other developers. Stay Updated: The world of JavaScript is always evolving. Follow industry trends, and keep an eye on updates to React, Node, and MongoDB.
Challenges You May Face Asynchronous Programming: Dealing with asynchronous code (using promises, async/await) can be tricky for beginners. Practice and learn how to handle async operations effectively. State Management: Managing state in React can become complex as your application grows. Learn tools like Redux or the Context API for handling larger state structures. Scaling Applications: As your app grows, performance and scalability become crucial. Learn about database indexing, caching, and optimizing your backend for performance. Conclusion Mastering the MERN stack is not just about learning each individual component—it's about understanding how they fit together to build scalable, performant web applications. Take your time, experiment, and don't be afraid to tackle real-world projects. The journey may seem challenging, but the rewards are well worth it.

If you have any questions or need further guidance, feel free to drop a comment. Happy coding!

🚀 Excited to Share My Journey as a Full-Stack Developer!

Ravindra Kumar — Thu, 05 Sep 2024 09:13:23 +0000

Hello Dev.to community! 👋 I’m Ravindra, a passionate Full-Stack Developer with expertise in MERN (MongoDB, Express, React, Node.js) and Django. I’ve been diving deep into web development, building dynamic applications, and designing efficient APIs.

Right now, I’m on an exciting new path exploring AWS and cloud technologies. 🌩️ From EC2 instances to S3 storage, I’m eager to expand my skills and integrate cloud solutions into my projects.

In this space, I’ll be sharing insights on MERN and Django development, tutorials, and my journey with AWS. Stay tuned for posts on building scalable apps, deploying projects, and optimizing tech stacks!

Looking forward to connecting with fellow developers, learning from each other, and collaborating on awesome projects. Feel free to reach out or share your thoughts and tips!

Happy coding! 🚀