A visually stunning hero area with smooth scroll effects and dynamic thumbnails showcasing upcoming projects.
A dedicated page detailing future film projects, designed for engagement and anticipation.
A password-protected, form-gated system enabling users to securely access confidential project pitch decks.
Highlighting our top-performing, audience-loved projects with a ready-to-watch experience.
An adaptive interface presenting both upcoming and completed projects with rich metadata.
A proprietary video player featuring keyboard controls, PiP, playback speed options, and seamless playback of our film content.
Showcasing top-rated filmmaking courses and educational articles within a clean, intuitive interface.
An organized catalog of all available courses with filtering, tags, and quick access.
Comprehensive view of each course including overview, instructor info, learning outcomes, and downloadable content.
Detailed curriculum section outlining every module and lesson for each course.
A polished, interactive modal for users to request certificates post-completion.
Course material protected with a dynamic password sent only to enrolled users — unlocking downloadable resources.
Streamlined payment experience using Razorpay, designed with clarity and user trust in mind.
A dedicated section for course policies, ensuring transparency and trust for all learners.
Beautifully styled gradient-backed article section with swipe controls for intuitive navigation.
Content-rich article archive with advanced search and category filters.
A single-article layout optimized for reading, engagement, and social sharing.
Showcasing the team with a kinetic name-scroll effect, highlighted profiles, and live job postings.
Smartly structured FAQ section with the most asked questions and support resources.
An easy-to-fill form for applicants looking to work with Urban Hustle Films.
A detailed submission form for actors and models to express interest in upcoming productions.
A beautifully designed contact page with featured FAQs and instant support options.
A visually rich journey page that outlines the evolution and milestones of Urban Hustle Films.
A visually rich journey page that outlines the evolution and milestones of Urban Hustle Films.
This section, revealed post-form submission, thanks users and encourages portfolio building via Bolt.new.
A robust, multi-step audition form designed for smooth submissions and candidate tracking.
An intuitive stepper-based audition system — from personal info to NDA download and final review.
Automatically generated NDA PDF downloads with the candidate’s name and secure confirmation.
NDA PDF downloads with the candidate’s name and secure confirmation.
Submissions are tagged with a unique CID (Candidate ID) for tracking and reference.
This section, revealed post-form submission, thanks users and encourages portfolio building via Bolt.new.
Smartly structured FAQ section with the most asked questions and support resources for our candidates.
Collects critical candidate information in a clean and mobile-friendly layout.
Secure image and video reel uploads with cloud storage and reference-based retrieval.
Showcasing impactful stories from previous collaborations and casted talent.
A reimagined Careers section with structured listings and better UX for both desktop and mobile.
Our New Carreers page with Proper sorting and better ui for bothndesktop and mobile
Bold visuals and mission-first messaging to introduce the brand identity of Urban Hustle Films.
A refreshed About Us page that blends storytelling, values, and visual flair.
A minimalist yet effective button designed to drive organic sharing across platforms.
A sleek share modal with integrated buttons for WhatsApp, Email, LinkedIn, Twitter, and more.
A sleek and vibrant mobile navigation menu with multiple tabs and other links

🎬 Urban Hustle Films – Bold Stories. Real People. Urban Spirit.

💡 Inspiration

In the world of film and entertainment, we noticed something troubling — despite all the glamour on screen, the film industry’s digital infrastructure is outdated, inaccessible, and opaque. There are few platforms that allow:

Newcomers to submit their work easily
Actors to apply without favoritism
Creators to connect without needing industry connections
Students to pitch their ideas without being ignored

Most studio websites are either portfolio shells or closed networks. There’s no true digital hub for the next generation of filmmakers.

🎬 Urban Hustle Films (UH Films) was born out of this frustration — to fight nepotism, barriers to entry, and the gatekeeping of ideas.

We wanted to democratize opportunity in filmmaking — not just by telling stories, but by building a platform that lets anyone tell theirs.

🚀 What It Does

Urban Hustle Films is more than a website — it's a fully-featured cinematic ecosystem designed for:

🎥 Cinematic Showcases

Host short films, web series, ads, and music videos
Secure pitch deck downloads for confidential submissions

🧑‍🎤 Talent & Careers

Apply for jobs, internships, and film projects
“Get Casted” section for actors to submit portfolios

🎓 Education & Learning

Filmmaking courses across editing, cinematography, production & more
Behind-the-scenes articles and tutorials

🌐 Community Interaction

Contact forms, FAQs, social media integrations
Collaborator submissions and feedback systems

✨ Premium User Experience

Dark mode, animations, smooth transitions, custom cursor UX
Full accessibility and responsive across all devices

