[QUESTION] What technologies is RankyList currently using?

[YummYume]

Question

What technologies are used by RankyList?

Here is a list of the technologies currently used by RankyList. Only important and definitive techs will be listed here. Others will be listed below.

Main techs

• SvelteKit for the templating, server-side, routing and overall app structure.
• Pocketbase for database, authentication and back-end operations.
• Valibot for validations.
• SvelteKit Superforms for handling forms easily.
• Formsnap to handle form fields easily.
• SASS for writing custom CSS.
• Tailwind CSS and Skeleton for the design.
• Docker to containerize the app.
• Caddy to proxy the different services.

Dev only

• Playwright for end-to-end testing.
• Vitest for unit testing.
• Bun for package management.
• Typescript for type safety.
• ESLint for lining, using a custom configuration.
• Prettier for code formatting.
• Histoire for displaying and testing components.

Note about Prettier :

We do not directly run Prettier as it is directly integrated with the ESLint rules. Running ESLint will run Prettier.

Additional information

Here's the list of other technologies or packages RankyList uses.

• ✔️ means this technology is actively used and will not be replaced.
• ❓ means we are not sure whether we should keep this technology or not (basically it is being tested).
• ❔ means we are considering using it (but are not using it yet).

Additional technologies

• ❓ ❔ Either svelte-lazy or svelte-img for lazy loading images.
• ✔️ SvelteKit SVG Plugin to convert .svg files into Svelte components.
• ❓ unplugin-icons to use icons as Svelte components.
• ❓ svelte-awesome-color-picker as color picker (important to have one for tier lists, and normalizing it across all browsers).
• ✔️ SVELTE DND ACTION for drag and drop functionality.
• ❔ Redis for caching various data.
• ✔️ Svelte Sonner for toasts.
• ✔️ Day.js for handling dates.

Code of Conduct

• I agree to follow this project's Code of Conduct