SumeetsCampusCart: Full-Stack Marketplace App Built with MERN Stack

🚀 I just built and deployed a full-stack e-commerce app from scratch — and I'm honestly proud of what I learned. Meet **ElectroMart** — a fully functional electronics store with real authentication, image uploads, an admin panel, and a live deployment. 🔗 Live: https://lnkd.in/gY_NvdsB Here's everything I built: **The Stack:** ⚛️ React 18 + Vite + Tailwind CSS + shadcn/ui 🟢 Node.js + Express REST API 🍃 MongoDB Atlas + Mongoose 🔐 Clerk Authentication 🖼️ Cloudflare R2 image storage 🚀 Deployed on Vercel + Render **The Features:** ✅ Product catalog with categories and filters ✅ Shopping cart with Context + useReducer ✅ User authentication (email + Google OAuth) ✅ Protected routes — checkout requires sign in ✅ Admin panel to add, edit and delete products ✅ Real image uploads to Cloudflare R2 ✅ Full checkout flow ✅ CI/CD with GitHub Actions ✅ Jira for project management with GitFlow **The Biggest Lessons:** 2️⃣ **Authentication is hard to build, easy to use** — Clerk saved me weeks of work. JWT, bcrypt, sessions — all handled. I just imported components. 3️⃣ **Middleware chaining** — Express middleware runs in order. Getting Multer to process files BEFORE auth middleware was a real debugging lesson. 4️⃣ **Environment variables matter** — The difference between `localhost` and production broke my app in 3 different ways. Lesson learned: never hardcode URLs. 5️⃣ **CORS is always the last problem** — Every time you deploy something new, CORS will remind you it exists 😂 **What's Next:** I'm adding Stripe payments next. Then product reviews, order history, and email notifications. If you're learning web development — build projects. Not tutorials. Real projects with real problems. That's where the actual learning happens. GitHub: https://lnkd.in/gvYC2ZE6 #WebDevelopment #React #NodeJS #MongoDB #JavaScript #FullStack #OpenToWork #100DaysOfCode #Programming #SoftwareEngineering

🚀 Most developers skip this… I finally didn’t 👇 🖥️ My E-Commerce Project with CI/CD using GitHub Actions! Today I implemented a CI/CD pipeline for my full-stack e-commerce app (monorepo) — and this feels like a big step towards becoming production-ready 🔥 📦 Tech Stack I’m using: 🖥️ Frontend: React 18 Bootstrap 5 Framer Motion Redux Toolkit Axios React Router ⚙️ Backend: Node.js Express.js MongoDB (Mongoose) JWT Auth Bcrypt ⚡ What I implemented: ✅ Monorepo-based CI/CD pipeline ✅ Separate jobs for frontend & backend ✅ Auto build on every push to main ✅ Smart workflow structure using GitHub Actions 💡 Now every time I push code: Frontend builds automatically 🎯 Backend gets validated 🛠️ Errors get caught early 🚨 🧠 Key Learning: Even in a monorepo, it's better to: 👉 Use one workflow 👉 Create separate jobs per service 👉 Use working-directory for clean structure 📸 Sharing my first successful workflow run 👇 (Feels amazing seeing that green tick 😄) 🔥 Next Steps: Dockerizing full app 🐳 Adding Kafka for event-driven architecture ⚡ Auto deployment (Vercel + Render / AWS) 🚀 If you're building projects and NOT using CI/CD yet… 👉 you're missing real-world engineering practices. Let’s build like engineers, not just coders 💯 #GitHubActions #DevOps #MERN #FullStackDevelopment #ReactJS #NodeJS #MongoDB #CI_CD #OpenToWork #100DaysOfCode

