feat: Archipelago demo stack (lightweight)
This commit is contained in:
Dorian
175
neode-ui/QUICK_START.md
Normal file
175
neode-ui/QUICK_START.md
Normal file
@@ -0,0 +1,175 @@
|
||||
# 🚀 Quick Start Guide
|
||||
|
||||
## What Was Built
|
||||
|
||||
A **complete Vue 3 + Vite + Tailwind rewrite** of your Neode UI that:
|
||||
|
||||
✅ **Recreates ALL your UI work:**
|
||||
- Glassmorphism design system
|
||||
- Alien-style splash screen with typing animations
|
||||
- Login page with glass cards
|
||||
- Onboarding flow (intro + options)
|
||||
- Dashboard with glass sidebar
|
||||
- Apps list with service cards
|
||||
- Connection status handling
|
||||
|
||||
✅ **Fixes routing issues:**
|
||||
- Clean Vue Router (no more disappearing components!)
|
||||
- Predictable navigation
|
||||
- Proper auth guards
|
||||
|
||||
✅ **Connects to your backend:**
|
||||
- RPC client (same endpoints as Angular)
|
||||
- WebSocket for real-time updates
|
||||
- Pinia store (replaces PatchDB pattern)
|
||||
|
||||
## Start Developing
|
||||
|
||||
```bash
|
||||
cd /Users/tx1138/Code/Neode/neode-ui
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Visit: **http://localhost:8100**
|
||||
|
||||
## Test the App
|
||||
|
||||
Since you're in mock mode, you can test:
|
||||
|
||||
1. **Splash Screen** - Should show the alien intro on first visit
|
||||
2. **Skip Button** - Click to skip the intro
|
||||
3. **Onboarding** - After splash, you'll see the onboarding flow
|
||||
4. **Login** - Glass card with password input
|
||||
5. **Dashboard** - Glass sidebar with navigation
|
||||
6. **Apps** - List view with glass cards
|
||||
|
||||
## Connect to Real Backend
|
||||
|
||||
When you're ready to connect to the actual backend:
|
||||
|
||||
1. **Update proxy in `vite.config.ts`** if backend isn't on port 5959
|
||||
2. **Remove mock logic** - The RPC client is ready to go!
|
||||
3. **Test login** - Use your actual password
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
neode-ui/
|
||||
├── src/
|
||||
│ ├── api/
|
||||
│ │ ├── rpc-client.ts # RPC methods (login, packages, etc.)
|
||||
│ │ └── websocket.ts # WebSocket connection & patches
|
||||
│ ├── stores/
|
||||
│ │ └── app.ts # Pinia store (global state)
|
||||
│ ├── views/
|
||||
│ │ ├── Login.vue # Login page
|
||||
│ │ ├── OnboardingIntro.vue # Onboarding welcome
|
||||
│ │ ├── OnboardingOptions.vue # Setup options
|
||||
│ │ ├── Dashboard.vue # Main layout with sidebar
|
||||
│ │ ├── Home.vue # Dashboard home
|
||||
│ │ ├── Apps.vue # Apps list
|
||||
│ │ └── ... # Other pages
|
||||
│ ├── components/
|
||||
│ │ └── SplashScreen.vue # Alien intro animation
|
||||
│ ├── router/
|
||||
│ │ └── index.ts # Routes & auth guard
|
||||
│ ├── types/
|
||||
│ │ └── api.ts # TypeScript types
|
||||
│ └── style.css # Tailwind + glassmorphism
|
||||
├── public/assets/img/ # Your images & logo
|
||||
└── vite.config.ts # Vite config with proxy
|
||||
```
|
||||
|
||||
## Development Commands
|
||||
|
||||
```bash
|
||||
# Start dev server (hot reload)
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Preview production build
|
||||
npm run preview
|
||||
|
||||
# Type check
|
||||
npm run type-check
|
||||
```
|
||||
|
||||
## Key Differences from Angular
|
||||
|
||||
| Angular | Vue 3 |
|
||||
|---------|-------|
|
||||
| Modules + Services | Composables + Stores |
|
||||
| RxJS Observables | Reactive refs/computed |
|
||||
| Ionic Components | Native HTML + Tailwind |
|
||||
| Complex routing | Simple Vue Router |
|
||||
| PatchDB service | Pinia store |
|
||||
| Slow CLI | Fast Vite |
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Test the UI** - Run `npm run dev` and explore
|
||||
2. **Compare routing** - Notice how stable the navigation is
|
||||
3. **Check glassmorphism** - Your design is intact!
|
||||
4. **Connect backend** - Update vite.config.ts proxy if needed
|
||||
5. **Iterate** - Add features without Angular complexity
|
||||
|
||||
## Why This Is Better
|
||||
|
||||
### Routing Fixed ✅
|
||||
- No more disappearing components
|
||||
- Clean navigation with Vue Router
|
||||
- Predictable route guards
|
||||
|
||||
### Faster Development ⚡
|
||||
- Vite HMR is instant (vs Angular's slow recompile)
|
||||
- Simpler component structure
|
||||
- Less boilerplate
|
||||
|
||||
### Easier to Maintain 🛠️
|
||||
- Smaller bundle size
|
||||
- Modern patterns (Composition API)
|
||||
- Better TypeScript integration
|
||||
|
||||
### Same Features 🎨
|
||||
- All your glassmorphism styling
|
||||
- Splash screen with animations
|
||||
- Login, onboarding, apps list
|
||||
- WebSocket state sync
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Server won't start?**
|
||||
```bash
|
||||
# Kill any process on port 8100
|
||||
lsof -ti:8100 | xargs kill -9
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**Assets missing?**
|
||||
```bash
|
||||
# Copy from Angular project
|
||||
cp -r ../web/projects/shared/assets/img/* public/assets/img/
|
||||
```
|
||||
|
||||
**Backend connection fails?**
|
||||
- Check backend is running
|
||||
- Update proxy in `vite.config.ts`
|
||||
- Check browser console for CORS errors
|
||||
|
||||
**TypeScript errors?**
|
||||
- Check `src/types/api.ts` matches your backend
|
||||
- Run `npm run type-check`
|
||||
|
||||
## Success! 🎉
|
||||
|
||||
You now have a **modern, stable, fast** UI that's easier to work with than Angular. The routing issues are gone, development is faster, and you can iterate quickly.
|
||||
|
||||
**Ready to test?**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Then open http://localhost:8100 and see your beautiful glass UI in action!
|
||||
|
||||
Reference in New Issue
Block a user