Skip to main content

​
Start the Application

This guide will take you from a fresh installation to a fully running application.
1

Verify backend is running

Before starting the frontend, ensure your Bun Hono Backend is running and accessible.Test it by visiting:
http://localhost:3000/time-left
If you can’t access the backend, the frontend will display a “Backend Cannot Be Accessed” error message.
2

Configure environment variables

Create a .env file in the root directory with your backend configuration:
.env
BACKEND_URL=http://localhost:3000
USERNAME="admin"
PASSWORD="your-secure-password"
Replace admin and your-secure-password with the exact credentials configured in your backend server.
The application uses these credentials for Basic Authentication:
Authorization: `Basic ${Buffer.from(
  `${process.env.USERNAME}:${process.env.PASSWORD}`
).toString("base64")}`
3

Start the development server

Run the development server with your preferred package manager:
pnpm run dev
The application will start with Turbopack (Next.js’s fast bundler) and be available at:
http://localhost:3001
4

Access the application

Open your browser and navigate to:
http://localhost:3001
You should see the Message Scheduler interface with:
  • A timer badge showing time remaining (e.g., “24 h”)
  • The main heading “Message Scheduler”
  • A reschedule button
  • Two panels: Messages and People

​
What You Should See

When the application loads successfully, you’ll see:

​
Main Dashboard

The home page (src/app/page.tsx) displays: 
<Badge variant="default" className="text-sm font-bold p-2 px-2">
  <Clock className="size-4" /> {data.timeLeft} h
</Badge>
<h1 className="text-lg font-bold">Message Scheduler</h1>
  • Time Left Badge: Shows hours remaining until messages are sent
  • Messages Section: Displays all scheduled messages with:
    • Message content preview
    • Recipient name and phone
    • Days until message sends
  • People Section: Lists all contacts
  • Add Message Button: Create new scheduled messages

​
Application Features

The interface provides:

Message Management

View, create, update, and delete scheduled messages. Each message shows content preview, recipient, and send timing.

People Management

Manage your contact list. Add people with names and phone numbers to send messages to.

Schedule Timer

Monitor time remaining before scheduled messages are sent. Adjust the schedule as needed.

Responsive Design

Mobile-friendly interface using Radix UI components and Tailwind CSS, adapting to any screen size.

​
Verify the Connection

The application fetches data from your backend on page load: 
const response = await fetch(`${process.env.BACKEND_URL}/time-left`, {
  method: "GET",
});
If successful, you’ll see the timer and interface. If it fails, you’ll see: 
Backend Cannot Be Accessed

​
Troubleshooting Connection Issues

If you see “Backend Cannot Be Accessed”:
  1. Verify backend is running on the correct port
  2. Check .env file has correct BACKEND_URL
  3. Ensure USERNAME and PASSWORD match backend credentials
  4. Test backend directly: curl http://localhost:3000/time-left

​
Development Commands

Common commands from package.json: 
pnpm run dev
# Starts dev server with Turbopack on port 3001

​
Next Steps

Now that your application is running:
  • Explore the Components section to understand the UI structure
  • Check the API Integration guide to learn how the frontend communicates with the backend
  • Review Configuration options for customizing your deployment
Remember: The application title is “Last Ping || Scheduling Messages” and uses the tagline “Still Alive…” - this is a message scheduler designed to send automated messages on your behalf.

Build docs developers (and LLMs) love

Get started for freeTalk to us