🌐 How I Built My Developer Portfolio Website: aroratech.tech

Shivam Arora — Fri, 11 Apr 2025 12:34:10 +0000

A portfolio is more than just a website — it’s your digital handshake. I built aroratech.tech to introduce myself to the world, showcase my skills, and make it easier for recruiters and collaborators to get to know me in one place.

Here’s how I approached designing and building my developer portfolio from scratch.

🧠 Why Build a Portfolio?

As a full-stack developer, I realized that a clean, functional, and elegant portfolio can:

Reflect my personality and coding style.
Show my projects, blogs, and experience in a scroll.
Act as a central hub for networking and job hunting.

🧰 Tech Stack Used

Frontend: React.js (with functional components)
Styling: CSS Modules
Framework: Bootstrap
Hosting: Netlify
Domain: aroratech.tech

📋 Portfolio Sections

🏠 Home

A brief, catchy intro with my name and what I do.
Smooth scroll-down animation to rest of the page.

👨‍💻 Projects

Cards showing my top projects.
Each card links to GitHub or a live demo.
Built with reusability in mind.

📖 Blogs

Synced with dev.to/blog links OR manually added featured posts.
If writing blogs is a passion, this is a must.

🛠 Skills

Displayed key stacks like React, Node.js, MongoDB, etc.
Icons, tags, or clean badge styles.

📞 Contact

Email ID
GitHub & LinkedIn
Direct link to resume

✨ Highlights

Mobile Responsive: Looks clean on both mobile and desktop.
Performance Optimized: Lazy loading and minimal asset sizes.
Custom Domain: aroratech.tech makes it look more professional.
Animated Transitions: Smooth user experience using subtle animations.

🧩 Code Snippet

Here’s a small snippet of how I rendered each project dynamically:

const projects = [
  { title: 'VyapaarX', desc: 'Business management system using MERN stack', link: '#' },
  { title: 'Portfolio Site', desc: 'This very website!', link: 'https://aroratech.tech' }
];

projects.map((project) => (
  <div className="project-card">
    <h3>{project.title}</h3>
    <p>{project.desc}</p>
    <a href={project.link}>Live Demo</a>
  </div>
));

🎯 Learnings

Importance of minimal, clean design.
Deploying and managing a custom domain.
Optimization techniques like image compression, code splitting.
Google Lighthouse audit and improving SEO scores.

🔮 What’s Next?

Add dark mode toggle.
Set up a CMS for easy blog posting.
Add testimonials or project case studies.

💬 Final Thoughts

Building aroratech.tech helped me see my growth over the years — from hobby projects to professional work. It's also a living project — something I keep refining and improving as I grow.

Do check it out and drop your feedback on LinkedIn or GitHub. Thanks for reading!

How I Built VyapaarX: A Business Management System Using the MERN Stack with WhatsApp Billing

Shivam Arora — Fri, 11 Apr 2025 12:20:56 +0000

Managing a business, especially for small and medium-sized retailers, is more than just making sales—it's about tracking inventory, managing customers, monitoring expenses, and keeping the team informed in real-time. That’s why I built VyapaarX — a full-stack Business Management System tailored for retail businesses to operate more efficiently and data-driven.

In this post, I’ll walk you through what VyapaarX does, how I built it using the MERN Stack, and how I integrated automated WhatsApp messaging for billing and customer communication.

Motivation

Retailers often rely on traditional registers or spreadsheets for tracking their business, which limits insights and scalability. I wanted to build something that:

Centralizes all business data.
Provides a real-time dashboard for sales & expenses.
Automates communication (e.g., invoice messages).
Makes the system scalable, modern, and user-friendly.

Tech Stack

VyapaarX is built on the MERN Stack:

MongoDB – NoSQL database to store sales, inventory, customers, and product data.
Express.js – Backend framework handling REST APIs.
React.js – Frontend for the dynamic dashboard and forms.
Node.js – Runtime for backend services.
WhatsApp API (Twilio or Chat API) – For sending billing messages directly to customers.

Key Features of VyapaarX

Dashboard with Graphical Insights
Bar and pie charts showing monthly sales, profit/loss, and expense trends.
Quick metrics (Total Sales, Expenses, Inventory Value).
Inventory & Product Management
Add/update/delete products with fields like SKU, price, quantity.
Real-time inventory tracking.
Billing System with WhatsApp Integration
Generate invoices.
Automatically send bills or payment confirmations to customers via WhatsApp.
Customer Management
Create customer profiles with contact info and transaction history.
Sales & Expense Tracking
Log each sale and expense with category, date, and notes.
Filter by date range, type, or customer.

MongoDB Schema Overview

// Product Schema
{
name: String,
category: String,
price: Number,
quantity: Number,
createdAt: Date
}

// Customer Schema
{
name: String,
phone: String,
email: String,
totalSpent: Number
}

// Sale Schema
{
customerId: ObjectId,
items: [{ productId, quantity }],
totalAmount: Number,
date: Date
}
`

WhatsApp Billing Integration

I used an external WhatsApp API (like Twilio or Chat-API) to send billing messages. Once a sale is completed, the backend triggers a message like:

"Hi [Customer Name], thanks for your purchase. Your invoice amount is ₹[total]."

const sendWhatsAppMessage = async (phone, message) => { await axios.post('https://api.chat-api.com/sendMessage', { phone: phone, body: message }); };

Challenges Faced

Asynchronous data updates: Ensuring stock updates properly when sales are made.
WhatsApp API limits: Managing message frequency and formatting.
Security: Implemented JWT authentication and role-based access for staff/admin.

Learnings & Takeaways

Mastered the flow of data in a full-stack application.
Understood the business requirements and translated them into tech specs.
Explored 3rd-party APIs and integration handling.
Learned how to write modular code and reusable components in React.

What’s Next?

Add PDF invoice generation and download.
Role-specific dashboards (Admin vs Cashier).
Cloud deployment and CI/CD pipelines.

Final Thoughts

Building VyapaarX wasn’t just about coding—it was about solving a real-world problem through tech. It taught me the power of building tools that make daily operations easier for businesses, especially the underserved retail sector. I’m excited to keep improving it and maybe even open-source it someday.

Want to see the demo or collaborate?
Demo Version: VyapaarX
LinkedIn: LinkedIn
GitHub: GitHub

DEV Community: Shivam Arora