Inspiration, I wanted to create a clean, professional-looking business website for a small/medium enterprise — a site that showcases products/services clearly, offers downloadable product datasheets, and lets visitors contact the business without leaving the site. Many small businesses don’t have a proper website or have outdated ones. This motivated me to build a static website that is modern, responsive, easy to navigate and maintain — something that can work out-of-the-box for businesses needing quick web presence.
What it does, • Displays a professional product/services catalog with clean, responsive design • Offers downloadable product datasheets directly from the UI • Includes a Contact form fully connected to Firebase, so customer messages are stored securely in Firestore • Works smoothly on mobile and desktop (responsive Angular UI) • Can be deployed anywhere (e.g., Vercel) as a lightweight static site
Live demo: https: //business-site-gamma.vercel.app/home
How I built it, • Frontend: Angular (TypeScript, Angular CLI, components, routing) • UI Design: Tailwind CSS / custom CSS for responsive layouts • Backend: • Contact form is connected to Firebase Firestore • AngularFire library used for securely sending messages to Firebase • Real-time database stores customer name, email, message, and timestamp • Hosting: • Deployed on Vercel for fast global hosting • Version Control: Git & GitHub • Structured the project to make adding new products, datasheets, or pages simple and scalable
Challenges I ran into, • Integrating Firebase securely within Angular, especially configuring environment variables and AngularFire setup • Ensuring real-time contact form submissions worked without page reloads • Handling responsive design across devices • Organizing product data in a maintainable format while keeping the UI minimal and clean • Deployment configuration to ensure Firebase initialization worked in production environment
Accomplishments that I'm proud of, • Built a fully functional business website from scratch — not just UI but also backend connectivity • Successfully integrated Firebase Firestore for real-time message storage • Created a reusable, customizable template suitable for any small business • Achieved a smooth and responsive design that works across all screen sizes • Clear project structure and documentation, making this a good portfolio + hackathon submission • The system is actually usable by a real business right now
What I learned • Firebase setup, AngularFire integration, and Firestore database structure • Proper form handling, validation, and real-time data writes in Angular • Best practices for deploying Angular apps with API keys and environment configs • UI/UX considerations for a product catalog and business website • How to turn a simple idea into a production-ready, deployable web project • Improved debugging skills when linking frontend + cloud backend
Built With • Angular • TypeScript • Firebase Firestore • AngularFire • Tailwind CSS / custom CSS • Node.js & npm • Vercel Hosting • GitHub
Log in or sign up for Devpost to join the conversation.