Community Library Project Setup
This skill guides you through setting up a multi-platform Community Library application with React Native mobile app, React.js web app, Node.js backend, and shared component library.
What This Skill Does
Automates the creation of a complete monorepo structure for a Community Library app that includes:
React Native mobile app (Android/iOS)React.js responsive web appNode.js/Express backend APIShared component library with utilities, validation schemas, and TypeScript typesUser authentication, book management, barcode scanning, digital wallet, and admin dashboard featuresSupport for three user personas: Publisher (lender), Borrower, and AdministratorInstructions
Follow these steps in order. Mark each step as completed before proceeding to the next.
Step 1: Verify Workspace Instructions File
Check that a copilot instructions file exists in the `.github` directoryIf missing, create `.github/copilot-instructions.md` with project-specific contextMark this step as completedStep 2: Clarify Project Requirements
Confirm the project structure: Community Library app with React Native mobile, React.js web, and Node.js backendVerify the three user personas: Publisher (lender), Borrower, AdministratorConfirm key features: user auth, book management, barcode scanning, digital wallet, admin dashboardMark this step as completedStep 3: Scaffold the Project
Create workspace structure with the following directories: - `mobile/` — React Native mobile app
- `web/` — React.js web app
- `backend/` — Node.js/Express API
- `shared/` — Shared utilities, types, and components
Create `package.json` files for each directory with appropriate dependenciesSet up a root `package.json` with workspace configuration if using a monorepo approachUse TypeScript for all componentsWorking directory should be the project root (`.`)Mark this step as completedStep 4: Customize the Project
**Only execute this step if the previous steps are marked as completed.**
Add React Native mobile app configuration and initial screensSet up React.js web app with responsive designConfigure Node.js/Express backend with API routesCreate shared utilities directory with: - Validation schemas (e.g., for book data, user input)
- TypeScript type definitions shared across platforms
- Common helper functions
Implement basic authentication flowSet up book management models and endpointsConfigure barcode scanning capabilities (mobile)Set up digital wallet structureCreate admin dashboard components**Skip this step for simple "Hello World" projects**Mark this step as completedStep 5: Install Required Extensions
Check for recommended VS Code extensions for: - React Native development
- React.js development
- Node.js development
- TypeScript support
Document any required extensions in `.vscode/extensions.json`Mark this step as completedStep 6: Compile the Project
**Only execute this step if all previous steps are completed.**
Install all missing dependencies across mobile, web, backend, and shared directoriesRun diagnostics to identify configuration issuesCheck for `README.md`, `DEVELOPMENT.md`, or similar documentation files for setup instructionsResolve any compilation errors or warningsVerify TypeScript configuration is valid across all componentsMark this step as completedStep 7: Create and Run Tasks
**Only execute this step if all previous steps are completed.**
Review the official VS Code tasks documentation: https://code.visualstudio.com/docs/debugtest/tasksDetermine if the project needs task automation based on `package.json` scriptsIf needed, create a `.vscode/tasks.json` file with tasks for: - Starting the mobile app (iOS/Android)
- Starting the web app
- Starting the backend server
- Running tests
- Building for production
Use npm scripts from `package.json` as task commands**Skip this step if tasks are not needed**Mark this step as completedStep 8: Launch the Project
**Only execute this step if all previous steps are completed.**
Prompt the user to confirm whether to launch in debug modeIf confirmed, launch the appropriate component(s): - Mobile app (iOS simulator/Android emulator)
- Web app (development server)
- Backend API server
Provide instructions for accessing each running componentMark this step as completedStep 9: Ensure Documentation is Complete
Create or verify `README.md` exists with: - Project overview and architecture
- Setup instructions
- Directory structure explanation
- User personas and features
Create or verify `DEVELOPMENT.md` exists with: - Development workflow
- Available npm scripts
- Testing guidelines
- Deployment instructions
Document shared component library usageMark this step as completedProject Structure
```
community-library-app/
├── mobile/ # React Native mobile app
├── web/ # React.js web app
├── backend/ # Node.js/Express API
├── shared/ # Shared utilities, types, components
├── .github/ # GitHub-specific files
├── .vscode/ # VS Code configuration
├── package.json # Root workspace configuration
├── README.md # Project overview
└── DEVELOPMENT.md # Development guide
```
User Personas
1. **Publisher (Lender)** — Users who lend books to the community
2. **Borrower** — Users who borrow books from publishers
3. **Administrator** — System administrators who manage users and content
Core Features
User authentication and authorizationBook catalog managementBarcode scanning (mobile)Digital wallet for transactionsAdmin dashboard for content managementCross-platform synchronizationImportant Notes
Always verify each step is completed before proceeding to the nextSkip Step 4 (Customize) for simple "Hello World" projectsSkip Step 7 (Tasks) if task automation is not needed for the projectOnly launch the project (Step 8) if the user explicitly confirmsUse TypeScript throughout the project for type safetyFollow monorepo best practices for shared codeEnsure proper separation of concerns between mobile, web, and backend