This issue tracks the current progress of the frontend overhaul project.
The progress of individual issues can be seen on the frontend overhaul project board.

Current status

• The React conversion (Convert Razor views to React #1000) is almost finished and the remaining work can/should be done during the frontend overhaul.
• We've migrated from Laravel Mix to Vite (Migrate to Vite #1102), which should make a large project like this easier
• We've replaced older libraries like momentjs with modern alternatives like dayjs (Migrate away from momentjs #1398, Remove unused npm packages #1170)

Goals

• Improved mobile responsiveness (Other: Improve mobile support (responsiveness) #6)
• Implementation of new design/layout ideas
• Improved accessibility
• Improved performance

Expected process

(Please note that the time estimates are highly speculative and depend on a number of factors, like the amount of redesign work that needs to be done)

We are currently in phase 2.

0. Discussion (~1 week): This phase is meant for discussion directly related to the process outlined in this PR. The remaining features (see below for more information) should also be implemented during this phase.
1. Pre-alpha (~2 weeks): This phase is focused on building the required internal scaffolding for the new frontend. Only few pages will be supported in the new layout and the old site will still receive new features and bug fixes. Major bugs and crashes in the new frontend are expected.
2. Alpha (~1 month): This phase is meant for exploration of new layout and design ideas. Most of the major redesign decisions should be made in this phase. Trusted users will be able to to activate this layout, but it still isn't recommended for daily use. Bugs are also still expected.
3. Beta (~1 month): This phase is meant for fixing bugs and resolving minor design issues. Everyone will be able to choose the new layout in the settings menu. The old frontend will only receive bug fixes and new features should be implemented in the new frontend.
4. Rollout: In this phase the old layout will be deleted.

How can I contribute?

First of all, thank you for you interest in helping to improve VocaDb. Here are some things you can do to help with this process:

1. Give feedback on the old design and tell us about your biggest roadblocks when trying to navigate VocaDb/UtaiteDb/TouhouDb.
2. (Starting from phase 2): Test the new layout. (Instructions on how to enable the "Hidden feature flag" here soon).
3. Create mockups of your vision of an improved VocaDb page. This can be anything from a drawing to a local html modification.
4. Design a new logo / new icons. (More information on this soon)
5. Help with the technical aspects of the migration. Feel free to send me a message either on discord or here on github and we can discuss the current state of the process.

Things to consider

We definitely want to include the VocaDb community in this process. Maybe we could do a poll/conduct interviews to identify current issues with the layout. We also need to make sure that we take into account the problems of new users as well as those of experienced users.

Technical considerations

• The "hidden feature flag" will just be a localstorage flag
• We will use Mantine as our new jQuery UI replacement (Other: Find a replacement for jQuery UI #853)
• We will remove most of the old css/less styling

Features that will still be implemented in the old layout

• Piapro embeds do not work anymore #1377
• Song entry: New field for language #1408
• More song language options #1441