[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.

• :heavy_check_mark: means this technology is actively used and will not be replaced.
• :question: means we are not sure whether we should keep this technology or not (basically it is being tested).
• :grey_question: means we are considering using it (but are not using it yet).

Additional technologies

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

Code of Conduct

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