Graph Theory Interactive Learning Platform

Learn Graph Theory with interactive lessons and hands-on exercises.

Tech Stack

• Nuxt - Progressive Vue.js framework
• Nuxt Content - File-based content management system within Nuxt
• D3.js - A library for creating custom interactive data visualizations
• VueUse - Collection of Vue Composition Utilities
• TailwindCSS - Utility-first CSS framework
• DaisyUI - Component library for Tailwind CSS
• UnoCSS - Providing pure CSS icons
• Typescript - Strongly typed JavaScript
• Vitest - Unit testing powered by Vite
• Vue Test Utils - Testing utility library for Vue.js
• ESLint - A linting tool for identifying and fixing problematic patterns
• Prettier - An opinionated code formatter
• pnpm - Fast, disk space efficient package manager

Run Locally

Install

Clone the project, go to the project directory

git clone https://github.com/TomatoGuy0502/nuxt-graph
cd nuxt-graph

Install the dependencies

# pnpm
pnpm install

# npm
npm install

# yarn
yarn install

Development

Start the development server on http://localhost:3000

pnpm run dev

Testing

Testing the application

pnpm run test

# With coverage
pnpm run test --coverage.enabled

Build

Build the application for production:

pnpm run generate

Locally preview production build:

pnpm run preview

Project Structure

├── assets                  # All the assets that the build tool will process.
│   ├── css
│   └── svg
├── components              # Vue components
│   ├── content                 # Components that used in .md file
│   └── d3                      # Components that related to the graph
├── composables             # Vue composables
├── content                 # Files that will be read by Nuxt Content
│   ├── 1.basic
│   ├── 2.representation
│   └── 3.algorithm
├── layouts                 # Layout file for different pages
├── pages                   # All the pages(routes)
│   └── tutorial
│       ├── algorithm
│       ├── basic
│       └── representation
├── public                  # Contains public files(e.g. favicon.ico)
├── test
├── utils                   # Helper functions
├── app.vue                 # Main component of Nuxt 3 application
├── index.d.ts              # For typing custom page metadata
├── nuxt.config.ts          # Nuxt configuration
├── package.json            # Contains all the scripts and dependencies
├── prettier.config.js      # Prettier configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
├── uno.config.ts           # UnoCSS configuration
└── vitest.config.ts        # Vitest configuration