The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Formula 1 fan base website using @Replit
1. Software/Platform:
Primary build: Replit (AI Agent + IDE)
Pre-loader screen: custom-built from scratch, not Replit-generated
2. Tech Stack:
Frontend: React + Vite
Styling: TailwindCSS
Animation: Framer Motion + GSAP (ScrollTrigger)
Fonts: Google Fonts (Titillium Web / Orbitron for headings, Inter for body)
Media: Canvas-based frame-sequence scroll effect (extracted from promo video via ffmpeg).
3. API Keys / Data
Teams + Races data: Jolpica-F1 API (free, no key required)
News data: mock JSON (no free official news API available; swappable later)
Store/merch data: mock JSON (no public F1 merch API exists).
4. Assets
F1 Custom logo (svg)
Custom-extracted video frames (ffmpeg, png/webp) for hero scroll-scrub
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
Why I Build Before I Pitch
One of the best decisions I've made as a Full Stack Developer is to keep building, even when no client is watching.
Every project I create sharpens my skills in web development, mobile app development, UI/UX design, backend architecture, and AI-powered SaaS development.
Recently, I've been working on products like:
🚀 LeadRadar – AI-powered lead generation platform
📊 Unlimited – Team tracking and employee management platform
🏠 Real Estate Management Platform
🍽️ Restaurant Ordering System
🏥 Healthcare Management Platform
Each project helps me explore new ideas, improve user experience, and create scalable software that solves real business problems.
I'm always looking for ways to build faster, design smarter, and deliver products that people genuinely enjoy using.
What are you building this week? I'd love to see it and connect with other builders.
#FullStackDeveloper #ProductDesigner #WebDevelopment #MobileAppDevelopment #SaaS #AI #SoftwareDevelopment #React #NextJS #TypeScript #NodeJS #UIUX #Startup #BuildInPublic #Tech #Developer #BusinessSoftware #Innovation #DigitalProducts #OpenToWork
Just finished a new concept project: a premium Starbucks-inspired landing page.
The goal wasn't simply to design another coffee website. I wanted to create an immersive experience that combines modern UI, interactive 3D, and smooth motion to make the brand feel more engaging from the very first interaction.
Built with:
• Base44
• React
• Tailwind CSS
• GSAP
• Spline
Some of the highlights:
• Interactive 3D hero section
• Glassmorphism UI
• Cinematic scroll animations
• Premium micro-interactions
• Fully responsive layout
One thing I've learned while building projects like this is that AI can speed up development, but the final quality still depends on design decisions, iteration, and attention to detail. The best results come from refining the experience not from a single prompt.
I also recorded a walkthrough of the project, and you can explore the live version through the link in the comments.
I'd love to hear your feedback.
What would you improve or add to make this experience even better?
#WebDesign #UIDesign #Frontend #CreativeDeveloper #GSAP #Spline #React #TailwindCSS #Base44 #AI #LandingPage #MotionDesign #InteractiveDesign
Fantastic concept. The combination of 3D, motion, and micro-interactions creates a premium feel. I would just ensure performance stays smooth on mobile and keep the primary CTA visible throughout the experience so the visuals continue to support conversion.
New case study up — Hominc Realty MX. Full real estate platform built from scratch: dynamic listings, gated property access for lead capture, mortgage calculator, and a complete admin dashboard. Next.js + Supabase, 14 pages, 6 months of work. One of the most technically complete projects in my portfolio.
Great design and presentation i like the color palette starts to get darker while going into the footer!