🎨 Interactive Article Reproduction

This project is a faithful replica of the complete article "A Friendly Introduction to SVG". The objective was to reproduce the design, user experience, and all interactive SVG examples.

Tech Stack:

• Vue.js
• Tailwind CSS
• Shadcn UI

Getting Started: A Time-Saving Approach

To minimize development time, the best approach is to leverage existing tools.

1. Project Setup: Initialize the Vue.js project with Tailwind CSS and Shadcn UI.
2. Explore the Ecosystem: Before writing custom code, research Vue.js or general JavaScript libraries for SVG animation and manipulation. The goal is to find tools that can handle complex interactions out-of-the-box.
3. Implement the First Snippet: Use the first SVG example in the article as a proof-of-concept. Try to build it using the libraries you found. This will quickly validate your chosen tools and establish a workflow for the rest of the project.
4. Build Incrementally: Continue recreating the article section by section, prioritizing the use of pre-built solutions over custom code.

🛠️ Technologies Used:

• Framework: Vue.js
• Libraries & Tools: Tailwind CSS, CodeMirror 6, Shadcn UI
• Development Tools: Prettier, ESLint

🚀 How to Run

1. Clone the repository and go to the project folder.

2. Install the project dependencies using pnpm install or npm install.

3. Start the dev server using the pnpm dev or npm run dev.

4. Open a browser and go to http://localhost:5173.

🏗 Build & Testing

• To build a project for production, use pnpm build or npm build.
• To run tests in CI mode, use pnpm test:ci or npm test:ci.