Connecting the Frontend to the Backend The "MERN" stack is no longer just four separate technologies in my notes—it’s now a living, breathing application. Today, I successfully bridged the gap between my React UI and my Node.js/Express Server. Key Milestones: The Full-Stack Handshake: Using Axios/Fetch, I’m now making live API calls. Data typed into a React form is traveling through an Express route and landing safely in MongoDB Atlas. Persistence Achieved: No more losing data on page refresh. By connecting the frontend to the database, my Notes app now has a "long-term memory." CORS Mastery: Learned the critical importance of Cross-Origin Resource Sharing. Configuring the backend to safely communicate with the frontend was a masterclass in web security. Asynchronous UX: Implemented logic to handle the "wait" between the browser and the cloud, ensuring a smooth user experience even when the database is thinking. There is a unique satisfaction in seeing a "Success" message in the browser console and knowing your data just traveled across the stack. Next Step: Final bug testing and moving from localhost to a live production environment. @Mentor ~ Ankur Prajapat #MERNStack #FullStackDeveloper #ReactJS #NodeJS #MongoDB #100DaysOfCode #WebDevelopment #SoftwareEngineering

Day 28 of my backend journey. Today I did something that made everything feel real. I integrated my frontend and backend into one complete working application. Here is how I structured the project: Backend: — config: database and Redis connection — controllers: all business logic — middleware: authentication and token handling — models: mongoose schemas — routes: all API endpoints Frontend: — features/auth: components, hooks, pages, services and styles all in one place — shared: reusable code across features — services: all API calls to the backend Keeping the frontend and backend completely separate from day one made integration much cleaner. No messy code. Every folder had a clear responsibility. Connecting frontend and backend taught me more than building them separately ever did. CORS (Cross-Origin Resource Sharing), Axios setup, environment variables, and handling API responses—all of it clicked today. Structure is not just about looking clean. It saves you when your project grows. Still learning. Still sharing. #Backend #Frontend #Fullstack #NodeJS #React #WebDevelopment #LearningInPublic #100DaysOfCode

Alhumduhlillah, 🚀 Excited to share my latest Milestone: Full-Stack E-Commerce Application built with the MERN Stack! Building something from scratch is the best way to learn, and this project has been an incredible journey of self-learning. I’ve focused on creating a high-performance, scalable application using the latest tools in the ecosystem. Key Technical Highlights: Frontend: Leveraged the power of React 19 for better performance and Redux Toolkit for seamless state management. Backend: Developed a robust API using Express.js and Node.js. Database: Structured data efficiently with MongoDB. Payments: Integrated Stripe Payment Gateway to handle secure, real-world transactions and smooth checkout flows. Through this project, I’ve deepened my understanding of hooks, asynchronous logic, and full-stack architecture. Check out the video below to see it in action! 📽️ #MERNStack #React19 #Stripe #WebDevelopment #SelfLearning #FullStackDeveloper #ReduxToolkit #JavaScript #Ecommerce #NodeJS #MongoDB

🚀 Understanding start vs dev in Node.js (A Small Thing That Matters Big!) When I started building backend projects, I used to see this in package.json: "start": "node server.js", "dev": "nodemon server.js" At first glance, both looked similar… but they actually serve very different purposes 👇 ▶️ start Runs the app using Node.js directly No auto-restart when code changes Used in production (deployment) 👉 If you change code → you must restart manually 🔁 dev Uses nodemon Automatically restarts the server on file changes Used during development 👉 Change code → server reloads instantly ⚡ 💡 Why both exist? start → Production environments (Render, AWS, Railway) dev → Local development for faster workflow 🎯 Pro Tip: Always use 👉 npm run dev while building projects Currently building a Smart E-commerce Backend (MERN Stack) and learning these fundamentals deeply 💻🔥 More updates coming soon 🚀 #NodeJS #MERNStack #WebDevelopment #BackendDeveloper #LearningInPublic #JavaScript #Developers

