KSports is a web application that allows users to browse and purchase sports-related products. The application consists of a frontend built with Next.js and a backend built with ASP.NET Core, with Stripe for payments handling.
It has the features of displaying products, search for products, make purchases, and track purchase orders.
The server is deployed on Azure with Docker container, and frontend is deployed on Vercel.
Node.js npm or yarn .NET SDK
- Clone the repository:
git clone https://github.com/KlintLee115/k_sports.git
cd ksports- Install frontend dependencies:
cd frontend
npm install
# or
yarn install- Install backend dependencies:
cd ../backend
dotnet restore- Start the development server:
cd frontend
npm run dev
# or
yarn dev- Open http://localhost:3000 with your browser to see the result.
- Start the backend server:
cd backend
dotnet run- The backend server will be running at http://localhost:5204.
frontend/ # Root directory for the frontend application
├── public/ # Contains static files that are served directly
│ └── ... # Various static assets (images, icons, etc.)
├── src/ # Contains the source code for the frontend application
│ ├── app/ # Contains the main application components and pages
│ | ├── (home)/ # Home page
│ │ ├── api/ # Contains API route handlers
│ │ │ └── auth/ # Contains authentication-related API routes
│ │ │ └── [...nextauth]/ # Contains NextAuth.js configuration
│ │ │ └── route.js # Defines the authentication routes
│ | ├── checkout/ # Checkout page
│ | ├── paymentfailed/ # Payment failed page
│ | ├── paymentsuccess/ # Payment success page
│ | ├── checkout/ # Order tracking page
│ ├── components/ # Contains reusable UI components
│ │ │ └── ...
│ ├── contexts/ # React contexts with useContext hook
│ │ │ └── ...
│ ├── helpers/ # Contains helper functions and utilities for API calls and other utilities
│ │ │ └── helpers.ts
│ └── types/ # Contains custom TypeScript type definitions
│ │ └── types.ts
├── .eslintrc.json # Configuration file for ESLint
├── .gitignore # Specifies files and directories to be ignored by Git
├── next.config.js # Configuration file for Next.js
├── package.json # Defines the project's dependencies and scripts
├── tailwind.config.ts # Configuration file for Tailwind CSS
├── tsconfig.json # Configuration file for TypeScript
└── yarn.lock # Lockfile for yarn dependencies
backend/
├── Controllers/
│ ├── CheckoutController.cs // Handles checkout-related requests
│ ├── OrderStatusesController.cs // Check order statuses
│ ├── ProductsController.cs // Get products based on sorting and filtering options
│ ├── SeedController.cs // Handles database seeding requests
│ └── WordsController.cs // Handles word-related requests, finding words related to current selected products
├── Data/
│ ├── DataContext.cs // Contains DbSets anad ModelCreation configuration
│ └── Seed.cs // Contains the logic for seeding the database with initial data
├── Mappers/
│ └── ProductMapper.cs // Maps Product entities to ProductResponseDto
├── Models/
│ ├── Product.cs // Represents a product entity
│ ├── ProductRelatedWord.cs // Represents a product-related word entity
│ └── ProductResponseDto.cs // Represents a data transfer object for products
├── Properties/ // Contains project properties
│ └── launchSettings.json // Contains settings for launching the application
├── Dockerfile
├── backend.csproj
└── Program.cs
GET/api/products: Get a list of products with optional filters and sorting.
GET/api/words: Get data related to words with optional filters.
GET/api/orderstatuses: Get the order status data.
POST/api/checkout: Create a checkout session.
POST/api/seed: Seed the database with initial data.