A modern, responsive website for the Entre Runners community in El Salvador - connecting passionate runners through organized training sessions, community events, and shared experiences.
- Responsive Design: Fully optimized for desktop, tablet, and mobile devices
- Dynamic Countdown Timer: Real-time countdown to the next training session
- Interactive Gallery: Carousel-based image gallery with pagination
- Contact Form: Email integration for user inquiries with automatic confirmation emails
- Training Schedule: Automatic calculation of next training sessions across multiple locations
- Google Maps Integration: Interactive maps with Waze and Google Maps navigation links
- Modern UI/UX: Clean, athletic design with custom fonts (Bebas Neue, Montserrat)
- Smooth Animations: CSS transitions, scroll-triggered carousel, rotating modal elements
- Advanced Form Validation: Real-time validation with visual error feedback
- Modal Feedback: Animated success modals with personalized messages
- Timezone-Aware Countdown: Automatic countdown calculation for El Salvador timezone
- Dynamic Content: Auto-updating maps and event details based on training schedule
- Touch-Friendly Navigation: Optimized for mobile interaction with swipe gestures
- HTML5: Semantic structure with accessibility considerations
- CSS3: Custom properties, Flexbox, Grid, responsive media queries
- JavaScript (ES6+): Modern vanilla JavaScript with DOM manipulation
- Google Fonts: Bebas Neue and Montserrat typography
- Node.js: Server-side JavaScript runtime
- Express.js v5.1.0: Web application framework with static file serving
- Google APIs v126.0.1: Google Drive integration for dynamic gallery
- Nodemailer v7.0.6: Email service integration with Gmail SMTP
- dotenv: Environment variable management
- CORS Middleware: Cross-origin request handling
- Google Drive API: Dynamic image gallery management with folder-based organization
- Gmail SMTP: Contact form email delivery with confirmation emails
- Google Maps Embed: Interactive location display with navigation links
- Google Calendar: Training event integration for calendar reminders
- Waze Integration: Direct navigation links for training locations
entre-runners/
├── backend/
│ ├── server.js # Express server with API endpoints
│ ├── package.json # Backend dependencies
│ ├── package-lock.json # Dependency lock file
│ └── .gitignore # Git ignore (node_modules, credentials, .env)
├── .vscode/
│ └── settings.json # VSCode configuration
├── img/ # Static images and assets
├── index.html # Main HTML structure
├── styles.css # Main stylesheet with responsive design
├── index.js # Frontend JavaScript functionality
├── site.webmanifest # PWA configuration
├── package.json # Root package.json for deployment
└── README.md # Project documentation
- GET /: Serves the main application
- GET /api/test: Server health check endpoint
- GET /api/gallery-images: Fetches images from Google Drive folder
- POST /api/contact: Handles contact form submissions with email delivery
- Node.js (v18 or higher)
- npm or yarn package manager
- Google Cloud Platform account (for Drive API)
- Gmail account (for email service)
-
Clone the repository
git clone [repository-url] cd entre-runners -
Install backend dependencies
cd backend npm install -
Environment Setup Create a
.envfile in thebackenddirectory:PORT=3000 GOOGLE_CREDENTIALS={"type":"service_account",...} # Your Google Service Account JSON EMAIL_USER=your-gmail@gmail.com EMAIL_PASS=your-app-password # Use Gmail App Password, not regular password EMAIL_TO=contact@entrerunners.com
-
Google Cloud Setup
- Create a Google Cloud project
- Enable Google Drive API
- Create a service account and download credentials JSON
- Share your Google Drive folder (ID: 1UIcXGf1M09J5wMORI9xjX0Sjd3B3MBA2) with the service account email
- Copy the service account JSON content to GOOGLE_CREDENTIALS env variable
-
Start the development server
npm start
-
Access the application Open
http://localhost:3000in your browser
The application automatically calculates the next training session based on a predefined schedule in index.js:
- Tuesday: 7:30 PM - Millennium Plaza
- Wednesday: 7:30 PM - Las Cascadas
- Thursday: 7:30 PM - Plaza Presidente
- Saturday: 6:00 AM - Multiplaza
Configure SMTP settings in your .env file. The system sends:
- Notification emails to administrators
- Confirmation emails to users
- Error handling for failed deliveries
Images are managed through Google Drive:
- Upload images to the specified Google Drive folder (ID: 1UIcXGf1M09J5wMORI9xjX0Sjd3B3MBA2)
- The API automatically fetches and displays them via googleapis
- Images are displayed in a responsive carousel with pagination dots
- Supports automatic grid layout (4x2 on desktop, 2x4 on mobile)
- Includes error handling for failed image loads
- CSS Variables: Color scheme defined in
:rootfor easy theming - Responsive Breakpoints: Mobile-first approach with 6 defined breakpoints
- Typography: Custom font loading (Bebas Neue, Montserrat) with system fallbacks
- Animation System: Scroll-triggered animations and hover effects
- Update training locations in the
trainingScheduleobject (index.js lines 410+) - Modify sponsor logos in the sponsors section of index.html
- Customize form validation rules in the
validateFormfunction - Update Google Drive folder ID in server.js for different image sources
- Modify countdown timer locations and times in the training schedule
The website is optimized for multiple screen sizes:
- Desktop (1200px+): Full layout with side-by-side content
- Laptop (992px-1199px): Adjusted font sizes and spacing
- Tablet (768px-991px): Stacked layouts for better readability
- Mobile Large (481px-767px): Single-column layout with touch-friendly elements
- Mobile Small (320px-480px): Compact design with essential features
- Extra Small (below 320px): Minimal layout for older devices
- Input validation: Both client-side and server-side form validation
- CORS configuration: Controlled cross-origin request handling
- Environment variables: Sensitive data protected in .env files
- Error handling: Graceful error handling without information leakage
- Email validation: Comprehensive email format and domain validation
- Rate limiting: Natural rate limiting through form submission flow
- Set production environment variables (Railway, Heroku, etc.)
- Configure HTTPS and SSL certificates
- Optimize images and compress assets
- Set up monitoring and error logging
- Configure custom domain and DNS
- Test email functionality in staging environment
- Verify Google Drive API quotas and limits
The application is configured for multiple platforms:
- Railway: Current production deployment (https://entre-runners-production.up.railway.app/)
- Heroku: Easy deployment with git integration
- Vercel: Excellent for static sites with serverless functions
- DigitalOcean: VPS deployment with full control
- Fork the repository
- Create a feature branch (
git checkout -b feature/new-feature) - Commit your changes (
git commit -am 'Add new feature') - Push to the branch (
git push origin feature/new-feature) - Open a Pull Request
This project is licensed under the ISC License - see the package.json file for details.
- Instagram: @entrerunners
- Facebook: Entre Runners El Salvador
Built with ❤️ for the running community in El Salvador