Which modern web technologies suit a drag-and-drop sports team manager app?

Frontend
1

Hey everyone!

I’m working on a personal project. It’s a web app for managing a rugby team. I want to use the latest browser features. The app will get data from an online rugby sim game API.

I’m thinking about making a cool interface where users can drag and drop player cards onto a field image. Each card would show stuff like the player’s age, country, and best position. Maybe even a small picture.

I’ve heard about Canvas, SVG, and CSS3 for animations. But I’m not sure which one to pick or if there’s something better out there.

What do you think would work best for this kind of project? Any ideas on how to make the drag-and-drop part smooth and user-friendly?

Thanks for your help!

2

ooh, that sounds like a fun project! have you considered using React with a library like react-beautiful-dnd for the drag-and-drop functionality? it’s pretty smooth and customizable. for the player cards, you could use CSS Grid or Flexbox to arrange them nicely. what kinda performance are you aiming for? curious to hear more about your plans!

3

yo, canvas might be overkill here. svg’s prolly your best bet for the field n player positions. it’s lightweight and scales nice. for drag-n-drop, vanilla js with the drag n drop api works great. pair it with some css transitions for smooth movement. keep it simple, ya know?

4

For your rugby team management app, I’d recommend leveraging HTML5 drag and drop API combined with modern JavaScript frameworks. Vue.js or Svelte could be excellent choices for building a responsive and interactive interface. They offer great performance and a gentler learning curve compared to React.

For the visual aspects, SVG would be ideal for creating the field layout and player positions. It scales well and allows for easy manipulation of elements. CSS Grid can handle the overall layout, while CSS transitions can add smooth animations to player movements.

Consider using IndexedDB for client-side storage to cache team data and improve offline functionality. This approach should result in a fast, modern web app that’s enjoyable to use and maintainable in the long run.