CivicSpark is a comprehensive civic engagement application built with React Native and Expo, designed to help users stay informed about elections, voting locations, and civic education. The app combines location-based services, real-time election data, and educational content to promote active civic participation.
- Interactive map showing nearby polling stations and voting locations
- Uses OpenStreetMap and Overpass API to locate voting facilities
- Get directions to voting locations with one tap
- Search functionality for specific voting locations
- Personalized election calendar based on your location
- Integration with Google Civic Information API
- Different election types (federal, state, local)
- Save election reminders for important dates
- Visual calendar interface with election indicators
- Comprehensive course library covering civic topics
- Interactive learning modules with quizzes
- Progress tracking and achievement system
- Certificate generation upon completion
- Sequential course unlocking system
- Final examination for certification
- Individual course quizzes to test knowledge
- Educational modules with interactive questions
- Certificate sharing functionality
- Curated news feed focused on civic topics
- RSS integration from trusted political sources
- Real-time updates on election news and voting information
- Professional certificate generation upon course completion
- Shareable digital certificates
- Personalized achievement recognition
- Certificate download and sharing capabilities
- Personalized user experience
- Name, avatar, and age preferences
- Dark mode support
- First-launch onboarding flow
- Secure storage for voting preferences
- Personalized voting tools (not implemented yet)
- Civic engagement tracking
- Ballot information retrieval
- PDF generation for voting materials
- Civic issue prioritization tools
- React Native - Cross-platform mobile development
- Expo - Simplified React Native development workflow
- Expo Router - File-based navigation system
- React Navigation - Screen navigation
- React Native Maps/Webview - Interactive map functionality
- AsyncStorage - Local data persistence
- Expo Location - Location services
- Framer Motion - Smooth animations
- Node.js/Express - Server-side proxy API
- Google Civic Information API - Official election data
- OpenStreetMap/Overpass API - Location and map data
- RSS-to-JSON service - News aggregation
- Linear Gradients - Modern aesthetic design
- Bottom Navigation - Intuitive app navigation
- Material Design - Consistent UI elements
- Responsive Layout - Works across devices
- Node.js (v16 or higher)
- Expo CLI (or use Expo Go app on your mobile device)
- A Google Civic Information API key
- Clone the repository:
git clone <repository-url>
cd civicspark- Install frontend dependencies:
npm install- Navigate to the backend directory and install dependencies:
cd backend
npm install- Set up environment variables:
# In the backend directory, create .env file:
CIVIC_API_KEY=your_google_civic_api_key_here
PORT=3000- Start the backend server:
cd backend
npm run dev- In a new terminal, start the Expo app:
# From the root directory
npm start- Scan the QR code with the Expo Go app on your phone or run on an emulator.
The app requires the following environment variables:
Frontend (in project root):
EXPO_PUBLIC_API_LINK=http://localhost:3000 (or your deployed backend URL)
Backend (in backend directory):
CIVIC_API_KEY=your_google_civic_api_key
PORT=3000
civicspark/
├── app/ # Expo Router app structure
│ ├── (tabs)/ # Main tab screens
│ │ ├── _layout.tsx # Tab navigation layout
│ │ ├── calendar.tsx # Elections calendar
│ │ ├── certificate.tsx # Achievement certificate
│ │ ├── home.tsx # Home dashboard
│ │ ├── map.tsx # Voting location map
│ │ ├── myvote.tsx # Voting preferences
│ │ ├── settings.tsx # User settings
│ │ └── ethics/ # Civic education courses
│ │ ├── index.tsx # Ethics course listing
│ │ ├── [id].tsx # Individual course detail
│ │ ├── certificate.tsx # Ethics certificate
│ │ ├── final-quiz.tsx # Final examination
│ │ ├── course-quiz/[id].tsx # Course quizzes
│ │ └── module/[id].tsx # Learning modules
│ ├── index.tsx # Main app entry point
│ └── welcome.tsx # Onboarding flow
├── backend/ # Node.js/Express API server
│ ├── server.js # Main server file
│ └── package.json # Backend dependencies
├── assets/ # Images, fonts, and other assets
├── components/ # Reusable UI components
├── hooks/ # Custom React hooks
└── lib/ # Shared utilities and data
- Home Tab - Dashboard with quick access to all features
- Map Tab - Interactive map for finding voting locations
- Calendar Tab - Election dates and reminders
- Ethics Tab - Civic education courses and learning
- Ethics Index - Course listing and progress tracking
- Course Detail - Individual course modules and progress
- Module Detail - Interactive learning modules with questions
- Course Quiz - Quizzes to test knowledge after each course
- Final Quiz - Comprehensive examination for certification
- Certificate - Achievement certificate upon completion
- Certificate Tab - Achievement certificate display and sharing
- My Vote Tab - Voting preferences and tools
- Settings Tab - Account and app settings
The backend serves as a proxy server for the Google Civic Information API to:
- Retrieve voter information by address
- Fetch upcoming elections
- Get representative information
- Handle rate limiting and security
- Uses Overpass API for voting location data
- Interactive map with custom markers
- Location-based search functionality
CivicSpark follows a clean, modern design approach with:
- Dark and light mode support
- Intuitive navigation patterns
- Accessible color schemes
- Responsive layouts
- Consistent typography
- Meaningful iconography
We welcome contributions to CivicSpark! To contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Make your changes
- Add tests if applicable
- Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow React Native best practices
- Maintain consistent UI/UX across the app
- Write clean, well-documented code
- Test on both iOS and Android
- Handle error states gracefully
This project is licensed under the MIT License - see the LICENSE file for details.
For support, please open an issue in the GitHub repository.
CivicSpark was created to address the critical need for accessible civic education and engagement tools. The app aims to make civic participation easier for all citizens by providing a comprehensive platform for election information, voting location services, and civic education.
Built with ❤️ for civic engagement