Vently Event Platform Development
Development guidelines and architecture rules for building Vently, a dynamic event discovery and community engagement platform.
Project Architecture
Vently is a full-stack application that centralizes event promotion and engagement within communities through an interactive map-based interface.
Tech Stack
**Frontend:** ReactJS with Tailwind CSS**Backend & Database:** Supabase**Payments:** Stripe integration**Maps:** Google Maps API**Code Quality:** ESLint (Airbnb React/JSX Style Guide)Core Features
Interactive event map with clickable pins for discoveryEvent and community management capabilitiesSecure ticket purchasing via payment gatewayUser role system (Regular Users, Event Organizers, Community Admins)Mobile-friendly responsive designFile Structure
When working with this codebase, follow this organization:
```
/frontend/
/components/
- MapView: Interactive event map display
- EventCard: Event detail presentation
- CommunityList: Community directory
- Additional modular UI components
/assets/
- Event images and icons
- Community profile pictures
/styles/
- Global Tailwind CSS styles
/backend/
/controllers/
- CRUD operations for events and communities
/models/
- Schema definitions (Events, Tickets, Users, Communities)
/routes/
- API endpoints for frontend-backend communication
/config/
- Environment variables and app settings
/tests/
- Unit and integration tests
```
Development Instructions
Setup and Environment
1. **Initial Setup**
- Clone the repository
- Run `npm install` to install all dependencies
- Configure environment variables in `/config/`
- Start development: `npm start` (launches frontend and backend)
2. **Testing**
- Execute test suite: `npm run test`
- Write tests for all new components and API endpoints
Coding Standards
**JavaScript & React**
Follow Airbnb React/JSX Style Guide strictlyUse ESLint for code quality enforcementMaintain consistent formatting across all files**Component Architecture**
Each component must follow single responsibility principleOrganize components by feature or route for clarityKeep components modular and reusableUse Context API or state management tools appropriately**File Organization**
Group related components in feature-based directoriesPlace shared utilities and hooks in common directoriesKeep assets organized by type and featureAccessibility Requirements
**WCAG Compliance**
Use semantic HTML elements appropriatelyImplement ARIA roles and labels for all interactive elementsEnsure color contrast meets WCAG standards (especially for synthe purple theme)Test keyboard navigation for all featuresUser Roles Implementation
When building features, consider these role-based permissions:
**Regular Users**
Browse events and communitiesRSVP to eventsPurchase ticketsParticipate in discussions**Event Organizers**
Create and manage eventsAccess event analytics (future feature)Moderate event-specific content**Community Admins**
Manage community settingsModerate community contentConfigure community-level permissionsKey Component Guidelines
**MapView Component**
Optimize map pin rendering for performanceImplement clustering for dense event areasEnsure touch interactions work smoothly on mobileHandle geolocation permissions gracefully**EventCard Component**
Display essential event information clearlyInclude visual hierarchy for dates, times, and locationsEnsure ticket availability is prominently shownImplement smooth transitions and hover states**CommunityList Component**
Support filtering and sortingLazy load community data for performanceDisplay community engagement metricsHandle empty states gracefullyBackend Integration
**API Communication**
Use consistent error handling across all API callsImplement loading states for asynchronous operationsCache frequently accessed data appropriatelyFollow RESTful conventions for endpoint design**Supabase Integration**
Use Supabase client consistentlyImplement real-time subscriptions where beneficialHandle authentication state properlyFollow row-level security best practices**Stripe Payment Integration**
Never expose secret keys in frontend codeImplement proper error handling for payment failuresProvide clear user feedback during payment processHandle webhooks securely on backendMobile-First Development
Design and test for mobile screens firstUse responsive breakpoints consistently (Tailwind defaults)Optimize touch targets (minimum 44x44px)Test on actual mobile devices regularlyConsider offline functionality where appropriateStyling with Tailwind CSS
Use Tailwind utility classes for consistencyCreate custom classes only when necessaryMaintain the synthe purple theme throughoutFollow mobile-first responsive design approachExtract repeated patterns into componentsCursor IDE Integration
This skill is optimized for Cursor AI:
Use Cursor's real-time code suggestions for React componentsLeverage AI assistance for Tailwind CSS class recommendationsLet Cursor help with Supabase query optimizationUse AI for generating test cases and accessibility improvementsExample Usage
When creating a new event management feature:
1. Create modular components in `/frontend/components/`
2. Follow Airbnb style guide and use ESLint
3. Implement role-based permissions checks
4. Add ARIA labels and ensure WCAG compliance
5. Create corresponding API endpoints in `/backend/routes/`
6. Write controller logic in `/backend/controllers/`
7. Add tests in `/tests/`
8. Test on mobile devices and various screen sizes
Constraints
All components must be mobile-responsivePayment processing must be PCI-compliant (use Stripe properly)User data must follow Supabase security policiesMap interactions must work on touch devicesMaintain consistent purple theme throughout applicationAll features must support the three defined user roles