The reason we couldn't place it in shared/modelConstants.js is that the
frontend uses Vite which requires import.meta.env for environment variables,
while the backend uses process.env. Therefore, we created separate config files
for the frontend (src/constants/config.ts) and backend (server/constants/config.js).
Right now, when the WebSocketContext component unmounts,
there is still a pending reconnection attempt that tries
to reconnect the WebSocket after 3 seconds.
The main issue with using states was, previously the websocket never closed
properly on unmount, so multiple connections could be opened.
This was because the useEffect cleanup function was closing an old websocket
(that was initialized to null) instead of the current one.
We could have fixed this by adding `ws` to the useEffect dependency array, but
this was unnecessary since `ws` doesn't affect rendering so we shouldn't use a state.
Add new project creation wizard component with improved user experience
and better input field interactions. Integrate projects API routes on
the backend to support CRUD operations for project management.
Changes include:
- Add ProjectCreationWizard component with step-by-step project setup
- Improve input hint visibility to hide when user starts typing
- Refactor project creation state management in Sidebar component
- Add ReactDOM import for portal-based wizard rendering
The wizard provides a more intuitive onboarding experience for users
creating new projects, while the enhanced input hints reduce visual
clutter during active typing.
