MERN Portfolio & Digital Product Marketplace

What is ankulcodes?

ankulcodes is a full-stack MERN application that turns a developer portfolio into a small online store. It shows your projects, code snippets and blog posts in a polished, animated website, and it lets visitors buy or unlock your work directly from the same site.

Everything a real product needs is already built and connected: user accounts with email verification, Google sign-in, Razorpay payments with server-side verification, an admin panel to publish content, transactional emails and image uploads. You configure your keys, deploy, and start selling.

Who is it for?

• Developers and freelancers who want a portfolio that also sells templates, projects and snippets
• Final-year / MCA / BCA students looking for a real-world, well-documented MERN project
• Learners who want to see how authentication, payments and an admin CMS fit together in one codebase

Key features

Public website

• Animated home page: illustrated avatar (hover reveals the real photo), typewriter headline, count-up stats, scroll-reveal sections
• Dark / light theme and fully responsive layout
• Projects, Gallery (code snippets) and Blog with categories, search and Markdown content
• Contact form with email notifications, and a newsletter signup

Shop

Every item in the shop has its own access model, set by the admin:

Everything a user buys or unlocks is saved to their profile for re-download.

Accounts

• Email + password registration with a 6-digit OTP sent by email
• New-device verification: a password login from an unknown device needs an emailed code
• Continue with Google (Firebase): one click, no OTP, because Google has already verified the email
• Forgot / reset password, change password, profile details and avatar upload
• Profile page with purchase history and saved blogs

Admin panel (/admin)

• Dashboard with quick access to every section
• Create, edit, draft and delete projects, gallery items and blog posts
• Markdown editor with image uploads to Cloudinary
• Per item: pricing type, price, discount, download link, featured flag, SEO fields

Tech stack

Security built in

• Passwords hashed with bcrypt, never returned by the API
• Short-lived access token + httpOnly refresh cookie, revoked on logout and password reset
• OTPs: random, expire in 10 minutes, constant-time comparison, locked after 5 wrong attempts
• Password reset uses a one-time server-issued token, so the OTP step can't be skipped
• Google tokens verified on the server with Firebase Admin
• Role-based access: the admin role is checked against the database on every request
• Paid download links are never sent to the browser before purchase
• Server-side pricing, HMAC signature + amount + status checks on every payment, signed webhook
• Helmet headers, CORS allow-list, rate limiting on login / OTP / contact routes
• Input validation on every route and HTML-escaped emails

What you get

• Complete source code: client/ (React) and server/ (Express API)
• .env.example files listing every variable, with comments
• render.yaml blueprint for one-click API deployment on Render, and vercel.json for the frontend
• Project Guide (PDF): service setup, running locally, using the site, deployment, troubleshooting
• Technical Documentation (PDF): architecture, auth flows, data model, full API reference
• Synopsis, SRS and Project Report with diagrams (in the documentation tiers)
• Free updates to this version

Quick start

bash
Copy
1# 1. API
2cd server
3cp .env.example .env      # add your MongoDB, Brevo, Cloudinary, Firebase, Razorpay keys
4npm install
5npm run dev               # http://localhost:9020
6
7# 2. Website (new terminal)
8cd client
9cp .env.example .env
10npm install
11npm run dev               # http://localhost:5173

Register on the site, set role: "admin" on your user in MongoDB, and the admin panel opens at /admin.

Deployment

The frontend deploys to Vercel and the API to Render; the database runs on MongoDB Atlas. All three have free tiers, so you can go live without paying for hosting. The included guide walks through every step, including the Razorpay webhook and the Google sign-in domain setup.

Easy to rebrand: your name, contact details and social links live in one config file, and the logo, hero text and email templates each sit in a single component. Make it yours in minutes.