This portfolio is created for learning and educational purpose with notJust․dev
- 🎯 Purpose
- 📸 Screenshots
- 📚 What did I learn with this project?
- 💻 Used Programs
- 📁 Folder Structure
- ※ Reference
This portfolio aims to deepen my understanding of backend logics using WatermelonDB, with the ultimate goal of successfully deploying a React Native app on Android and iOS devices, as well as learning about local DB and remote DB synchronization.
To get started with WatermelonDB in your Expo project, following these steps:
# Setup WatermelonDB: Install WatermelonDB by running
npm install @nozbe/watermelondb
npm install -D @babel/plugin-proposal-decorators# Add ES6 decorators support to `.babelrc` file:
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}# Prebuild for iOS and Android: Prebuilding WatermelonDB for both iOS and Android is necessary before using it in Expo app. This can be done by running
npx expo prebuild
# run iOS
npm run iOS
# run Android
npm run androidTo reduce traffic and enhance user experience, consider implementing a local first design:
- Local Data Storage: Store data locally on the device to minimize request to the remote database.
- Data Syncing: Set up data syncing with the remote database when necessary. This can be done using WatermelonDB's built-in syncing features.
Schema design is crucial for successful synchronization and foreign key management in relation databases:
-
Entity-Attribute-Value (EAV) Model: WatermelonDB uses an EAV model to store data, which allows for flexible schema design.
-
foreign Keys: use foreign keys to establish relationships between entities. This enables efficient data retrieval and updating.
For optimal performance and user experience:
- Reduce Traffic: Minimize requests to the remote database by storing data locally where possible.
- Optimize Schema Design: Ensure its schema design is optimized for data synchronization and querying.
- Use foreign Keys: Establish foreign keys to maintain relationship between entitles.
- Overview: Used for building native mobile apps, with TypeScript for added type safety and maintainability. This enables developers to create robust, scalable, and performant mobile applications.
- Libraries/ Frameworks used:
react-native,typescript,react-navigation
- Overview: Utilized for styling the application, providing a utility-first approach to build fast, consistent, and customizable user interfaces. This enables developers to create visually appealing and responsive UI components.
- Features: Customizable CSS classes, Pre-defined components, Responsive design
- Overview: Employed as a framework for managing the application's state and lifecycle, allowing for efficient and easy-to-use development of cross-platform mobile apps. This enables developers to focus on building the app's logic without worrying about the underlying complexities.
- Libraries/ Frameworks used:
expo,expo-sdk
- Overview: Used as an ORM (Object-Relational Mapping) library to interact with databases, simplifying the process of data storage and retrieval. This enables developers to focus on building business logic without worrying about database complexities.
- Features: Automatic schema management, SQL support, Type-safe queries
- Overview: Used as a PostgreSQL database service that provides a simple, GraphQL-based API and a beautiful web interface for managing your schema and data. This enables developers to create scalable, performant, and secure databases.
- Features: GraphQL-based API, Web interface, Automatic backups, Role-based access control
