Skip to content
GetUrUI

Fieldnote Courses

NewTemplateProduct site5 screens

A five-screen online course platform in a field-journal style: a marketing home, a filterable catalogue, course detail with enrolment, a lesson player with timestamped notes, and a learner dashboard with streaks and certificates.

Get this template

A self-contained Next.js project. One-time purchase, lifetime updates for this template, source yours to deploy.

$79

Or get every template with Lifetime

By continuing you agree to the Terms and the License. You ask for access to the digital content straight away and acknowledge that you lose your 14-day right of withdrawal once you download or install a paid item; our Refund policy still applies.

Included free with Pro Lifetime ($179) — compare plans.

Open

What is this?

Fieldnote is a course-platform template for a fictional school of practical courses taught by working practitioners. Five connected screens sit behind one in-page router: a marketing home with pricing and FAQ, a filterable catalogue, a course page with syllabus and enrol card, a lesson player with chapters, notes and resources, and a learner dashboard with streaks, a weekly goal ring and certificates. It is styled like a field journal, and every visual is drawn in SVG from theme tokens.

Who is it for?

Founders and teams building a course platform, cohort school, internal academy or creator membership who want a believable product to start from — and designers who need a realistic multi-screen app for pitching, prototyping or teaching.

What you get

Everything needed to make it yours.

Generative course covers

Each course gets an SVG cover from one of eight seeded motifs, drawn only from theme tokens; change the seed for a new cover.

A lesson player you can operate

Playback clock, draggable and keyboard scrubber, speed, captions and Space to play; Mark complete draws a check and moves on.

Notes tied to the moment

Notes are stamped with the playback time and jump back to it; notes, progress and enrolments persist on the device.

Filtering that feels physical

Topic chips, levels, length, free-preview and search, with results that reflow on layout springs and a drawer on mobile.

A dashboard that rewards habits

A 12-week streak calendar, a weekly goal ring that updates as you learn, courses in progress and a next-up card.

Certificates worth showing

Guilloche backgrounds, an SVG seal with circular text, the learner's capstone and an ID, with demo download and share.

Screens & sections

  • Home — hero and course shelf
  • How it works
  • Instructors
  • Testimonials
  • Pricing (monthly/yearly)
  • FAQ
  • Course catalogue
  • Course detail
  • Lesson player
  • Learner dashboard
  • Certificates

Stack

Next.jsReact 19Tailwind CSS 4Motion

15 source files · GetUrUI components bundled

motion, lucide-react, clsx, tailwind-merge

More templates