.NET Core  

Shopping web application using Next.js, Tailwind CSS, .NET Core Web API, and MongoDB

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

  1. Create a Web API project.
    dotnet new webapi -n server
    cd server
    
  2. 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