An open API service indexing awesome lists of open source software.

https://github.com/ln0185/vertonet

This is a new website project for Vertonet.is
https://github.com/ln0185/vertonet

api chatbot database mongodb next react typescript

Last synced: 4 months ago
JSON representation

This is a new website project for Vertonet.is

Awesome Lists containing this project

README

          

# 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

```bash
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**

```bash
git clone
cd vertonet
```

2. **Install dependencies**

```bash
npm install
```

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

```env
# 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**

```bash
npm run dev
```

5. **Open your browser**
Navigate to [http://localhost:3000](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:

```tsx
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.

---