1. Architecture Overview
Tech Stack
- Frontend: Next.js (React) + Tailwind CSS
- Backend: ASP.NET Core Web API
- Database: MongoDB (NoSQL)
- Communication: REST API (JSON over HTTP)
2. Project Structure
/eShopApp
/client (Next.js frontend)
/server (ASP.NET Core backend)
/mongodb (MongoDB instance via Docker or Atlas)
3. Frontend – Next.js + Tailwind Setup
- Setup Steps
npx create-next-app@latest client
cd client
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
- /pages/index.js
export default function Home() {
return (
<div className="flex flex-col items-center justify-center h-screen bg-gray-100">
<h1 className="text-3xl font-bold">
Welcome to eShop
</h1>
</div>
);
}
- Create Product Listing Page (/pages/products.js)
import { useEffect, useState } from 'react';
export default function Products() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch('http://localhost:5000/api/products')
.then((res) => res.json())
.then((data) => setProducts(data));
}, []);
return (
<div className="p-8">
<h2 className="text-xl font-semibold mb-4">Product List</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{products.map((product) => (
<div key={product.id} className="border p-4 rounded shadow">
<h3 className="font-bold">{product.name}</h3>
<p>${product.price}</p>
</div>
))}
</div>
</div>
);
}
4. Backend – ASP.NET Core + MongoDB
Setup
- Create a Web API project.
dotnet new webapi -n server
cd server
- Install the MongoDB driver.
dotnet add package MongoDB.Driver
/Models/Product.cs
using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;
namespace server.Models
{
public class Product
{
[BsonId]
[BsonRepresentation(BsonType.ObjectId)]
public string Id { get; set; } = "";
public string Name { get; set; } = "";
public decimal Price { get; set; }
}
}
/Services/ProductService.cs
using server.Models;
using MongoDB.Driver;
namespace server.Services
{
public class ProductService
{
private readonly IMongoCollection<Product> _products;
public ProductService(IConfiguration config)
{
var client = new MongoClient(config.GetConnectionString("MongoDb"));
var database = client.GetDatabase("eShopDb");
_products = database.GetCollection<Product>("Products");
}
public List<Product> Get() =>
_products.Find(p => true).ToList();
public Product Create(Product product)
{
_products.InsertOne(product);
return product;
}
}
}
/Controllers/ProductsController.cs
using server.Models;
using MongoDB.Driver;
namespace server.Services
{
public class ProductService
{
private readonly IMongoCollection<Product> _products;
public ProductService(IConfiguration config)
{
var client = new MongoClient(config.GetConnectionString("MongoDb"));
var database = client.GetDatabase("eShopDb");
_products = database.GetCollection<Product>("Products");
}
public List<Product> Get() =>
_products.Find(p => true).ToList();
public Product Create(Product product)
{
_products.InsertOne(product);
return product;
}
}
}
Program.cs
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
builder.Services.AddSingleton<ProductService>();
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(policy =>
policy.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod());
});
var app = builder.Build();
// Configure the HTTP request pipeline.
app.UseCors();
app.MapControllers();
app.Run();
appsettings.json
{
"ConnectionStrings": {
"MongoDb": "mongodb://localhost:27017"
},
"Logging": {
"LogLevel": {
"Default": "Information"
}
}
}
5. MongoDB Setup (Local or Docker)
Docker Command
docker run -d -p 27017:27017 --name mongo mongo
6. Running the App
- Run a MongoDB container or connect to Atlas.
- Start ASP.NET Core backend.
cd server
dotnet run
- Start Next.js frontend.
cd client
npm run dev
7. Optional Features
- Add product images (store URL in MongoDB)
- Add cart functionality in frontend (use React context)
- Add login/logout with JWT or NextAuth
- Add Stripe or Razorpay integration for checkout