React.js, Next.js | Full Stack Developer | Freelancer | React Trainer | MERN Trainer | Blogger | Freelance Writer

projects

github

youtube

devto

hashnode

medium

Yogesh Chavan  • Peerlist

A modern and responsive admin panel built for efficiently managing an e-commerce platform. It offers a centralized system to handle products, inventory, orders, customers, user profiles, complete with interactive charts for visual insights.<h3>✨ Key Features</h3>🧾 Dashboard Overview<ul><li>Total Sales, Products, Categories, and Low Inventory counters for at-a-glance metrics.</li><li>Interactive charts like:<ul><li>📈 Sales Overview</li><li>💰 Revenue Trend</li><li>🧩 Product Categories Distribution</li><li>📦 Inventory Status</li><li>🚚 Order Status</li></ul></li></ul>📦 Products Management<ul><li>View, search, and add, edit, delete products</li><li>Paginated list with the ability to add new products or edit existing ones.</li></ul>🏬 Inventory Management<ul><li>Detailed list of inventory items with:<ul><li>SKU, stock quantity, status, and location.</li></ul></li><li>Inventory status tracking with "In Stock" and "Low Stock" indicators.</li><li>Edit or delete inventory items with ease.</li></ul>📑 Orders &amp; Customers<ul><li>Centralized views to manage customer records and order details.</li><li>Monitor/Change order status through the order chart to track progress (pending → shipped).</li></ul>🙍‍♂️ Profile Management<ul><li>View and update your profile information including: Name, email, phone number, and company.</li><li>Secure password change functionality with validation:Minimum 8 characters, one uppercase, one lowercase, and a number.</li></ul>🔒 Authentication &amp; Settings<ul><li>Secure sign-in/sign-out flow.</li><li>Option to update personal and security preferences.</li><li>Dark/Light mode functionality</li><li>Setting to update per page records count for pagination</li></ul><h3>📊 Tech Stack</h3><ul><li>Frontend: React.js with Shadcn/ui and Tailwind CSS</li><li>Charts: Recharts</li><li>Database: Supabase</li></ul>

E-commerce Admin Dashboard

💻✨ Code To Image Generator ✨🖼️ Transform your code snippets into visually stunning , beautiful images with just a few clicks!🧩✨ Perfect for :🔹 Social Media Posts 📱💬 🔹 Blog Content 📝🌐 🔹 Developer Documentation 📚🛠️Whether you're a developer , blogger , or educator —this tool is crafted just for you! 👩‍💻👨‍💻🎨 Customize Your Style With :✅ Themes 🌓🌑🌓 ✅ Backgrounds (Solid, Gradient, Image) 🎨🖼️ ✅ Paddings 📏🔲 ✅ Rotation 🌀📐 ✅ Zoom In/Out Preview Effect🔍🎯 Ideal For :📌 Presentations 📌 Tutorials 📌 Sharing on Twitter, Instagram, LinkedIn, and more!🔗 Just paste your code , tweak the look, and download as a PNG in seconds! 💾✅

Code To Image Generator

👨‍🏫 I'm an Industry Trainer, 💻 Full Stack Developer, and 🧑‍🎓 Mentor with 12+ years of experience in building web applications.🚀 My passion lies in creating efficient, scalable solutions and 🤝 sharing my knowledge with others.💡 I also dedicate time to mentoring aspiring developers, 🎓 creating online courses, and ✍️ writing technical articles to help others grow in their development journey.🏢 I've worked with various companies, helping them build robust web applications, and also providing training in companies and colleges.🔗 Check out my portfolio to learn more about me! 😊

My Work

