- Pagination: Content is paginated to enhance user experience, allowing users to navigate through data efficiently.
- Tailored "Next and Previous" Buttons: Users can seamlessly navigate between paginated tables with buttons that are appropriately enabled or disabled based on the current page.
- Search: Users can search through the tabulated data while preserving pagination behavior, ensuring a smooth and intuitive search experience.
- Loading States: The
useTransitionhook is utilized to provide the best possible user experience by displaying loading states during data fetching and transitions. - Server-Side Rendering (SSR): The component architecture is designed to leverage SSR, providing an optimized and fast user experience by rendering content on the server.
-
We'll use pnpm
pnpm install
-
Setup your environment variables
cp .env.example .env.development.local
-
Then, open the
.env.development.localfile and fill in the required environment variables. -
You'll need all the
POSTGRES_*variables from the Vercel dashboard to access the Vercel Postgres API. The Vercel Postgres API is used to store the current backgrounds and their status. -
You can get all the Vercel variables by using the Vercel CLI by running
vercel link -
Initialize your DB
psql "<YOUR POSTGRES_URL>" -f src/db/schema.psql -
Run the development server
pnpm dev
You're all set : ) Happy Coding