How a Modern Web App Actually Works (The Full Stack) 🌐 Ever wonder what goes on behind the scenes of your favorite websites? It’s more than just "writing code"—it’s an interconnected ecosystem. I’ve mapped out my primary toolkit to show how I take a project from an idea to a live, scalable product: 🎨 The Face (Frontend): I use React and Next.js combined with Tailwind CSS to build interfaces that aren't just pretty, but lightning-fast and mobile-responsive. ⚙️ The Brains (Backend): This is where the logic happens. Using Node.js and REST APIs, I ensure that every button click triggers the right action securely. 🗄️ The Memory (Database): Whether it’s PostgreSQL or MongoDB, this is where your valuable data lives, organized and ready to be called up in milliseconds. 🛠️ The Tools (Workflow): From version control with Git/GitHub to deployment via Vercel and Docker, I focus on a "clean code" workflow so the project is easy to maintain for years. Which part of the stack do you think is the most critical for a business in 2026? A) User Experience (Frontend) B) Security & Logic (Backend) C) Data Integrity (Database) Let’s discuss in the comments! 👇 #WebDevelopment #TechStack #Programming #SoftwareEngineering #DigitalGrowth

Every modern app is built on a combination of these layers. But choosing which ones to go with, especially if you're a beginner or non-technical is very difficult. My current go-to stack: Frontend: Next.js Backend: NestJS (SaaS) / FastAPI (AI) Database: PostgreSQL / Supabase Auth: JWT Realtime: WebSockets / Socket.io  Deployment: AWS Different tools, different tradeoffs but the same goal: building systems that scale. What’s your go-to stack for 2026? 👇 #javascript #php #saas #webdevelopment #software

🚀 Excited to Share My Latest E-Commerce Project! 🚀 Hey everyone! I’m excited to share my latest project: an E-Commerce Platform that I built to practice real-world full-stack architecture, authentication, testing, and deployment-ready workflows. 🔗 GitHub Repo: https://lnkd.in/e-7Q-rKK 🛠️ Tech Stack Frontend React 18 React Router Vite Tailwind CSS Backend Node.js + Express Zod validation JWT authentication + cookie-based refresh strategy Multer (admin image uploads) Data & Infrastructure PostgreSQL Prisma ORM (migrations + seed) Docker / Docker Compose Quality & CI ESLint Vitest Supertest Playwright GitHub Actions CI 📌 What I Learned While Building This Designing a cleaner, scalable full-stack architecture Implementing secure auth flows (JWT + refresh cookies) Building confidence with automated testing (unit/API/E2E) Working with Prisma migrations/seed and containerized dev setups using Docker I’d love to get feedback from fellow developers, especially on architecture, testing strategy, and what features you’d add next. If you’re interested, feel free to check out the repo, star it, or open an issue/PR! Looking forward to your thoughts! 😄 #opensource #ecommerce #webdevelopment #fullstack #reactjs #nodejs #expressjs #postgresql #prisma #docker #testing #githubactions #tailwindcss

🚀 Built My Own Full Stack Password Manager – PassOP 🔐 Excited to share a project I recently completed — PassOP, a full stack password manager designed to help users securely store and manage credentials for different websites. The main goal of this project was to better understand how modern web applications work behind the scenes, especially how the frontend communicates with backend APIs and how data is stored and retrieved from a database. While building this project, I implemented a complete full-stack workflow where the React frontend sends API requests to a Node.js backend, which then interacts with a MongoDB database to store and fetch user credentials. 🔧 Tech Stack Used • React (Vite) – Building the user interface • Node.js & Express – Creating REST APIs • MongoDB Atlas – Cloud database for storing credentials • JavaScript (ES6) – Handling asynchronous operations with async/await • Render – Deploying the application online ✨ Key Features • Add and store website credentials (URL, username, password) • Retrieve saved passwords from the database • API integration between frontend and backend using fetch() • Environment variable management using .env • Clean and responsive UI built with React components • Password visibility toggle and easy credential management 💡 Key Concepts I Practiced • Full-stack application architecture • API communication between frontend and backend • State management using React hooks • Backend routing and request handling with Express • Database operations (insert, fetch, delete) with MongoDB • Managing environment variables for secure configuration 🌐 Live Project: https://lnkd.in/gSBq5_i9 💻 GitHub Repository: https://lnkd.in/gE8DTXAW This project gave me practical experience with building and deploying a complete full-stack application, and strengthened my understanding of API-driven development. I’m currently continuing to learn and build more projects in JavaScript, React, and Full Stack Web Development. #FullStackDevelopment #ReactJS #NodeJS #MongoDB #JavaScript #WebDevelopment #LearningInPublic