Frontend UI Setup (Next.js)
The Pixel AI Dashboard is a high-performance frontend interface. Built with Next.js 16 and React 19, it leverages Tailwind CSS 4 for styling and Redux Toolkit for robust state management.
Install Project Dependencies
Open your terminal in the pixel-ai-next directory and
run the following command to link all required modules.
# Navigate to frontend
cd pixel-ai-next
# Install packages
npm installEnvironment Configuration
The application uses next.config.ts
for default
environment settings. To customize these for your local setup, create a .env.local file
in the root directory.
| Environment Variable | Description | Default (next.config.ts) |
|---|---|---|
NEXT_PUBLIC_API_BASE_URL |
The core API endpoint for data and AI processing. | http://localhost:3000/api |
NEXT_STORAGE_URL |
The base URL used to serve generated images and user uploads. | http://localhost:3000 |
Pro Tip: Ensure the
NEXT_PUBLIC_API_BASE_URL points to the /api suffix of your running
Backend server.
Start Development Server
Launch the Next.js development environment. This project fully supports Turbopack for near-instant compilation.
npm run devThe dashboard will be live at: http://localhost:3001
What's Next?
Let's get started — your journey with Pixel AI begins here!
