Vertonet

A modern web platform for Vertonet, an organization dedicated to supporting women and non-binary individuals in the tech industry in Iceland. The platform provides event information, community resources, and networking opportunities.

🌟 About Vertonet

Vertonet combines "verto" (Latin for transformation) and "net" (network) to create a platform for women and non-binary individuals in various tech industry roles to connect, learn, and support each other. The organization aims to increase diversity in the tech field through events, projects, and community building.

✨ Features

• Multi-language Support: English and Icelandic translations
• Event Management: Integration with PredictHQ API for real-time events
• Interactive Chatbot: Assistance for website navigation and information
• Responsive Design: Modern, accessible UI built with Styled Components
• Registration System: Member registration and event signup functionality
• News Section: Latest updates and community news

🛠️ Tech Stack

• Frontend: Next.js 15, React 18, TypeScript
• Styling: Styled Components with custom theme system
• State Management: Zustand
• Internationalization: i18next with react-i18next
• Backend: Express.js server with API integrations
• APIs: PredictHQ (events)
• Database: MongoDB
• Deployment: Vercel-ready

📁 Project Structure

vertonet/
├── public/                 # Static assets
│   ├── resources/
│   │   ├── fonts/         # Custom fonts (Matter, Tobias)
│   │   ├── icons/         # SVG icons
│   │   ├── images/        # Project images
│   │   └── logos/         # Company logos
├── src/
│   ├── app/               # Next.js App Router
│   │   ├── actions/       # Server actions
│   │   ├── api/           # API routes
│   │   ├── um-okkur/      # About page
│   │   └── vidburdir/     # Events page
│   ├── components/        # React components
│   ├── lib/               # Utilities and configurations
│   │   ├── i18n/          # Internationalization
│   │   ├── services/      # API services
│   │   └── store/         # State management
│   ├── styles/            # Global styles and theme
│   └── types/             # TypeScript type definitions
├── vercel.json            # Vercel deployment configuration
└── package.json

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• MongoDB (for registration data)

Quick Start (Development)

1. Clone the repository

   git clone <repository-url>
   cd vertonet

2. Install dependencies

   npm install

3. Environment Setup Create a .env.local file in the root directory:

   # API Keys
   PREDINCTHQ_API_KEY=your_predicthq_api_key
   
   # Database
   MONGODB_URI=your_mongodb_connection_string
   
   # Environment
   NODE_ENV=development
   PORT=3001

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

Production Deployment

The application is configured for Vercel deployment with Next.js API routes:

Quick Setup:

1. Connect your repository to Vercel
2. Set environment variables in Vercel dashboard:
   • PREDINCTHQ_API_KEY
   • MONGODB_URI
3. Deploy automatically on push to main branch

📝 Available Scripts

• npm run dev - Start Next.js development server
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Run ESLint

🌐 Internationalization

The application supports English and Icelandic languages. Translation files are located in src/lib/i18n/translations/.

Adding New Translations

1. Add new keys to both en.json and is.json

2. Use the useTranslation hook in components:

   import { useTranslation } from "react-i18next";
   
   const { t } = useTranslation();
   const title = t("about.title");

🎨 Styling Guidelines

• Theme System: Colors, fonts, and spacing are defined in src/styles/theme.ts
• Styled Components: All styling uses Styled Components with theme integration
• Typography: Custom fonts (Matter, Tobias) from the public folder
• Units: Prefer rem units over px for responsive design
• Colors: All colors should be sourced from the theme

🔧 API Integrations

PredictHQ Events API

• Fetches real-time events for Iceland
• Fallback events when API is unavailable
• Supports filtering by category and date

Chatbot Service

• AI-powered assistance
• Context-aware responses about the community

📱 Pages

• Home (/) - Landing page with sections for about, events, companies, projects, news, and CTA
• About (/um-okkur) - Detailed information about Vertonet and board members
• Events (/vidburdir) - Upcoming and past events with registration

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is private and my proprietary, design is property of Edda Falak.

---