sv443 / sv443.github.io Goto Github PK

• Development
• Featured projects
  • JokeAPI
    REST API that serves jokes in various formats, such as JSON, XML, and YAML. It also provides a web interface for users to interact with the API.
  • React, TS, MUI, Three.js, Electron Template
    Template project for desktop (/ website hybrid) app games and simulations
  • This portfolio
    My portfolio page inside this repository
  • @pubcore/vite-storybook-mui
    Component library for React using Material UI with Storybook and Vite
  • BetterYTM
    Userscript that improves YouTube Music with features such as improved lyrics lookup, fine volume control and lots more layout and usability improvements
  • UserUtils
    Zero-dependency library with tons of utilities for userscripts
  • geniURL
    Simple JSON and XML REST API to search for song metadata and lyrics
  • BrewBot
    General-purpose Discord bot with a focus on moderation, utility and games
  • Townly & Teng
    TS CLI city building game and an accompanying game engine
  • SvCoreLib
    Zero-dependency library with tons of miscellaneous quality of life features
  • Sv443 Network Homepage
    My organization's website and my old portfolio

• JokeAPI is currently being remade for its upcoming major update, including a new frontend using Docusaurus, TypeScript and React

• It is written in TypeScript, uses Prisma as its ORM and PostgreSQL as its database
• Has many API integrations, including JokeAPI, and geniURL
• Contains games rendered on a HTML5 canvas
• Works with the latest Discord API standards (slash commands) and latest features (modal form, button rows, etc.)

• BetterYTM has frontends made in pure HTML, CSS and JS, to stay in bundle size limits and to not hog resources
• It is used by about a hundred people weekly
• The userscript has support for plugins made by other developers
• I learned using every bundler under the sun for this project (webpack, turbopack, vite, babel) and ended up using rollup

• Contains builtin TypeScript declarations
• Fully web compatible and supports ESM and CJS imports and global declarations
• Bundled and compiled using tsc and tsup, CI&CD using GitHub actions and changesets
• Used in my userscripts BetterYTM and my webpack TypeScript template for userscripts

• It is built with TypeScript, React, Tailwind, shadcn/ui and PostCSS
• The project uses GitHub actions for CI/CD and is hosted on GitHub pages
• The project is built using Vite and has a Storybook server for component development
• Focus on responsiveness and accessibility

• Contains many versatile and reusable components
• Features highly flexible data table, XLSX and CSV mapping forms, forms built with JSON-schema and more
• I was a contributor to the project, helped with the development of it and used it extensively in other projects
• The library is built using TypeScript and Vite and is published on npm

• My first exposure to express, express-router and Fuse.js
• Used a couple hundred times daily (mostly due to my userscript BetterYTM)

• I got really far feature-wise but lost interest in the project and it was eventually paused
• The engine was designed to be modular, separated from the game Townly, and easy to use, but it was never used in another project
• The game has had a history of rewrites, from JS to Qt C++ to TypeScript

• My first experience making a decent JS library
• Received contributions from other developers
• Only ever supported CommonJS, though a refactor is planned

• It was built to be accessible and responsive and to list all my projects and skills in a clean and organized way
• This new portfolio page repo supersedes it

To set up the project locally, follow the steps below:

1. Install Node.js
2. Fork (if contributing) and clone the repository
3. Install the dependencies with the command npm i
4. Copy the file .env.template to .env and fill in the environment variables

• Run the development server with the command npm run dev
• Run npm run build to build the project for production
• Run npm run storybook to start the Storybook server, which is used to develop and test the components in isolation
• To add shadcn components to the project, use npx shadcn-ui@latest add name