Campus ID - Web3 Student Identity

• 

Project Story

Inspiration 💡

The inspiration for Campus ID came from recognizing a fundamental gap in how educational institutions manage student identity and campus engagement. Traditional student ID systems are centralized, lack portability, and offer no real incentives for active campus participation.

We asked ourselves: What if student credentials could be truly owned by students? What if campus engagement could be gamified through a token economy? This led us to envision a Web3-native solution where students have complete sovereignty over their academic identity while universities can foster more engaged communities.

What We Built 🚀

Campus ID is a comprehensive Web3 digital identity ecosystem built on StarkNet that revolutionizes how students interact with their campus environment. Our solution combines:

• NFT-based Student Certificates: Each student receives a unique, verifiable digital identity as an ERC721 token containing their avatar, name, and student ID
• Campus Token Economy (CPT): An ERC20 token system that rewards students for daily check-ins and enables participation in a virtual campus store
• Mobile-First H5 Interface: A responsive React application that provides seamless wallet integration via ArgentX
• Complete Transaction History: On-chain verifiable records of all student activities

The platform creates a self-contained ecosystem where students can earn, spend, and track their campus engagement through blockchain-verified interactions.

Technical Implementation 🛠️

Smart Contracts (Cairo 2024_07):

// StudentNFT - ERC721 Implementation
contract StudentNFT {
    function mint_student_nft(
        avatar_uri: ByteArray,
        student_name: ByteArray,
        student_id: ByteArray
    ) -> u256;

    function has_nft(account: ContractAddress) -> bool;
}

// CampusToken - ERC20 Implementation
contract CampusToken {
    function checkin_reward() -> ();
    function transfer(recipient: ContractAddress, amount: u256) -> bool;
}

Frontend Architecture:

• React 19 + TypeScript for robust type safety
• starknet.js v7 for seamless blockchain interaction
• Context-based state management (Wallet → App → Toast)
• Dual-mode architecture: Demo mode for instant testing, Production mode for live deployment

Key Design Patterns:

• Service abstraction layer for contract interactions
• Mock service implementation for offline development
• LocalStorage persistence for demo mode data
• Responsive H5 mobile design with CSS custom properties

Challenges We Overcame 🎯

1. Wallet Integration Complexity The biggest challenge was implementing seamless wallet integration in the StarkNet ecosystem. We solved this by:

• Building a robust WalletContext that handles connection states
• Implementing auto-reconnection logic
• Creating fallback demo mode for immediate user access

2. Contract Service Abstraction We needed to support both real contracts and mock services. Our solution:

• Created a unified service interface
• Implemented environment-based service selection
• Built comprehensive error handling and fallback mechanisms

3. User Experience in Web3 Web3 applications can be intimidating. We addressed this by:

• Designing an intuitive onboarding flow
• Providing clear visual feedback for all transactions
• Implementing loading states and success animations
• Building a complete demo mode that requires no blockchain knowledge

4. Mobile-First Design Campus life happens on mobile devices. We ensured:

• Responsive design that works on all screen sizes
• Touch-friendly interface elements
• Optimized performance for mobile browsers

What We Learned 📚

This project was a deep dive into the StarkNet ecosystem and taught us:

• Cairo Contract Development: The nuances of writing secure and efficient smart contracts in Cairo
• Account Abstraction: How ArgentX's account abstraction model creates superior user experiences
• Layer 2 Scaling: The practical benefits of StarkNet's low fees and high throughput
• Web3 UX Patterns: How to make blockchain interactions feel like traditional web applications
• Demo-First Development: The importance of having immediate access for showcasing Web3 functionality

Future Vision 🔮

Campus ID is just the beginning. We envision expanding to:

• Multi-campus support with unified credentials
• Achievement and badge systems for extracurricular activities
• DeFi integrations for student financial services
• Cross-chain compatibility with other blockchain networks
• Administrative dashboards for university management

Built With

• account-abstraction
• cairo
• context-api
• css3
• eslint
• h5mobile-firstdesign
• layer
• local-storage
• openzeppelin
• react
• reactrouterv7
• scarb
• sepoliatestnet
• starknet
• starknet.js
• typescript
• vite
• voyagerexplorer