1b3793447a
- Added Tailwind CSS configuration with custom theme colors and animations. - Created global styles in index.css including custom scrollbar and button components. - Set up main entry point in main.tsx to render the App component. - Configured TypeScript with strict settings and path mapping. - Added support for high contrast mode and reduced motion in styles. - Included print styles for better printing experience.
286 lines
18 KiB
Markdown
286 lines
18 KiB
Markdown
# Miracles In Motion - Public Website
|
|
|
|
The official website for Miracles In Motion, a 501(c)3 non-profit organization dedicated to creating positive change in our community through compassionate action and support.
|
|
|
|
## 🌟 About Miracles In Motion
|
|
|
|
Miracles In Motion is a registered 501(c)3 non-profit organization committed to making a meaningful difference in the lives of individuals and families in need. Through our various programs and initiatives, we strive to provide hope, support, and resources to those who need it most.
|
|
|
|
## 🚀 Website Features
|
|
|
|
- **Responsive Design**: Fully optimized for desktop, tablet, and mobile devices
|
|
- **Modern UI/UX**: Built with React and Tailwind CSS for a clean, professional appearance
|
|
- **Donation Integration**: Secure donation processing with multiple payment options
|
|
- **Volunteer Portal**: Easy volunteer registration and opportunity management
|
|
- **Impact Stories**: Showcase of real stories and testimonials from those we've helped
|
|
- **Transparency**: Financial reports and organizational information readily available
|
|
- **Accessibility**: Designed with WCAG 2.1 AA compliance in mind
|
|
- **SEO Optimized**: Structured data and meta tags for better search visibility
|
|
|
|
## 🛠 Technology Stack
|
|
|
|
- **Build Tool**: Vite 4.5+ with Hot Module Replacement
|
|
- **Frontend**: React 18 with TypeScript
|
|
- **Styling**: Tailwind CSS with custom design system
|
|
- **Animations**: Framer Motion for smooth interactions
|
|
- **Icons**: Lucide React for consistent iconography
|
|
- **Deployment**: GitHub Pages with automated builds
|
|
- **Analytics**: Google Analytics integration ready
|
|
- **Forms**: Accessible form handling with validation
|
|
- **SEO**: Open Graph tags and structured data
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
miracles_in_motion/
|
|
├── README.md # Project documentation
|
|
├── package.json # Dependencies and scripts
|
|
├── tsconfig.json # TypeScript configuration
|
|
├── vite.config.ts # Vite build configuration
|
|
├── tailwind.config.cjs # Tailwind CSS configuration
|
|
├── postcss.config.cjs # PostCSS configuration
|
|
├── .eslintrc.cjs # ESLint configuration
|
|
├── .gitignore # Git ignore rules
|
|
├── .env.example # Environment variables template
|
|
├── index.html # Main HTML entry point
|
|
├── public/ # Static assets
|
|
│ ├── favicon.svg # Website favicon
|
|
│ ├── og-image.png # Open Graph image
|
|
│ ├── robots.txt # Search engine directives
|
|
│ └── site.webmanifest # PWA manifest
|
|
├── src/ # Source code
|
|
│ ├── main.tsx # Vite entry point
|
|
│ ├── index.css # Global styles & Tailwind
|
|
│ ├── App.tsx # Complete React application
|
|
│ ├── assets/ # Static assets for bundling
|
|
│ │ └── logos/ # Brand assets
|
|
│ ├── lib/ # Utility libraries
|
|
│ │ ├── analytics.ts # Analytics integration
|
|
│ │ └── routing.ts # Hash routing utilities
|
|
│ └── components/ # Reusable components (optional)
|
|
│ ├── LogoMark.tsx
|
|
│ ├── Nav.tsx
|
|
│ ├── Footer.tsx
|
|
│ ├── ui/ # Shared UI components
|
|
│ └── pages/ # Page components
|
|
│ ├── HomePage.tsx
|
|
│ ├── DonatePage.tsx
|
|
│ ├── VolunteerPage.tsx
|
|
│ ├── SponsorsPage.tsx
|
|
│ ├── StoriesPage.tsx
|
|
│ ├── TestimoniesPage.tsx
|
|
│ └── LegalPage.tsx
|
|
├── scripts/ # Build and utility scripts
|
|
│ └── generate-og.mjs # Open Graph image generator
|
|
├── assets/ # External assets (not bundled)
|
|
│ ├── images/ # Photos and graphics
|
|
│ └── documents/ # PDFs and legal documents
|
|
└── docs/ # Additional documentation
|
|
```
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Prerequisites
|
|
- Node.js (v18 or higher recommended)
|
|
- npm or yarn or pnpm
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone https://github.com/Miracles-In-Motion/public-web.git
|
|
cd public-web
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Copy environment variables:
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
4. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
5. Open your browser to `http://localhost:3000`
|
|
|
|
### Development Scripts
|
|
|
|
```bash
|
|
# Start development server with HMR
|
|
npm run dev
|
|
|
|
# Build for production
|
|
npm run build
|
|
|
|
# Preview production build locally
|
|
npm run preview
|
|
|
|
# Lint code with ESLint
|
|
npm run lint
|
|
|
|
# Generate Open Graph images
|
|
node scripts/generate-og.mjs
|
|
|
|
# Deploy to GitHub Pages
|
|
npm run deploy
|
|
```
|
|
|
|
### Building for Production
|
|
|
|
```bash
|
|
# Full production build
|
|
npm run build
|
|
|
|
# The built files will be in the `dist/` directory
|
|
```
|
|
|
|
### Deployment
|
|
|
|
The site is configured for GitHub Pages deployment:
|
|
|
|
```bash
|
|
# Build and deploy to GitHub Pages
|
|
npm run deploy
|
|
|
|
# Manual deployment
|
|
npm run build
|
|
# Then upload the `dist/` folder to your hosting provider
|
|
```
|
|
|
|
## 📄 Pages & Features
|
|
|
|
### Main Pages
|
|
- **Home**: Organization overview, mission, and call-to-action
|
|
- **About**: Detailed information about our mission, vision, and values
|
|
- **Programs**: Our various initiatives and programs
|
|
- **Get Involved**: Volunteer opportunities and how to help
|
|
- **Donate**: Secure donation processing with impact information
|
|
- **Contact**: Contact forms and location information
|
|
- **News & Updates**: Latest news, events, and announcements
|
|
|
|
### Special Features
|
|
- **Impact Dashboard**: Real-time statistics and achievements
|
|
- **Volunteer Portal**: Registration and opportunity matching
|
|
- **Sponsor Recognition**: Corporate sponsor acknowledgments
|
|
- **Testimonials**: Real stories from beneficiaries
|
|
- **Annual Reports**: Transparency in operations and finances
|
|
- **Event Calendar**: Upcoming events and fundraisers
|
|
|
|
## 🎨 Customization
|
|
|
|
### Colors
|
|
The site uses a cohesive color palette defined in the CSS:
|
|
- Primary: #667eea (Purple-Blue)
|
|
- Secondary: #764ba2 (Deep Purple)
|
|
- Accent: Various shades for highlights and CTAs
|
|
|
|
### Content Management
|
|
- Edit content directly in `mim_web.jsx`
|
|
- Images should be placed in `assets/images/`
|
|
- Documents in `assets/documents/`
|
|
|
|
### Donation Integration
|
|
The donation system is set up to integrate with:
|
|
- PayPal
|
|
- Stripe
|
|
- Network for Good
|
|
- Other major donation processors
|
|
|
|
## 🔧 Configuration
|
|
|
|
### Environment Variables
|
|
Create a `.env` file for sensitive configurations:
|
|
|
|
```env
|
|
REACT_APP_DONATION_ENDPOINT=your_donation_api
|
|
REACT_APP_ANALYTICS_ID=your_google_analytics_id
|
|
REACT_APP_CONTACT_EMAIL=contact@miraclesinmotion.org
|
|
```
|
|
|
|
### Analytics
|
|
Google Analytics is integrated and ready to track:
|
|
- Page views
|
|
- Donation conversions
|
|
- Volunteer sign-ups
|
|
- Contact form submissions
|
|
|
|
## 📱 Mobile Optimization
|
|
|
|
The site is fully responsive with:
|
|
- Mobile-first design approach
|
|
- Touch-friendly navigation
|
|
- Optimized images for different screen sizes
|
|
- Fast loading times on mobile networks
|
|
|
|
## ♿ Accessibility
|
|
|
|
We're committed to accessibility:
|
|
- ARIA labels and roles
|
|
- Keyboard navigation support
|
|
- High contrast mode compatibility
|
|
- Screen reader optimization
|
|
- Alt text for all images
|
|
|
|
## 🤝 Contributing
|
|
|
|
We welcome contributions! Please:
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch
|
|
3. Make your changes
|
|
4. Test thoroughly
|
|
5. Submit a pull request
|
|
|
|
## 📞 Support
|
|
|
|
For website issues or questions:
|
|
- Email: web@miraclesinmotion.org
|
|
- Phone: (555) 123-4567
|
|
- GitHub Issues: [Report a bug](https://github.com/Miracles-In-Motion/public-web/issues)
|
|
|
|
## 📄 Legal
|
|
|
|
### 501(c)3 Status
|
|
Miracles In Motion is a registered 501(c)3 non-profit organization.
|
|
- EIN: [Your EIN Number]
|
|
- State Registration: [Your State Registration]
|
|
|
|
### Privacy Policy
|
|
We are committed to protecting your privacy. See our full [Privacy Policy](assets/documents/privacy-policy.pdf).
|
|
|
|
### Terms of Service
|
|
By using this website, you agree to our [Terms of Service](assets/documents/terms-of-service.pdf).
|
|
|
|
## 📊 Performance
|
|
|
|
The website is optimized for:
|
|
- **Page Speed**: <3 second load times
|
|
- **SEO**: Structured data and meta optimization
|
|
- **Lighthouse Score**: 90+ across all metrics
|
|
- **Core Web Vitals**: Excellent ratings
|
|
|
|
## 🔄 Updates & Maintenance
|
|
|
|
- **Content Updates**: Monthly review of all content
|
|
- **Security Updates**: Quarterly security audits
|
|
- **Performance Monitoring**: Continuous monitoring
|
|
- **Backup Strategy**: Daily automated backups
|
|
|
|
---
|
|
|
|
## 💖 Our Mission
|
|
|
|
*"At Miracles In Motion, we believe that every act of kindness creates a ripple effect of positive change. Through compassionate action and community support, we work to transform lives and build a better tomorrow for all."*
|
|
|
|
---
|
|
|
|
**Miracles In Motion** | 501(c)3 Non-Profit Organization
|
|
Creating Hope • Inspiring Change • Building Community
|
|
|
|
© 2024 Miracles In Motion. All rights reserved. |