ScriptBardApp is a mobile application developed for Islamic Relief South Africa. It empowers users to make a difference by providing access to a variety of donation opportunities, allowing them to support specific causes, countries, and communities in need. Built with React Native and a secure backend, ScriptBardApp ensures that every contribution reaches those who need it most while providing useful tools and updated stories from relief areas.
- 🚀 Features
- 📥 Installation
- 📱 Using ScriptBardApp
- 📚 API Endpoints
- 🔧 Environment Variables
- 🧪 Testing
- 🛠 Technologies Used
- 🔒 Security Considerations
- 📜 License
- 🙌 Acknowledgments
ScriptBardApp provides users with the following impactful features:
-
Explore Donation Pages: Browse various causes and countries in need, choosing specific relief efforts to support.
-
Personalized Giving: Select a country or cause, track contributions, and see updates on your supported causes.
-
News, Blogs, and Media: Stay informed with up-to-date stories posted by admins, view inspiring images and videos, and read blogs directly in the app.
-
Zakat Calculator: A built-in calculator helps users calculate their Zakat based on personal assets.
-
Website Navigation for Donations: Complete donations seamlessly by navigating to Islamic Relief South Africa’s website.
-
User-Friendly Interface: Designed for quick navigation and ease of use, so users can engage with stories and make donations with minimal hassle.
-
Ensure that Node.js and React Native CLI are installed.
-
Set up a MongoDB database or other compatible backend database.
git clone:
-
cd ScriptBardApp/backend Install Dependencies:
Set up MongoDB and configure your .env file with the necessary MongoDB URI and other variables.
Place your .env file in the backend folder (see Environment Variables).
- cd /backend
- node server.js
- The server will run on http://localhost:5000 by default.
- cd /my-strapi-project
- npm run develop
- npx expo start
- you can choose to run the simulator by pressing a or run it on your ios device by scanning the QR code
When running the app on an emulator or a physical device, ensure to update the IP address in the configuration file to match your machine’s local network IPv4 address.
Configure API URLs for Emulator or Device To ensure your app connects properly to the backend while running on an emulator or physical device, update the IP address in the config file to match your machine's local IPv4 address.
Steps to Update:
-
Open the config file.
-
Replace <YOUR_IPV4_ADDRESS> with your machine’s actual IPv4 address (e.g., 192.168.0.105).
- Update these URLs with your machine's local IPv4 address for correct network access
const config = {
apiUrl: 'http://<YOUR_IPV4_ADDRESS>:5000', **Backend server URL**
strapiUrl: 'http://<YOUR_IPV4_ADDRESS>:8080', **Strapi server URL**
};
export default config;
- Note: You can find your IPv4 address by running ipconfig on Windows or ifconfig on macOS/Linux.
ScriptBardApp allows users to browse and donate to various causes:
-
Country-Specific Donations: Explore pages for each country in need and see details about the current relief efforts.
-
Cause-Based Donations: Choose from various causes, such as emergency relief, education, health, and shelter.
-
Quick Donation Access: Each page provides options to donate immediately, helping users make a difference in moments.
ScriptBardApp ensures that every donation journey is meaningful:
-
Choose Causes or Regions: Select specific needs or regions close to your heart.
-
Track Contributions: Keep a history of your donations to see the impact of your support.
-
Updates on Supported Causes: Receive updates about the progress of relief efforts for the causes you support.
Stay connected and inspired by the global community:
-
Current News: Read stories and news related to ongoing projects.
-
Media Library: Access photos, videos, and reports from relief areas to see the impact firsthand.
-
Shareable Content: Easily share inspiring stories and news to encourage friends and family to support.
ScriptBardApp keeps each user’s information secure and accessible:
-
Secure Login and Logout: Users can log in to access donation history and personalized recommendations.
-
Profile Management: View and update personal information.
-
Session Management: Provides secure sessions for a private and uninterrupted experience.
-
POST /signup: Registers a new user account.
-
POST /login: Authenticates user credentials and starts a session.
-
GET /user/profile: Retrieves current profile details.
-
PUT /user/profile: Updates user profile information.
-
POST /newsletter-signup: Adds a user to the newsletter subscription list.
Create a .env file in the backend directory with the following variables:
MONGO_URI=mongodb+srv://username:password@cluster0.mongodb.net/test?retryWrites=true&w=majority
SESSION_SECRET=your_session_secret PORT=5000 # Optional, defaults to 5000
Run tests to ensure all donation, login, and profile management functionalities are secure:
- npm test
-
React Native - Cross-platform mobile framework
-
Node.js - JavaScript runtime for building scalable network applications.
-
Express.js - Web framework for Node.js
-
MongoDB & Mongoose - Database and schema modeling
-
bcrypt - Library for password hashing
-
Mocha & Chai - Testing framework and assertion library
-
Supertest - HTTP assertions for integration testing
-
Jest - Testing framework for React Native and backend APIs
-
Password Hashing: Uses bcrypt to securely hash user passwords.
-
Environment Variables: Sensitive information, like MongoDB URI and session secret, should be stored in a .env file.
-
Session Management: Manages user sessions securely with express-session.
This project is licensed under the MIT License.
We, as a team, are incredibly grateful for the opportunity to develop ScriptBardApp in partnership with Islamic Relief South Africa. This project has been a collaborative journey, fueled by our shared commitment to creating a platform that allows users to make impactful contributions where they’re needed most.
1. Progress Bar Warning Issue: During testing, a warning message appeared regarding the progress bar implementation. The issue stemmed from improper usage of state management. Fix: Updated the progress bar logic to correctly handle state changes and ensure smooth animations. 2. Image Displaying Incorrectly Issue: Certain images in the application displayed incorrectly due to incorrect aspect ratio settings. Fix: Modified the styling and added responsive design rules to ensure images adapt to various screen sizes. 3. Menu Bar Not Responsive Issue: The menu bar did not respond well to touch inputs on smaller devices. Fix: Adjusted the touch event handlers and added media queries to improve responsiveness across all devices. 4. Emulator Crashes on Startup Issue: The application occasionally crashed when launched on an Android emulator. This was caused by misconfigured dependencies and memory allocation issues. Fix: Updated the emulator settings and optimized the app initialization process to prevent crashes.
Conclusion The above issues were identified during the prototype phase and were successfully resolved to enhance the application's stability, responsiveness, and usability. The finalized system is now ready for deployment and user testing.