{"id":21826862,"url":"https://github.com/jsdeveloperr/backend-for-frontend-architecture","last_synced_at":"2026-04-09T23:32:54.050Z","repository":{"id":264899394,"uuid":"894039925","full_name":"jsdeveloperr/backend-for-frontend-architecture","owner":"jsdeveloperr","description":"This architecture is designed to support separate backends for different frontend clients (web, mobile, etc.), ensuring tailored responses and performance optimization.","archived":false,"fork":false,"pushed_at":"2024-11-26T17:27:26.000Z","size":501,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T08:26:28.369Z","etag":null,"topics":["backend","backendforfrontend","bff","expressjs","frontend","mobile","react","react-native"],"latest_commit_sha":null,"homepage":"https://medium.com/@abdulnasirolcan/backend-for-frontend-bff-architecture-8f9bcec0e9ad","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsdeveloperr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-25T16:38:01.000Z","updated_at":"2024-11-26T17:27:30.000Z","dependencies_parsed_at":"2024-11-26T18:34:48.718Z","dependency_job_id":null,"html_url":"https://github.com/jsdeveloperr/backend-for-frontend-architecture","commit_stats":null,"previous_names":["jsdeveloperr/backend-for-frontend-architecture"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fbackend-for-frontend-architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fbackend-for-frontend-architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fbackend-for-frontend-architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fbackend-for-frontend-architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdeveloperr","download_url":"https://codeload.github.com/jsdeveloperr/backend-for-frontend-architecture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244795518,"owners_count":20511521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend","backendforfrontend","bff","expressjs","frontend","mobile","react","react-native"],"created_at":"2024-11-27T18:11:10.437Z","updated_at":"2026-04-09T23:32:49.006Z","avatar_url":"https://github.com/jsdeveloperr.png","language":"TypeScript","readme":"### Backend-for-Frontend (BFF) Architecture\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/jsdeveloperr/backend-for-frontend-architecture/blob/main/frontend/web/src/assets/backend-for-frontend.jpg\" width=\"500\" alt=\"Backend-for-Frontend (BFF) Architecture\" /\u003e\n\u003c/p\u003e\n\n---\n\n## 📚 **Project Overview**\n\n**`backend-for-frontend`** is a architecture project structured to implement the **Backend-for-Frontend (BFF)** pattern. This architecture is designed to support separate backends for different frontend clients (web, mobile, etc.), ensuring tailored responses and performance optimization.\n\nThis monorepo manages:\n- **Web frontend** (`frontend/web`)\n- **Mobile frontend** (`frontend/mobileApp`)\n- **Web BFF** (`backend/web-bff`)\n- **Mobile BFF** (`backend/mobile-bff`)\n- **Shared services** (`backend/shared`)\n\nThe project leverages `Makefile` for build and dependency management and utilizes `yarn` workspaces for dependency handling.\n\n---\n\n## 🚀 **Features**\n\n- **BFF Architecture**: Separate backend layers for Web and Mobile clients.\n- **Frontend Clients**: React.js for web and React Native for mobile.\n- **Shared Services**: Common utilities shared between BFFs.\n- **Isolated Dependency Management**: Each project manages its own dependencies via `yarn` and `Makefile`.\n- **Concurrent Development**: Ability to run multiple services simultaneously using `concurrently`.\n- **Makefile Automation**: Simplified commands for managing all services.\n\n---\n\n## 🗂 **Project Structure**\n\n```plaintext\n📦 backend  \n ┣ 📂 _data  \n ┃ ┗ 📜 db.json        # JSON file for mock data  \n ┣ 📂 mobile-bff       # BFF tailored for the mobile client  \n ┣ 📂 web-bff          # BFF tailored for the web client  \n ┣ 📂 shared           # Shared backend code (e.g., validation, error handling)  \n ┗ 📜 package.json     # Backend dependencies  \n\n📦 frontend  \n ┣ 📂 mobileApp        # React Native application  \n ┃ ┣ 📂 app  \n ┃ ┃ ┣ 📂 Components   # UI components (following atomic design principles)  \n ┃ ┃ ┣ 📂 Screens      # Login, RecipeList, RecipeDetail  \n ┃ ┃ ┣ 📂 Context      # Global states (e.g., AuthContext)  \n ┃ ┃ ┗ 📂 Navigation   # React Navigation setup  \n ┣ 📂 web              # React (web) application  \n ┃ ┣ 📂 Components     # Atomic components  \n ┃ ┣ 📂 Pages          # Login, RecipeList, RecipeDetail  \n ┃ ┣ 📂 Context        # Web global states  \n ┃ ┗ 📜 index.tsx      # Entry point for the React application  \n ┗ 📜 package.json     # Frontend dependencies  \n\n📦 node_modules         # Project dependencies  \n📜 Makefile             # Automation scripts  \n📜 package.json         # Root dependencies  \n📜 README.md            # Project documentation  \n📜 yarn.lock            # Dependency version locking\n```\n\n---\n\n## ⚙️ **Setup Instructions**\n\n### 1. Prerequisites\nMake sure the following are installed:\n- **Node.js** (\u003e= 18.x)\n- **Yarn** (1.22.x)\n- **Make** (for running commands)\n\n---\n\n### 2. Install Dependencies\n\nProject Clone:\n```bash\ngit clone https://github.com/jsdeveloperr/backend-for-frontend-architecture.git\ncd backend-for-frontend-architecture\n   ```\nRun the following command to install dependencies for all projects:\n```bash\nyarn install:all\n```\nThis executes:\n```bash\nmake install\n```\nwhich installs dependencies for each subproject (web, mobile, shared, etc.).\n\n---\n\n### 3. Clean Project\n\nTo clean all `node_modules` and reset the project:\n```bash\nyarn clean:all\n```\nThis runs:\n```bash\nmake clean\n```\n\nTo clean the yarn cache:\n```bash\nyarn cache:clean\n```\n\n---\n\n## 🛠 **Development**\n\n### Start All Services\n\n#### 1. Backend Services\n```bash\nyarn start:backend\n```\nThis runs:\n```bash\nmake start-backends\n```\nIt starts:\n- `shared`\n- `web-bff`\n- `mobile-bff`\n\n#### 2. Frontend Services\n```bash\nyarn start:frontend\n```\nThis runs:\n```bash\nmake start-frontends\n```\nIt starts:\n- `web`\n- `mobile`\n\n##### Special Notes for Android\nReact Native Debugging with Android\n\nWhen running the mobile application on an Android device or emulator, API requests might fail due to localhost connectivity issues. To resolve this, you need to set up adb reverse commands.\n\nRun the following commands:\n\n```bash\nadb reverse tcp:5000 tcp:5000  # Map Shared BFF API\nadb reverse tcp:3001 tcp:3001  # Map Mobile BFF API\n```\n\n#### Start Specific Services\n\n| Service            | Command                 |\n|--------------------|-------------------------|\n| Web Frontend       | `yarn start:web`       |\n| Mobile Frontend    | `yarn start:mobile`    |\n| Web BFF Backend    | `yarn start:wbff`      |\n| Mobile BFF Backend | `yarn start:mbff`      |\n| Shared Services    | `yarn start:shared`    |\n\n---\n\n## 🧹 **Cleaning**\n\n| Command         | Description                                  |\n|-----------------|----------------------------------------------|\n| `yarn clean:all`| Cleans all `node_modules` and resets project |\n| `yarn cache:clean` | Cleans the yarn cache                     |\n\n---\n\n## 📖 **Makefile Commands**\n\nFor advanced users, all functionality is centralized in the `Makefile`. Below are the available commands:\n\n| Command                  | Description                                  |\n|--------------------------|----------------------------------------------|\n| `make install`           | Installs dependencies for all projects      |\n| `make clean`             | Cleans all `node_modules` directories       |\n| `make cache-clean`       | Cleans yarn cache                           |\n| `make start-web`         | Starts the web frontend                     |\n| `make start-mobile`      | Starts the mobile frontend                  |\n| `make start-shared`      | Starts the shared services                  |\n| `make start-backend-web-bff` | Starts the Web BFF backend               |\n| `make start-backend-mobile-bff` | Starts the Mobile BFF backend         |\n| `make start-backends`    | Starts all backend services                 |\n| `make start-frontends`   | Starts all frontend services                |\n\n---\n\n## 🛡 **Troubleshooting**\n\n### Common Issues\n\n1. **`concurrently not found`**\n   - Run `yarn add concurrently -D` in the root directory.\n\n2. **Missing `node_modules`**\n   - Ensure `yarn install:all` was executed.\n\n3. **React Native Build Errors**\n   - Ensure the correct setup for React Native by running:\n     ```bash\n     npx react-native doctor\n     ```\n\n4. **Port Conflicts**\n   - Make sure no other process is using the default ports (e.g., 3000, 5000).\n\n---\n\n## 💡 **Future Improvements**\n\n- Add **Docker** support for easier environment setup.\n- Implement CI/CD pipelines.\n- Enable remote caching for builds with TurboRepo.\n\n---\n\n## ✨ **Contributing**\n\nWe welcome contributions! Feel free to submit issues or pull requests to improve this project.\n\n---\n\n## 📄 **License**\n\nThis project is licensed under the MIT License.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdeveloperr%2Fbackend-for-frontend-architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdeveloperr%2Fbackend-for-frontend-architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdeveloperr%2Fbackend-for-frontend-architecture/lists"}