Works portfolio with category filters
The works page filters productions by category, such as corporate ads, documentaries, short films and food documentaries. Each work opens its own page with the embedded video, tags, status and the full write-up.
All projects
Web App
Live in productionFlying Pup Films — Film Studio Website and CMS
Flying Pup Films is a film production studio, and flyingpupfilms.com is its website with a content system of its own. We built the Next.js site and the Express and MongoDB backend, where the studio manages its works, services, blog and enquiries and counts its own visits.
Updated
For Flying Pup FilmsMar 2024 – Jun 2026
- Public website
- Superadmin CMS (web)
- Express API
Overview
Overview
Flying Pup Films is a film production studio. Its website shows the studio's productions (corporate films, documentaries, short films, food documentaries and more), each with an embedded video and a write-up, alongside its service lines, a blog and a contact form. The studio manages all of it from a superadmin panel rather than asking a developer for each new film.
CountryDevs built both halves: a Next.js client using the Pages router, Redux Toolkit and SCSS, and an Express API on MongoDB that stores uploaded images in Amazon S3. The panel covers works, services, the blog and an enquiry inbox fed by the contact form, and a small page tracker built into the site records visits to the public pages for the studio's dashboard.
The work began in March 2024, and most of the content system was built in February and March 2025. In June 2026 the client moved to Next.js 15, and we cleared every finding npm audit reported on the backend's dependencies on 16 June 2026, 38 in all, by upgrading, replacing or removing packages rather than suppressing warnings. The public-page screenshots are of the live site; the panel screenshots come from a local copy running on demo data.
The story in three steps
From the problem to what runs today
01 · Where it started
The challenge
A studio's website goes stale when every new film needs a developer. Flying Pup works across many kinds of production, from corporate ads and event highlights to documentaries, short films and underwater shoots, so the portfolio has to filter by category, each project needs its own page with its video, and the list of services changes as the studio adds offerings.
Read the full challengeShow less
Enquiries arrive about different things: a general question, a quote for a service, a project request. They needed one place where the studio could see each message, what it was about and whether anyone had answered it. And the studio wanted to see how many people visited without adding a third-party analytics script to the site.
02 · What we built
The solution
We built the site on Next.js with an Express and MongoDB API, and gave the studio a superadmin panel to run it. A work gets a URL slug generated from its title, an embedded YouTube or Vimeo video, a department and category, a status and a featured flag that decides whether it appears in the home-page carousel. Blog posts carry Draft, Scheduled, Published or Archived states, categories and tags, and a read time worked out from the word count at 200 words a minute; the public blog lists only published posts.
Read the full solutionShow less
The contact form files each message by type and can link it to the service it is about, and the inbox moves it from pending to responded, on-going, completed or rejected. For traffic, the site records its own page views: a tracker samples a quarter of visitors, skips admin and API paths, keeps a random session ID in the browser and sends time-on-page in batches, and the dashboard counts unique visitors by session and by IP address.
03 · Where it stands
The impact
What exists now: flyingpupfilms.com is live, and its works, work-detail, services and blog pages are served from the studio's own content system. The live build ships the page tracker, so visits to the public pages feed the panel's visitor count without an outside analytics service.
Read the full impactShow less
In June 2026 we took the codebase through a dependency clean-up. On 16 June 2026 npm audit reported 38 vulnerabilities on the backend (1 critical, 11 high, 22 moderate, 4 low) and 2 low on the client; after the work it reported 0 on both, and the backend's 1,071-line integration test suite was kept and upgraded rather than removed. We do not have traffic or enquiry figures we can publish, so this page gives none.
Chapter 1
Clearing 38 npm audit findings without suppressing any
On 16 June 2026 npm audit reported 38 vulnerabilities on the backend and 2 on the client. The rule for the clean-up was simple: every finding is closed by a real upgrade, a maintained replacement or the removal of an unused package, and nothing is ignored or suppressed.
| Before | After | |
|---|---|---|
| Backend | 38 (1 critical, 11 high, 22 moderate, 4 low) | 0 |
| Client | 2 (low) | 0 |
How each finding was handled
For every advisory we asked, in order: what is it, do we use the package or the affected feature, is there a compatible fixed version, and is there a better maintained alternative. Then we made the change and audited again.
- Removed.
cloudinaryandsticky-sessionwere never imported; the server already used Node's ownclustermodule. - Replaced.
aws-sdkv2, which is in maintenance, gave way to the modular@aws-sdk/client-s3v3, withmulter-s3v3. - Upgraded. mongoose 5 to 8 (this closed the critical finding), jsonwebtoken 8 to 9, nodemailer 6 to 9, multer 1 to 2, passport 0.4 to 0.7 and uuid 8 to 11, plus the test and dev tooling.
The code the upgrades forced
Mongoose 7 removed query callbacks, so the two Passport lookups became async/await; .remove() became .deleteOne(); the S3 client moved to the v3 API; and connection options Mongoose no longer reads were dropped. The 1,071-line integration suite, about 130 assertions, stayed and was upgraded to Jest 30.
Two judgement calls
On the client, the only advisory named exactly Quill 2.0.3 and no fixed release existed. We pinned 2.0.2, which the advisory lists as unaffected, and wrote up a move to another editor as an option the studio chose not to take for now. A postcss override looked unnecessary, but removing it brought back two moderate findings, so it stays.
By the numbers
- 38Backend npm audit findings cleared in June 2026, none suppressed
- 1,071Lines in the backend integration test suite kept through the upgrades
- 25%Share of visitors sampled by the built-in page tracker
Features
What we built into Flying Pup Films
Readable project URLs
Every work gets a slug generated from its title when it is created, so a project page has a URL a person can read and share.
Services catalogue
Services sit in categories and subcategories, each marked Active, Inactive or Coming Soon, with an optional featured flag, video, price, billing period and availability type.
Blog with editorial states
Posts are written in a rich-text editor and saved as Draft, Scheduled, Published or Archived, with categories, tags and an automatic read time; only published posts appear on the site.
Enquiry inbox
Contact-form messages are filed as general, service quote, gallery enquiry or project request, and move through pending, responded, on-going, completed and rejected.
Built-in visit tracking
The site samples a quarter of visitors, skips admin and API paths, records page, referrer, device and time on page, and sends exit times in batches every ten seconds.
Superadmin dashboard
Totals for blogs, works and services, unique visitors from the page tracker, a content mix chart and monthly content trends, with the latest posts and works.
Phone-friendly layouts
The portfolio grid and work pages collapse to a single column on phones, with the same video embeds and write-ups as on desktop.
Real screens · 14
What Flying Pup Films looks like
On a phone 2
On desktop 7
Project details
Tech stack
Next.jsReactRedux ToolkitSCSSBootstrapSwiperNode.jsExpressMongoDBMongooseAmazon S3JWTPassportNodemailerJest
Timeline & team
Mar 2024 – Jun 2026
Links
FAQ
Questions about this project
How does Flying Pup Films add a new production to its website?
In the superadmin panel the studio adds a work with its title, client, department, category, status, video link and write-up. The site generates a URL slug from the title, lists the work under its category on the works page and gives it its own page with the embedded YouTube or Vimeo video.
How does the Flying Pup Films site count visitors without a third-party analytics tool?
A tracker built into the site samples a quarter of visitors, skips admin and API paths, and records the page, referrer, device and time on page against a random session ID. The studio's dashboard counts unique visitors by session and by IP address from those records.
How were 38 npm audit vulnerabilities cleared from the Flying Pup Films backend?
Each finding was closed by upgrading the package (mongoose 5 to 8, jsonwebtoken 8 to 9, nodemailer 6 to 9 and others), replacing it (aws-sdk v2 with the v3 S3 client) or removing it when it was never imported. Nothing was suppressed, and npm audit read 0 on 16 June 2026.
Where do enquiries from the Flying Pup Films contact form go?
Into an enquiry inbox in the studio's panel. Each message is filed as a general enquiry, service quote, gallery enquiry or project request, and the studio moves it from pending to responded, on-going, completed or rejected.
Related
Engineering notes from this build
More work
Other things we shipped
All projects
FeaturedSaasfor Storafleet
Storafleet — Multi-Cloud Storage Control Plane
Storafleet is CountryDevs' own SaaS control plane for object storage. Teams connect buckets they already own on 50+ providers, including AWS S3, Cloudflare R2, Backblaze B2, Wasabi and MinIO, then browse, migrate, search, secure and cost-check them from one console.
Next.js 15ReactRedux ToolkitNode.js+11
FeaturedMobile Appfor Pakka Logistics
Pakka Logistics — On-Demand Goods Delivery Platform
Pakka Logistics is an on-demand goods delivery platform for India. We built all of it: Android apps for customers and drivers, a business portal, an operations console and the website. The web platform is live and both Android apps are on Google Play; the two iPhone apps are in App Store review.
React NativeTypeScriptRedux ToolkitNode.js+12
FeaturedMobile Appfor Slic Solutions Private Limited
LetSlic — Social Media App with Group Chat, Stories and Premium
LetSlic, listed on Google Play as Slic, is a social app for photo posts, 24-hour stories and real-time chat with group moderation. We built it for Slic Solutions Private Limited: the React Native app, two Node.js APIs, the superadmin console and the website, plus Premium and ads.
React NativeTypeScriptReduxNode.js+13
Got a project?
Let's build the
next one together
Tell us what you're trying to ship and which project here is closest to it. We'll reply with the questions that shape the plan, then start with a two-week Discovery Sprint, so you see the screens and the plan before any code is written.
Not ready for a full build? Start with a Discovery Sprint, or get a code audit of an app someone else built. See how a project runs with us.
We work from Bengaluru with clients in India and abroad: app development in Bangalore, for businesses in the UAE and for businesses in the UK.