EvoLabs Web App

A modern web application built with Next.js, TypeScript, and Web3Auth for decentralized authentication.

Features

• Web3Auth Integration: Decentralized authentication with multiple wallet providers
• Client-side Persistence: Secure session management using Zustand with localStorage
• Modern UI: Built with Tailwind CSS and Shadcn UI components
• TypeScript: Full type safety throughout the application

Authentication System

This application uses Web3Auth for decentralized authentication with Zustand for client-side state management. The authentication flow works as follows:

1. Web3Auth Integration: Users can connect their wallets through Web3Auth
2. Client-Side Storage: User sessions are persisted in localStorage with Zustand
3. Cross-Tab Synchronization: Authentication state syncs across browser tabs
4. Client-Side Hooks: React hooks provide easy access to authentication state

Authentication Hooks

• useAuthStore(): Main authentication store for client components
• useWeb3AuthConnect(): Web3Auth connection management
• useWeb3AuthUser(): Web3Auth user information
• useWeb3AuthDisconnect(): Web3Auth disconnect functionality

API Endpoints

Route	Method	Description
/api/auth	POST	Sign in a user (Web3Auth)
/api/auth	DELETE	Sign out the current user
/api/auth	GET	Get the current session
/api/projects	GET	(Stub/Planned) Fetch projects (currently commented out)
/api/users/[walletAddress]	GET	Fetch proposals reviewed by a user (by wallet address)
/api/proposals	GET	List proposals (supports pagination)
/api/proposals/create	POST	Create a new proposal
/api/proposals/[id]	GET	Get a proposal by ID
/api/proposals/[id]	DELETE	Delete a proposal by ID
/api/proposals/[id]/publish	POST	Publish a proposal
/api/proposals/[id]/rubric-answer	POST	Submit a rubric answer for a proposal
/api/proposals/[id]/rubric-results	GET	Get rubric results for a proposal
/api/proposals/[id]/scientific-review	POST	Submit a scientific review for a proposal
/api/proposal-templates	GET	Get available proposal templates
/api/proposals/upload	POST	Upload files related to proposals

Environment Variables

Create a .env.local file with the following variables:

# NextJS
SITE_NAME=
SITE_URL=
NEXT_PUBLIC_APP_URL=
API_BASE_URL=

# Web3Auth handles authentication - no additional auth env vars needed

# Web3Auth (Client-side variables)
NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser and navigate to http://localhost:3000

Project Structure

src/
├── app/                   # Next.js App Router
│   ├── api/               # API routes
│   ├── (site)/            # Main site pages
│   └── hooks/             # Custom React hooks
├── components/            # Reusable UI components
├── config/                # Configuration files
├── fonts/                 # Custom fonts
├── interfaces/            # TypeScript interfaces
├── libs/                  # Utility libraries
├── services/              # Business logic services
├── staticData/            # Static data files
├── styles/                # Global styles
├── types/                 # TypeScript types
├── utils/                 # Utility functions
└── middleware.ts          # Middleware for session management

App Routes

Route	Description
/	Home page
/auth/signin	Sign in with Web3Auth
/user	User dashboard/profile
/proposals	List all proposals
/proposals/create	Create a new proposal
/proposals/[id]	View a specific proposal
/proposals/[id]/edit	Edit a specific proposal
/constitution	View the EvoLabs constitution
/faq	Frequently Asked Questions
/contact	Contact page
/whitepaper	View the EvoLabs whitepaper
/projects	List of projects (if implemented)

Authentication Flow

1. User clicks "Sign In" → Web3Auth modal opens
2. User connects wallet → Web3Auth provides user data
3. User data processed → Zustand store updates with user information
4. State persisted → Authentication state saved to localStorage
5. User redirected → To protected dashboard/user area
6. Cross-tab sync → Authentication state syncs across browser tabs

Security Features

• Web3Auth Security: Leverages Web3Auth's built-in security features
• Client-Side Validation: Authentication state validated on the client
• Wallet Integration: Secure wallet connection and management
• Token Management: Web3Auth handles token lifecycle
• Cross-Tab Synchronization: Consistent authentication state across tabs

Development

Adding Protected Routes

// In middleware.ts
const protectedRoutes = ['/user', '/proposals/create', '/dashboard'];

Using Authentication in Components

// Client components
import { useAuth } from '@/app/hooks/useAuth';

function MyComponent() {
  const { user, isAuthenticated, signOut } = useAuth();
  
  if (!isAuthenticated) {
    return <div>Please sign in</div>;
  }
  
  return <div>Welcome, {user?.name}!</div>;
}

// Server components
import { requireAuth } from '@/libs/serverAuth';

async function ServerComponent() {
  const session = await requireAuth();
  return <div>Welcome, {session.user?.name}!</div>;
}

Deployment

The application is ready for deployment on platforms like Vercel, Netlify, or any Node.js hosting service. Make sure to:

1. Set all required environment variables
2. Configure your database connection
3. Set up Web3Auth client ID for production
4. Configure Web3Auth network settings

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

TBD