Next.js conventions for VioletDashboard and Connect
This skill inherits all available tools. When active, it can use any tool Claude has access to.
Violet Connect uses nested dynamic routes:
pages/
├── [appAlias]/
│ └── [platformsMode]/
│ └── [platform]/
│ └── index.tsx
[appAlias] - App/channel subdomain (e.g., 'andydev')[platformsMode] - Either 'platforms' or 'merchant-migration'[platform] - E-commerce platform (shopify, bigcommerce, etc.)Next.js API routes with middleware pipeline:
// pages/api/validate_cookie.ts
import { withValidation, withAuth } from '@/middlewares';
async function handler(req: NextApiRequest, res: NextApiResponse) {
// Handler logic
}
export default withAuth(withValidation(handler));
/api/validate_cookie// Using auth context
const { isAuthenticated, user } = useAuth();
if (!isAuthenticated) {
return <LoginPage />;
}
Redux with typed hooks:
// redux/hooks.ts
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
// Usage
const dispatch = useAppDispatch();
const { merchants } = useAppSelector(state => state.merchants);
Required in .env.local:
Use react-hook-form:
import { useForm } from 'react-hook-form';
const { register, handleSubmit, errors } = useForm<FormData>();
const onSubmit = (data: FormData) => {
// Submit logic
};
Use the centralized axios wrapper:
import { axiosWrapper } from '@/utilities/axiosWrapper';
const response = await axiosWrapper.get('/api/endpoint');
@violet/shared-components - Component library@violet/shared-types - Type definitions# Login to AWS CodeArtifact for internal packages
npm run co:login
npm run dev # Development server (port 3001)
npm run build # Production build
npm run lint # ESLint
npm run test # Unit tests
npm run test:e2e # Playwright E2E tests
npm run lighthouse # Performance tests
Local development requires /etc/hosts configuration:
127.0.0.1 appname.localhost