🛠️ How We Built It

We chose a modern, performant tech stack that balances rich interactivity with mobile responsiveness and scalability.

⚙️ Core Technologies

Technology	Purpose
React 18 + TypeScript	SPA with type safety and concurrent rendering
Vite	Ultra-fast dev server and build tool
Tailwind CSS	Responsive, utility-first styling
Supabase	Backend as a service – DB, Auth, Storage
Razorpay	Secure payments for course purchases

🎨 Animations & UI/UX

Framer Motion & Anime.js for transitions and animations
Swiper for sliders and carousels
Custom Cursors and micro-interactions

🎥 Media Integrations

React Player for video playback
Canvas Confetti for celebration effects
Lottie Animations for loaders

🧠 State & Routing

React Router DOM for dynamic client-side routing
Context API for global loading and state management

📦 Technical Architecture


uh-films-website/
├── src/
│   ├── components/           # Reusable React components
│   ├── hooks/                # Custom hooks
│   ├── lib/                  # Utility functions
│   ├── types/                # TypeScript definitions
│   ├── App.tsx               # Main app component
│   └── main.tsx              # Entry point
├── supabase/
│   ├── functions/            # Serverless edge functions
│   └── migrations/           # DB schema files
├── public/                   # Static files
├── scripts/                  # Build scripts and sitemap generator
└── package.json              # Project metadata and dependencies

⚔️ Challenges We Faced

Balancing Performance & Aesthetics
Heavy animations and videos risked slow load times — we used code splitting, lazy loading, and memoization to solve this.
No Backend? No Problem.
Features like protected downloads, casting forms, and payments were implemented using Supabase Edge Functions, EmailJS, and Razorpay.
Custom Video Player
We built a video player from scratch with:
- Keyboard shortcuts (space, m, f)
- Picture-in-Picture support
- Fullscreen and mobile gestures
Talent Submission Security
Implemented password protection, rate-limiting, and file uploads for casting calls and confidential documents.
Cross-Browser Compatibility
Ensured consistency across browsers using fallbacks and CSS fixes.
Accessibility
We followed WCAG guidelines for keyboard navigation, ARIA labels, and color contrast.

📚 What We Learned

Animation Performance Matters
Hardware acceleration and reduced-motion fallbacks dramatically improve UX.
TypeScript = Peace of Mind
Catching errors early helped build faster and safer.
Supabase is Powerful
Edge functions gave us backend-like power with frontend simplicity.
User Trust = Secure UX
We learned to protect content, validate forms, and secure data at every step.
Content Structure is Everything
Modular, type-safe data handling allowed us to scale cleanly.

🏆 Key Features We're Proud Of

✅ Custom Video Player with PiP and keyboard shortcuts
✅ Get Casted Form for aspiring actors, with file uploads and validation
✅ Glassmorphism UI with smooth animations and dark mode
✅ Secure Pitch Deck Access with password-protected downloads
✅ Responsive Layout that adapts beautifully to all screens
✅ Live Confetti Effects and immersive micro-interactions
✅ Educational Course Platform with payments and downloads
✅ Talent Acquisition Pipeline for filmmakers and crew roles

🔮 What’s Next?

[x] User Portfolios: Personalized dashboards for creators and actors
[x] Interactive LMS: Quizzes, video progress, certifications
[ ] Filmmaker Forums: A full community with threads and DMs
[ ] Live Events: AMA sessions, workshops, and virtual premieres
[ ] AI-Powered Recommendations: Smart content discovery
[ ] E-commerce Launch: Merchandise and premium downloads
[ ] Multilingual Site: Global language support
[ ] NFT Certificates: Blockchain-based proof of course completion

🧑‍💻 Local Development

# Clone the repo
git clone https://github.com/yourusername/uhf

# Install dependencies
npm install

# Start local dev server
npm run dev

Required Environment Variables

VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
VITE_RAZORPAY_KEY_ID=
VITE_RAZORPAY_THEME_COLOR=

🚀 Deployment

Hosted on Vercel with CI/CD from GitHub main branch.
Performance monitored via @vercel/analytics and speed-insights.
SEO handled by React Helmet Async and sitemap generation.

👥 Team & Ownership

Role	Name
Founder	Bishanpreet Singh
Owner	Urban Hustle Films™
Development	Built with Bolt.new
Design	Urban Hustle Films™ Creative Team

📄 License

🙌 Closing Note

🎞️ Urban Hustle Films is not just a platform — it’s a movement.

It’s for every student, every underdog, every dreamer who deserves to be heard.

We believe in stories over status. We believe great cinema comes from everywhere — all it needs is a platform.

This is that platform. 🌆