BuildOnCoffee is a modern, community-driven platform designed to accelerate your development journey. Discover curated learning resources, powerful tools, and connect with fellow developers in a beautifully crafted environment.
- Project Insights
- Live Demo
- Features
- Getting Started
- UI/UX Highlights
- Technology Stack
- Pages & Features
- Database Schema
- Contribution Guidelines
- Environment Variables
- Recent Updates
- Acknowledgments
- Support
- How to Contribute
- Contributing
- Code of Conduct
- Contribution Guidelines
- Suggestions & Feedback
- Show Your Support
- License
- Stargazers
- Forkers
- Project Admin
| 🌟 Stars | 🍴 Forks | 🐛 Issues | 🔔 Open PRs | 🔕 Closed PRs | 🛠️ Languages | 👥 Contributors |
 |
 |
 |
 |
 |
 |
 |
Experience build-on-coffee live here:
👉
- Comprehensive Courses: Data Structures, Algorithms, Operating Systems, Networks, Databases, System Design
- Free Certificates: Access to courses with free certificates from top platforms
- Interactive Roadmaps: Step-by-step learning paths for various tech domains
- Project Ideas: Curated project ideas for all skill levels (Beginner to Advanced)
- Documentation Hub: Official docs for frameworks, languages, and databases
- Productivity Tools: Discover tools that enhance your development workflow
- Portfolio Builder: SnapFolio integration for instant portfolio generation
- Learning Paths: Structured multi-week journeys with progress tracking
- Glossary: Essential tech terms explained simply
- Secure Verification: Cryptographically verified certificates using Supabase database
- Real-time Validation: Instant verification with comprehensive certificate details
- Professional Display: Beautiful UI showcasing certificate authenticity
- Database Integration: Robust backend with Row Level Security (RLS)
- Certificate Management: Support for multiple certificate types and statuses
- Google OAuth: Seamless authentication with Google Sign-In
- Supabase Integration: Modern backend-as-a-service for user management
- Profile Management: Enhanced user profiles with dynamic avatar generation
- Secure Sessions: Persistent authentication with automatic token refresh
- Responsive Design: Optimized for all devices and screen sizes
- Dark/Light Mode: Seamless theme switching with smooth transitions
- Smooth Animations: Framer Motion powered interactions and micro-animations
- Glassmorphism UI: Modern backdrop blur effects and translucent designs
- Auto-scrolling Testimonials: Community feedback with horizontal carousel
- Interactive Elements: Hover effects, loading states, and engaging interactions
- User Authentication: Secure login with Google OAuth and Supabase
- Dynamic Avatars: Random cartoon-style profile pictures for users without photos
- Profile Management: Personalized user profiles and preferences
- Project Gallery: Showcase and discover community projects
- Contributor Recognition: Highlight top contributors and team members
🌟 Exciting News...
🚀 This project is now an official part of GirlScript Summer of Code – GSSoC'25! 💃🎉💻 We're thrilled to welcome contributors from all over India and beyond to collaborate, build, and grow build-on-coffee! Let’s make learning and career development smarter – together! 🌟👨💻👩💻
👩💻 GSSoC is one of India’s largest 3-month-long open-source programs that encourages developers of all levels to contribute to real-world projects 🌍 while learning, collaborating, and growing together. 🌱
🌈 With mentorship, community support, and collaborative coding, it's the perfect platform for developers to:
- ✨ Improve their skills
- 🤝 Contribute to impactful projects
- 🏆 Get recognized for their work
- 📜 Receive certificates and swag!
🎉 I can’t wait to welcome new contributors from GSSoC 2025 to this build-on-coffee project family! Let's build, learn, and grow together — one commit at a time. 🔥👨💻👩💻
- Node.js (v16 or higher)
- npm or yarn package manager
- Supabase account (for authentication and certificate verification)
-
Clone the repository:
git clone https://github.com/anup2702/build-on-coffee.git cd build-on-coffee -
Install dependencies:
npm install
-
Environment Setup: Create a
.envfile in the root directory with the following variables:# Supabase Configuration VITE_SUPABASE_URL=your_supabase_project_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key # Example: # VITE_SUPABASE_URL=https://your-project-id.supabase.co # VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
-
Supabase Setup:
Step 1: Create Supabase Project
- Sign up at Supabase
- Create a new project
- Copy your project URL and anon key to the
.envfile
Step 2: Configure Google OAuth
- Go to Authentication > Providers in your Supabase dashboard
- Enable Google provider
- Add your Google OAuth credentials
- Set authorized redirect URIs
Step 3: Set up Certificate Database
- Go to SQL Editor in your Supabase dashboard
- Run the SQL commands from
supabase-certificates-setup.sql - This creates the certificates table and sample data
-
Start development server:
npm run dev
-
Open your browser: Visit http://localhost:5173
- Typography: Inter font family with proper hierarchy
- Color Palette: Consistent blue, emerald, and orange accent colors
- Spacing: 8px grid system for consistent layouts
- Shadows: Subtle shadows and hover effects
- Borders: Rounded corners and modern border styles
- Animated Logo: Coffee cup with steam animation and glow effects
- Smooth Transitions: 300ms cubic-bezier transitions throughout
- Hover States: Scale, color, and shadow animations
- Loading States: Skeleton loaders and smooth loading animations
- Glassmorphism Effects: Modern translucent design elements
- Mobile-First: Optimized for mobile devices
- Tablet Support: Adaptive layouts for medium screens
- Desktop Experience: Enhanced features for larger screens
- Touch Interactions: Optimized for touch devices
- React 18: Latest React features and hooks
- Vite: Fast build tool and development server
- Tailwind CSS: Utility-first CSS framework
- Framer Motion: Animation library for smooth interactions
- Supabase: Backend-as-a-Service for authentication and database
- PostgreSQL: Robust relational database
- Row Level Security: Secure data access policies
- Real-time Subscriptions: Live data updates
- Google OAuth: Social authentication with Google
- Supabase Auth: Modern authentication and user management
- Protected Routes: Secure access to user-specific features
- Session Management: Persistent authentication state
- Custom CSS Variables: Theme-aware color system
- Glass Morphism: Modern backdrop blur effects
- Gradient Animations: Dynamic color transitions
- Icon System: Lucide React icons throughout
- Dynamic Avatars: DiceBear API for random profile pictures
- ESLint: Code quality and consistency
- Prettier: Code formatting
- Git Hooks: Pre-commit linting and formatting
- Hero section with animated background elements
- Products showcase with modern card design
- Auto-scrolling testimonials carousel
- Community statistics and social proof
- Smooth scroll navigation
- Modern UI: Glassmorphism design with gradient effects
- Real-time Validation: Instant certificate verification
- Professional Display: Detailed certificate information
- Error Handling: Clear feedback for invalid certificates
- Responsive Design: Works perfectly on all devices
- Courses: Comprehensive CS course library
- Roadmaps: Interactive learning paths
- Project Ideas: Skill-level based project suggestions
- Free Certificates: Courses with free credentials
- Google Sign-In: One-click authentication
- Profile Management: Enhanced user profiles
- Dynamic Avatars: Random cartoon-style profile pictures
- Secure Sessions: Persistent login state
- Team Page: Meet the contributors
- Project Gallery: Community project showcase
- Contribute: How to get involved
- About: Platform mission and vision
CREATE TABLE certificates (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
certificate_id VARCHAR(50) UNIQUE NOT NULL,
recipient_name VARCHAR(255) NOT NULL,
certificate_type VARCHAR(100) NOT NULL,
role VARCHAR(255),
duration VARCHAR(100),
issued_by VARCHAR(255) DEFAULT 'Build On Coffee',
status VARCHAR(20) DEFAULT 'active',
issued_date DATE DEFAULT CURRENT_DATE,
expiry_date DATE,
-- Additional fields...
);- Row Level Security (RLS): Secure data access
- Public Read Access: Certificate verification without authentication
- Authenticated Write Access: Admin-only certificate management
- Input Validation: Sanitized data entry and queries
We welcome contributions from developers of all skill levels! Here's how you can help:
- Firstly Star (⭐) the Repository
- Fork the Repository
- create a new branch for any updates/changes/issue:
git checkout -b feature/amazing-feature - Start Coding and do changes.
- Commit with conventional commits:
git commit -m 'feat: add amazing feature' - Push to your branch:
git push origin feature/amazing-feature - Create a Pull Request which will be reviewed and suggestions would be added to improve it.
- Add Screenshots and updated website links to help us understand what changes is all about.
- UI/UX Improvements: Design enhancements and animations
- New Features: Additional learning resources or tools
- Bug Fixes: Issue resolution and improvements
- Documentation: README updates and code comments
- Performance: Optimization and performance improvements
- Certificate Management: Database schema and verification logic
- Authentication: Security improvements and new auth providers
- Follow the existing code style and conventions
- Add proper TypeScript types where applicable
- Include responsive design considerations
- Test on multiple devices and browsers
- Update documentation for new features
- Ensure database migrations are included for schema changes
Create a .env file in your project root with these variables:
# Supabase Configuration
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
# Optional: For development
NODE_ENV=development
- ✅ Google OAuth Authentication - Replaced Clerk with Supabase + Google OAuth
- ✅ Certificate Verification System - Complete verification system with database
- ✅ Enhanced UI/UX - Glassmorphism design and modern animations
- ✅ Dynamic Avatar System - Random cartoon-style profile pictures
- ✅ Database Integration - Supabase backend with PostgreSQL
- ✅ Responsive Design - Improved mobile and tablet experience
- ✅ Security Enhancements - Row Level Security and input validation
Report bugs and issues or propose improvements through our GitHub repository's "Issues" tab.
We welcome all contributions and suggestions! Whether it's a new feature, design improvement, or a bug fix - your voice matters 💜
Your insights are invaluable to us. Reach out to us team for any inquiries, feedback, or concerns.
- Thanks to all contributors of this project
- Special shoutout to GirlScript Summer of Code (GSSoC’25) for the amazing community and support!
- Built with dedication, collaboration, and lots of chai
- Community Contributors: All the amazing developers who contribute
- Open Source Tools: React, Vite, Tailwind CSS, Supabase, and other libraries
- Design Inspiration: Modern web design trends and best practices
- Coffee: For fueling our development sessions ☕
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: [email protected]
Feel free to reach out with any questions or feedback!
We love contributions from the community! Whether it's a bug report, a new feature, or a documentation improvement, we appreciate your help.
How to Contribute
- Fork the repository and create a new branch for your changes.
- Make your changes and ensure everything is working as expected.
- Submit a pull request with a clear description of your changes.
Found a Bug?
- Check the issue tracker to see if the bug has already been reported.
- If not, open a new issue and provide as much detail as possible.
Have a Feature Idea?
- We'd love to hear it! Open an issue to discuss your idea.
We welcome contributions from developers of all skill levels! Here are some ways you can contribute:
- 🐛 Bug fixes - Help us identify and fix bugs
- ✨ New features - Suggest and implement new functionality
- 📚 Documentation - Improve our docs and guides
- 🎨 UI/UX improvements - Make the platform more user-friendly
- 🔧 Performance optimizations - Help make build-on-coffee faster and more efficient
- 📱 Mobile responsiveness - Improve the mobile experience
- 🔒 Security enhancements - Help keep user data safe
Thank you to everyone who has made build-on-coffee better! 💚
Please refer to the Code of Conduct for details on contributing guidelines and community standards.
We love our contributors! If you'd like to help, please check out our CONTRIBUTING.md file for guidelines.
Thank you once again to all our contributors who has contributed to build-on-coffee! Your efforts are truly appreciated. 💖👏
See the full list of contributors and their contributions on the GitHub Contributors Graph.
Feel free to open issues or discussions if you have any feedback, feature suggestions, or want to collaborate!
If you find build-on-coffee project helpful, give it a star! ⭐ to support more such educational initiatives:
- ⭐ Starring the repository
- 🐦 Sharing on social media
- 💬 Telling your friends and colleagues
- 🤝 Contributing to the project
This project is licensed under the MIT License - see the License file for details.
 Anup Kumar 
|
| Role | Name | GitHub Profile | LinkedIn Profile |
|---|---|---|---|
| Mentor 1 | DIPAK THAKUR | dipak2005 | gecr-ai |
| Mentor 2 | MUSTAFA GOHAR | Mustafagohar | Mustafa |
Open an Issue | 🌟 Star on GitHub | 🚀 Live Demo
Ready to show off your coding achievements? Get started with build-on-coffee today! 🚀