PictureLand

PictureLand is a full-stack Next.js e-commerce demo where visitors can sign up, browse image listings, pay with Stripe, and — if approved as a seller — upload and manage their own products.

What is PictureLand?

PictureLand is an image marketplace built as a technological demonstration of Next.js (React) with a Node.js/Express backend pattern. The app reads product data from MongoDB Atlas, stores uploaded images via the Cloudinary API, and processes credit card payments through the Stripe API. The project is created by Ratnadeep Das Choudhury and is deployed on Vercel; a second version repo (nextjs-pictureland-2.0) is linked from the main page.

Input: user registration details, product listings, image uploads, payment card data. Output: a working storefront with order records, role management, and seller product controls.

Key Features

• JWT authentication — Users sign up and log in with credentials; tokens are stored via js-cookies, and protected routes rely on JsonWebTokens (JWT) verified on the server.
• Role-based seller approval — A registered user becomes a seller only after an admin changes their role; sellers can then create and delete their own image products.
• Stripe payment integration — Buyers pay for images with a credit card through the Stripe API, and order details are saved and displayed back to the user.
• Admin role switching — An admin can change any registered person's role from user to admin in one click from the interface.
• Cloudinary image storage — Product images are uploaded to and served from Cloudinary, keeping the app's own storage light.
• MongoDB Atlas database — All users, products, and orders persist in a MongoDB Atlas cluster, with backend packages Express, Nodemon, Nodemailer, and nookies handling API and email tasks.
• Vercel deployment — The live demo runs on Vercel and is reachable at pictureland2021.vercel.app.

Who is it for?

The template is aimed at developers learning how the pieces of a modern full-stack JavaScript application fit together: Next.js for rendering and routing, Express-style API routes, Mongo Atlas, Cloudinary, and Stripe. It also works as a starting point for a small image-selling storefront, since it already includes user accounts, product management, and payment flow. Finally, anyone auditing e-commerce patterns can study the admin role-switching and seller-approval workflow.

What can you do with PictureLand?

• Learners: trace the full purchase path — sign up, log in, pick an image, pay with a test Stripe card, and view the saved order — to see how client and server code connect.
• Aspiring sellers: request seller status, then create new image products or delete existing ones after admin approval.
• Admin users: promote other accounts to admin in one click to test permission-gated features.
• Integrators: reuse the JWT + cookie auth and Stripe checkout section as reference code for another storefront.

How does PictureLand work?

The demo follows a standard storefront flow: a visitor registers or logs in with JWT-based credentials; an admin can upgrade the user's role; approved sellers can add or remove product listings with images stored on Cloudinary; and a buyer selects a product and pays via Stripe, which generates an order shown in that user's order details.

FAQ

Is PictureLand free to use?

The live site is a public demonstration project, so the web app itself is free to browse and test; no pricing tiers are stated for the demo. The source code is publicly available on GitHub, with a link to the version 2 repository.

Does PictureLand use Next.js API routes or a separate backend?

The repository mentions Express, Nodemon, Nodemailer, and nookies as backend packages, so the project uses a custom Node.js/Express-style server layer alongside Next.js rather than relying only on serverless functions.

What payment method does PictureLand support?

It integrates the Stripe API, so buyers can pay by credit card on the checkout page. Because it is a demo, you would normally test with Stripe's test-mode card numbers.

Can I become a seller on PictureLand?

Only after an admin changes your role. Once approved, the seller UI appears and you can create new image products and delete existing ones.