Vently Event Platform Development
Development assistant for Vently, a mobile-friendly platform that centralizes event promotion and engagement within communities.
Project Overview
Vently is a dynamic platform featuring:
Interactive event map with clickable pins for discoveryEvent and community management capabilitiesSecure ticket purchasing via Stripe integrationUser roles (Regular Users, Event Organizers, Community Admins)Community discussions and engagement features**Tech Stack:**
Frontend: ReactJS with Tailwind CSSBackend & Database: SupabasePayment Integration: StripeLocation Services: Google Maps APIInstructions
When working on Vently development tasks, follow these guidelines:
1. Understand Project Structure
The codebase is organized as follows:
`/frontend/` - All frontend code - `/components/` - UI components (MapView, EventCard, CommunityList, etc.)
- `/assets/` - Event images, icons, community profile pictures
- `/styles/` - Global Tailwind CSS styles
`/backend/` - All backend code - `/controllers/` - CRUD operations for events and communities
- `/models/` - Schema definitions (Events, Tickets, Users, Communities)
- `/routes/` - API endpoints
`/config/` - Environment variables and settings`/tests/` - Unit and integration tests2. Follow Coding Standards
**JavaScript & React:**
Follow the Airbnb React/JSX Style Guide strictlyUse `eslint` for styling enforcement and error preventionOrganize component files by feature or route for clarityMaintain single responsibility principle for each componentUse modular, reusable components**State Management:**
Utilize React Context API where appropriateConsider third-party state management tools for complex state needs3. Component Development
When creating or modifying components:
Keep components modular with single responsibilityOrganize by feature or routeUse consistent naming conventionsImplement proper prop validationWrite corresponding tests for each component**Key Components:**
`MapView` - Displays events on interactive map`EventCard` - Presents event details in card format`CommunityList` - Displays community listings4. User Roles Implementation
Ensure proper role-based functionality:
**Regular Users:**
Browse events and communitiesRSVP to eventsPurchase tickets**Event Organizers:**
Create and manage eventsAccess event-related analytics (future feature)**Community Admins:**
Manage community settingsModerate content5. Accessibility Requirements
Always implement accessibility best practices:
Use appropriate ARIA roles for componentsEnsure color contrast meets WCAG standardsTest with the synthe purple theme for complianceProvide keyboard navigation supportAdd descriptive alt text for images6. Development Workflow
**Setup:**
```bash
Clone and install dependencies
npm install
Start development servers
npm start
```
**Testing:**
```bash
Run test suite
npm run test
```
**Code Quality:**
Use Cursor AI for real-time code suggestionsRun eslint before committingWrite unit and integration tests for new features7. Integration Points
**Supabase:**
Use for all database operationsFollow schema definitions in `/backend/models/`Implement proper error handling**Stripe:**
Secure payment processing for ticket purchasesHandle webhooks for payment confirmationTest with Stripe test mode**Google Maps API:**
Display event locations on interactive mapImplement clickable pins for event discoveryHandle geolocation features8. Best Practices
Write clean, self-documenting codeAdd comments for complex logic onlyKeep functions small and focusedUse meaningful variable and function namesImplement proper error handling and loggingConsider mobile-first responsive designOptimize performance for map rendering and large event lists9. Before Committing
Run `npm run test` and ensure all tests passCheck eslint complianceVerify accessibility standardsTest on mobile viewportReview code against style guideExamples
**Creating a New Event Component:**
```javascript
// components/EventCard.jsx
import React from 'react';
import PropTypes from 'prop-types';
const EventCard = ({ event }) => {
return (
<div className="event-card" role="article" aria-label={`Event: ${event.title}`}>
<img src={event.image} alt={event.title} />
<h3>{event.title}</h3>
<p>{event.description}</p>
</div>
);
};
EventCard.propTypes = {
event: PropTypes.shape({
title: PropTypes.string.isRequired,
description: PropTypes.string,
image: PropTypes.string
}).isRequired
};
export default EventCard;
```
Constraints
All code must pass eslint validationComponents must be accessible (WCAG compliant)Mobile-first responsive design is mandatoryAll payment integrations must use test mode in developmentFollow Airbnb style guide without exceptions