Are you tired of endless scrolling, annoying pop-ups, and ads cluttering your screen while trying to stay updated on the stock market? I hear you.That’s why I’m thrilled to introduce <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="http://IndianMarketNews.net">IndianMarketNews.net</a> , a game-changing platform designed to simplify how you consume indian market news.Whether you’re a seasoned trader, a long-term investor, or simply someone who loves staying informed about the financial world, this is the webapp you’ve been waiting for.✨ Why You’ll Love <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="http://IndianMarketNews.net">IndianMarketNews.net</a>1️⃣ Stay Updated with Trusted Sources:Get real-time access to the latest stock market news curated from trusted sources across the web — all in one place. No more hopping between websites or second-guessing credibility.2️⃣ Quarterly Results at Your Fingertips:Never miss an earnings announcement again. Stay ahead of the curve by tracking quarterly results as soon as they’re announced.3️⃣ Clean &amp; Ad-Free Reading Experience:Say goodbye to distractions. Our sleek, minimalist design ensures that you can focus solely…4️⃣ Super Fast &amp; Smooth Interface:Built with cutting-edge technology, our site loads lightning-fast and offers a seamless browsing experience — because your time matters.5️⃣ Tomorrow’s Winners Today:Want to know which stocks might surge tomorrow? Know about it a day before6️⃣ Customizable Preferences:Tailor your feed to match your interests. Choose specific new sources, so you see only the news that matters most to you.🛠️ The Tech Behind the MagicI didn’t just build another news aggregator; I created something smarter, faster, and better tailored to your needs.Here’s what powers <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="http://IndianMarketNews.net">IndianMarketNews.net</a>:⚡ Next.js: For blazing-fast performance and a responsive user interface.📦 Tanstack Query: To ensure efficient caching and smooth data fetching.🤖 Web Scraping: Brings you the freshest updates directly from top-tier financial news outlets.💡 Who Is This For?✅ Traders : Get actionable insights quickly to make timely decisions.✅ Investors : Keep tabs on company announcements and market trends effortlessly.✅ Enthusiasts : Whether you’re casually interested in finance or deeply passionate about markets, this platform has something for everyone.🚀 Ready to Transform How You Consume News?Give <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="http://IndianMarketNews.net">IndianMarketNews.net</a> a spin today.Your feedback means the world to us! If you find the platform helpful, please don’t hesitate to like, share, and spread the word.💬 Have thoughts or suggestions? Drop them in the comments — we’d love to hear from you!

Indian Market News

<h2 class="rich-heading">What's Included</h2>This application includes the following screens:<ol><li>Dashboard - To see a list of all books with filter and pagination functionality</li><li>Add Book - A way to add a new book</li><li>Students List - To see a list of all students with filter and pagination functionality</li><li>Add Student - A way to add a new student</li><li>Issue Book - A way to assign a new book to a student (a maximum of 10 books can be issued to each student)</li><li>Return Book - A way to return an already issued book from a student</li><li>Student Analytics - A way to see a list of all books assigned to students searchable by student ID</li><li>Books Chart - A bar chart showing books assigned to students that are searchable by student ID. The chart shows how many books are issued per month and the list of books issued, on click on each bar from the bar chart</li><li>Forgot password. - A way to reset the password if ever forgotten</li></ol><h2 class="rich-heading">Technologies Used</h2>For this application, we're using:<ol><li>React for building Frontend</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://supabase.com/">Supabase</a> is a database for storage and authentication - available for free</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://ui.shadcn.com/">Shadcn/ui</a> library which is the most popular and highly customizable component library that uses <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://tailwindcss.com/">Tailwind CSS</a> for styling</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://tanstack.com/query/latest">TanStack Query ( React Query )</a> - The most popular React library for implementing caching to avoid fetching data on every page visit</li></ol>As we're using React, we don't have to worry about hosting as we can host on any hosting provider like Netlify, Vercel, AWS or any of your favorite hosting providers.As we're using the <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://ui.shadcn.com/">Shadcn/ui</a> library, we can also easily customize the application to the theme or colors of our choice.

Library Management System

Ready to supercharge your web development skills? Join my exclusive MERN stack development masterclass and unlock the secrets to building MERN stack web applications! 💻This 6+ hours course is your ticket to mastering MongoDB, Express.js, React, and Node.js.Dive deep into practical insights, tips &amp; tricks, and hands-on live coding session that will elevate your development game!You will learn step-by-step way of creating a MERN stack application.In this masterclass, you will learn:✅ Basics of Node.js, Express.js, MongoDB✅ How to build Rest APIs using Express.js✅ How to perform CRUD operations✅ How to interact with the MongoDB database✅ How to fetch data from backend Node.js and display it on frontend React✅ How to create client-side protected routes✅ How to retain logged in user session✅ How to do authentication and authorization using cookie-based secure JWT tokenand much more.and then you will build a full-stack Link Sharing Application.It's a great project to add to your portfolio and get better job opporunties.By learning MERN stack development(Full Stack Development), you open doors to better job opportunities and higher salary.So don't miss this chance to invest in your future!I will be sharing knowledge of everything you need to know to make your MERN stack development journey easy.Register now and embark on a journey to become a MERN stack pro💪To join this masterclass, you should have basic knowledge of working with React with functional components.It's fine If you don't know Node.js as it will be covered in this masterclass.

MERN Stack Masterclass

<h2 class="rich-heading">A video based course where you will learn Lazy Loading, Performance Optimization, Custom Hooks, Context API and much more...</h2><ul><li>9+ hours of pre-recorded video content</li><li>Lifetime access to the course content and bonus content after enrolling into this course</li><li>Learn to build complete expense manager app from scratch using React + TypeScript</li><li>Learn to create better folder and file structure to better organize code</li><li>Learn how to use Redux Toolkit Query(RTK Query) from scratch</li><li>Learn to write better code using custom hooks</li><li>Learn correct way to use React Context API to avoid performance issues</li><li>Learn various tips &amp; tricks for better coding</li></ul>