A modern, responsive web application built with Next.js, featuring dynamic content management, interactive UI components, and a stunning starfield animation system.
-
StarField Animation: Beautiful cosmic background with twinkling stars featuring:
- 130 animated stars with varying brightness levels
- Smooth twinkle animations with customizable durations
- Responsive to window resizing
- Optimized performance with React.memo
-
Responsive Layout: Mobile-first design that adapts seamlessly across all devices
-
Glass Morphism UI: Modern glass card design system with backdrop blur effects
-
Smooth Animations: Powered by Framer Motion for fluid transitions and interactions
-
Interactive Components: Enhanced user experience with hover effects and transitions
- Dynamic content management for blog posts, podcasts, and testimonials
- Multi-step contact form with validation
- Calendar booking system
- Service showcase with feature highlights
- Portfolio gallery
- Pricing plans display
- Admin dashboard for content management
- WCAG 2.1 compliant
- Keyboard navigation support
- Screen reader friendly
- High contrast focus indicators
- Semantic HTML structure
- Framework: Next.js (latest)
- Language: TypeScript
- Styling: Tailwind CSS with custom design system
- Animations: Framer Motion
- State Management: Redux Toolkit
- Database: Prisma with PostgreSQL
- Authentication: Clerk
- Forms: React Hook Form with Zod validation
- Testing: Jest + React Testing Library
- Icons: Lucide React
- Node.js 18+
- npm or pnpm
- PostgreSQL database
-
Clone the repository
git clone https://github.com/baobabstack-code/project.git cd project -
Install dependencies
npm install
-
Set up environment variables
Create a
.envfile in the root directory with the following variables:# Database DATABASE_URL="postgresql://user:password@localhost:5432/dbname" # Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key CLERK_SECRET_KEY=your_secret_key # Email (Resend) RESEND_API_KEY=your_resend_api_key EMAIL_FROM="Baobab Stack <[email protected]>" CONTACT_TO_EMAIL=[email protected] # Optional: Stripe (for payments) STRIPE_SECRET_KEY=your_stripe_secret_key NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
-
Set up the database
# Generate Prisma client npx prisma generate # Run migrations npx prisma migrate dev # Seed the database (optional) npm run db:seed
-
Start the development server
npm run dev
Open http://localhost:3000 in your browser.
npm run dev- Start development servernpm run build- Build for productionnpm start- Start production servernpm run lint- Run ESLintnpm test- Run Jest testsnpm run health-check- Check system healthnpm run db:seed- Seed database with sample datanpm run db:reset- Reset database and reseednpm run analyze- Analyze bundle size
The project includes comprehensive test coverage:
# Run all tests
npm test
# Run tests in watch mode
npm test -- --watch
# Run specific test file
npm test -- StarField.test.tsx
# Run tests with coverage
npm test -- --coverage- Unit Tests: Component-level tests in
__tests__directories - Integration Tests: Service and API tests
- Test Utilities: Standardized testing patterns with React Testing Library
StarField- Animated cosmic background with twinkling starsButton- Customizable button with multiple variantsInput- Form input with icons and error handlingSelect- Dropdown component with consistent stylingTextarea- Multi-line text inputResponsiveImage- Optimized image with loading states
Header- Responsive navigation with mobile menuFooter- Site footer with links and information
Hero- Landing page hero with StarField backgroundFeatures- Feature showcase gridServices- Service offerings displayTestimonials- Customer testimonials carouselPortfolio- Project galleryPricing- Pricing plans comparison
The landing page has been enhanced with:
- StarField Integration: Added cosmic animation to Hero section
- Fixed Stars Bug: Corrected CSS animation fallback value
- Responsive Design: Ensured all components work across devices
- Type Safety: Fixed all TypeScript errors
- Performance: Optimized with dynamic imports and memoization
- All dependencies are regularly audited
- CodeQL security scanning implemented
- XSS protection through React's built-in sanitization
- CSRF protection on all forms
- Secure authentication with Clerk
sm: 640px - Small tablets and large phonesmd: 768px - Tabletslg: 1024px - Desktopsxl: 1280px - Large desktops
- Primary: Purple gradient (from-purple-600 to-indigo-600)
- Background: Dark theme (#0A0B14)
- Text: White with gray variations for hierarchy
- Accents: Purple, Indigo, Blue, Pink
- Headings: Display font with tracking-wider
- Body: Sans-serif font
- Responsive sizing: Scales from mobile to desktop
- Consistent padding and margins using Tailwind utilities
- Responsive spacing patterns (py-8 sm:py-12 lg:py-16)
- 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
- Follow TypeScript best practices
- Write tests for new features
- Use meaningful commit messages
- Ensure all tests pass before submitting PR
- Follow accessibility guidelines (WCAG 2.1)
This project is private and proprietary to Baobab Stack.
None at this time. The stars functionality bug has been fixed.
✅ Active Development - Landing page fully enhanced with modern design, responsive components, and fixed stars functionality.
For support, email [email protected] or open an issue in the repository.
- Next.js team for the amazing framework
- Framer Motion for smooth animations
- Tailwind CSS for the utility-first approach
- All open-source contributors
Built with ❤️ by Baobab Stack