IMV Assistant Portal is a dashboard template built with Next.js, Tailwind CSS, React Query, React-draft-wysiwyg, and Supabase, created for IMV Laboratory staff to manage events, blog posts, and other site content.
What is IMV Assistant Portal?
IMV Assistant Portal is an official assistant dashboard website for IMV Laboratory. It takes administrative actions such as creating and editing events and blog posts as input, and stores and displays that content through a web interface. The stack runs Next.js on the front end, Tailwind CSS for styling, React Query for server-state management, React-draft-wysiwyg as the rich text editor, and Supabase as the backend database and authentication layer. The project is deployed on Vercel.
Key Features
- Next.js framework — React-based web framework with server-side rendering and static generation capabilities, as used in the official with-tailwindcss example.
- Tailwind CSS (v2.2) with Just-in-Time Mode — utility-first styling compiled on demand; the example follows the official Tailwind docs for Next.js.
- React Query — data-fetching and caching library for keeping dashboard content in sync with Supabase.
- React-draft-wysiwyg — WYSIWYG rich text editor component for writing blog post content.
- Supabase backend — provides the database, authentication, and storage needed for events and blog data.
- Vercel deployment — deployable to Vercel with a one-click button from the GitHub repository; the README also includes a live preview on StackBlitz.
Who is it for?
- IMV Laboratory staff — use the dashboard to create and edit events and blog posts without touching code.
- Content managers — publish lab news and event announcements through the React-draft-wysiwyg editor.
- Developers at IMV Laboratory — maintain and extend the Next.js + Supabase codebase, deployed on Vercel.
Use cases
- Event management: create, update, and publish events through the assistant dashboard.
- Blog publishing: draft and post blog articles using the React-draft-wysiwyg rich text editor.
- Content administration: manage other site content via the Supabase-backed admin interface.
How does it work?
The README shows bootstrapping the underlying with-tailwindcss example with npx create-next-app --example with-tailwindcss or the Yarn equivalent. After that, the dashboard layers in React Query for data fetching, React-draft-wysiwyg for editing, and Supabase for persistence. Deployment is handled by Vercel via the provided deploy button or the Next.js deployment documentation.
FAQ
How do I deploy IMV Assistant Portal?
The README includes a "Deploy with Vercel" button that creates a new project on Vercel from the repository URL. You can also follow the Next.js deployment documentation linked in the README.
How do I bootstrap this project locally?
Execute npx create-next-app --example with-tailwindcss with-tailwindcss-app or the Yarn equivalent, then run the development server. This is the command described in the README for the underlying with-tailwindcss example.
What database does it use?
Supabase is listed in the repository metadata as part of the stack, serving as the backend for events and blog content.
