Modern backend component library with a stunning Next.js showcase
A professional, production-ready frontend for Backternity - showcasing our comprehensive collection of backend components with beautiful design and seamless user experience.
- 🎨 Modern Design: Clean, professional UI with emerald theme
- 📱 Responsive: Optimized for all device sizes
- 🔍 Component Browser: SEO-friendly slug-based routing
- ⚡ Performance: Optimized with Next.js 15 and modern best practices
- 🎭 Animations: Smooth Framer Motion animations
- 🔐 Type Safe: Built with TypeScript-ready components
- 📦 Component Library: 25+ production-ready backend components
- 🎯 Developer-Focused: Built by developers, for developers
- Framework: Next.js 15.5.5 (App Router)
- Styling: Tailwind CSS with custom design system
- Components: Shadcn/ui + Custom components
- Animations: Framer Motion
- Icons: Lucide React
- Typography: Inter font family
- Deployment: Vercel-ready
- Node.js 18+
- pnpm (recommended) or npm/yarn
# Clone the repository
git clone https://github.com/Sparsh-06/Backternity-Frontend.git
# Navigate to project directory
cd Backternity-Frontend
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:3000 to view the application.
├── app/ # Next.js App Router pages
│ ├── browse/ # Component browser with slug routing
│ ├── globals.css # Global styles and theme variables
│ ├── layout.jsx # Root layout with providers
│ └── page.jsx # Homepage
├── components/ # React components
│ ├── sections/ # Landing page sections
│ ├── ui/ # Reusable UI components
│ └── providers/ # Context providers
├── lib/ # Utilities and configurations
│ ├── registry.js # Component registry for browse page
│ └── utils.js # Shared utility functions
└── public/ # Static assets
- Primary: Emerald (hsl(162, 100%, 50%))
- Background: Dark theme with gradient overlays
- Typography: Balanced contrast with muted-foreground
- Accent: Subtle emerald highlights
- Hero Section: Animated landing with terminal demo
- Component Showcase: Interactive grid with hover effects
- Testimonials: Social proof with masonry layout
- Search Command: Keyboard-accessible component finder
The project works out of the box, but you can customize:
- Theme Colors: Edit CSS custom properties in
app/globals.css - Components: Add new components to
lib/registry.js - Content: Update section content in
components/sections/
# Build for production
pnpm build
# Start production server
pnpm start
# Run linting
pnpm lint- Push your code to GitHub (already done!)
- Connect your repository to Vercel
- Deploy with default settings
- Your site will be live at
your-app.vercel.app
- Netlify: Connect GitHub repo and deploy
- Railway: One-click deploy from GitHub
- DigitalOcean: App Platform deployment
- AWS Amplify: Full-stack deployment option
Our backend components cover:
- Authentication & Security - JWT, OAuth, MFA, RBAC
- Database Integration - MongoDB, PostgreSQL, Redis
- Cloud Storage - AWS S3, file processing, CDN
- API Middleware - Rate limiting, CORS, validation
- Monitoring & Logging - Winston, error tracking, metrics
- Performance & Scaling - Worker threads, caching, queues
We welcome contributions! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Live Demo: [Coming Soon]
- Documentation: [In Development]
- Component Library: [Backend Components]
- Support: GitHub Issues
Built with ❤️ for the developer community
Making backend development faster, one component at a time.
Making backend development faster, one component at a time.