{"id":30666112,"url":"https://github.com/martinsoliz9/optimized-fullstack-project","last_synced_at":"2025-08-31T21:33:50.332Z","repository":{"id":304595898,"uuid":"1018241165","full_name":"martinsoliz9/optimized-fullstack-project","owner":"martinsoliz9","description":"Opinionated project architecture for Full-Stack JavaScript Applications.","archived":false,"fork":false,"pushed_at":"2025-07-27T22:44:15.000Z","size":4785,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-14T23:57:03.595Z","etag":null,"topics":["architecture","docker","expressjs","fullstack-development","javascript","mongodb","nginx","nodejs","react","react-native","saas"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/martinsoliz9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2025-07-11T21:27:50.000Z","updated_at":"2025-07-29T06:19:33.000Z","dependencies_parsed_at":"2025-07-14T06:31:33.401Z","dependency_job_id":"8548c687-43c5-440e-85e1-9ca6687c708c","html_url":"https://github.com/martinsoliz9/optimized-fullstack-project","commit_stats":null,"previous_names":["andrewthomas9/fe2","andrewthomas9/optimized-fullstack-project","martinsoliz9/optimized-fullstack-project"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/martinsoliz9/optimized-fullstack-project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsoliz9%2Foptimized-fullstack-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsoliz9%2Foptimized-fullstack-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsoliz9%2Foptimized-fullstack-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsoliz9%2Foptimized-fullstack-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martinsoliz9","download_url":"https://codeload.github.com/martinsoliz9/optimized-fullstack-project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinsoliz9%2Foptimized-fullstack-project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273045941,"owners_count":25036173,"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","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["architecture","docker","expressjs","fullstack-development","javascript","mongodb","nginx","nodejs","react","react-native","saas"],"created_at":"2025-08-31T21:33:00.527Z","updated_at":"2025-08-31T21:33:50.323Z","avatar_url":"https://github.com/martinsoliz9.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e # 🆕 Upgraded version is now available!\n\u003e An upgraded and more modern version with full-stack monorepo, featuring an event-driven, highly scalable architecture using Node.js, React, Redis, MongoDB, and Docker is now available,\n check out [github.com/andrewthomas9/optimized-fullstack-project](https://github.com/andrewthomas9/optimized-fullstack-project)\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n# Full-Stack JavaScript Architecture\n\nOpinionated project architecture for Full-Stack JavaScript Applications.\n\n## About\n\nUsing JavaScript for full-stack has always been a challenge especially with architecting various pieces of the application, choosing technologies and managing devOps. This project provides a base for typical project consisting a Landing Website, Web and Mobile Applications, API service and easy deployment of these services. This project uses a microservice architecture where all individual project runs as a service (container).\n\nA typical product (SaaS, etc.) usually consists of following services:\n\n- Landing page\n  - Used for introducing your business to customers\n  - Provide links to download the mobile application\n  - Provide link to access web application\n  - Contact page\n  - Privacy policy page\n  - Terms of use page\n  - SEO friendly (should support server side rendering)\n- Web Application\n  - Your actual application for your customers to use\n  - Desktop browser\n  - Tablet and mobile browser via responsive design\n- Mobile Application\n  - Your actual application for your customers to use\n  - Android (Mobile/Tablet)\n  - iOS (Mobile/Tablet)\n\n## Core Structure\n\n    fsja\n      ├── backend\n      │   ├── api\n      │   │   \u003e NodeJS\n      │   │   \u003e PORT 8000\n      │   │   \u003e api.example.com\n      │   │\n      │   ├── database\n      │   │   \u003e MongoDB\n      │   │   \u003e PORT 27017\n      │   │\n      │   └── proxy\n      │       \u003e NGINX\n      │       \u003e PORT 80 / 443\n      │\n      ├── deployment\n      │   \u003e Docker Compose\n      │\n      ├── frontend\n      │   ├── app\n      │   │   ├── mobile\n      │   │   │   \u003e React Native\n      │   │   │   \u003e iOS (Apple App Store)\n      │   │   │   \u003e Android (Google Play Store)\n      │   │   │\n      │   │   └── web\n      │   │       \u003e React\n      │   │       \u003e Single page application\n      │   │       \u003e PORT 5000\n      │   │       \u003e app.example.com\n      │   │\n      │   └── landing\n      │       \u003e React\n      │       \u003e Server side rendered\n      │       \u003e PORT 3000\n      │       \u003e example.com\n      │\n      └── README.md (you are here)\n\n## Stack\n\n### Backend\n\n- API\n  - NodeJS\n  - Express\n- Database\n  - MongoDB\n- Proxy\n  - NGINX\n\n### Frontend\n\n- Landing\n\n  - React\n  - Next.js\n  - Material UI\n  - Server Side Rendering\n\n- Web\n  - React\n  - Redux\n  - React Router\n  - Material UI\n- Mobile (iOS, Android)\n  - React Native\n  - Redux\n  - React Navigation\n\n### Deployment\n\n- Technologies\n  - Docker\n  - Docker compose\n\n## Setup and Running\n\n- Prerequisites\n\n  - Node (`v10.x`)\n  - MongoDB (`v4.x`)\n  - Xcode (for iOS) (latest)\n  - Android Studio (for Android) (latest)\n  - Follow [React Native Guide](https://facebook.github.io/react-native/docs/getting-started) to setup your local machine\n\n- Clone repository `git clone git@github.com:atulmy/fullstack-javascript-architecture.git fullstack`\n\n- **API**\n\n  - Info\n    - Authentication strategy: [JWT](https://jwt.io/introduction/) (JSON Web Token)\n    - Current implementation uses [RPC](https://www.jsonrpc.org/) (Remote Procedure Call) for API endpoints (one endpoint URL, multiple operations) and can be easily replaced with REST.\n    - Resources\n  - Switch to `api` directory `cd backend/api`\n  - Configuration\n    - Create local environment file `cp .env.dev.example .env.local`\n    - Modify `.env.local` for\n      - `PORT` (`8000`)\n      - `NODE_ENV` (`development` | `production`)\n      - `SECURITY_SECRET` (Use [PasswordsGenerators](https://passwordsgenerators.net))\n      - `SECURITY_SALT_ROUNDS` (`10`)\n      - `MONGO_URL` (`mongodb://localhost:27017/example`)\n      - `LANDING_URL` (`http://localhost:3000`)\n      - `WEB_URL` (`http://localhost:5000`)\n      - `API_URL` (`http://localhost:8000`)\n      - `EMAIL_ON` (`0` | `1` (in development, you can toggle to send emails or not))\n      - `EMAIL_TEST` (send test emails to this address)\n      - `EMAIL_HOST`, `EMAIL_USER`, `EMAIL_PASSWORD` (use any email service, eg. [mailgun.com](https://www.mailgun.com/) and get credentials to start sending emails\n  - Setup\n    - Install packages and seed database `npm run setup`\n  - Run\n    - Start API server: `npm start` (http://localhost:8000)\n\n- **Landing**\n\n  - Switch to `landing` directory `cd frontend/landing`\n  - Configuration\n    - Create local environment file `cp .env.dev.example .env.local`\n    - Modify `.env.local` for\n      - `PORT` (`3000`)\n      - `NODE_ENV` (`development` | `production`)\n      - `URL_LANDING` (`http://localhost:3000`)\n      - `URL_WEB` (`http://localhost:5000`)\n      - `URL_API` (`http://localhost:8000`)\n      - `GA_TRACKING_ID` (Google analytics tracking ID)\n  - Setup\n    - Install dependencies: `npm install`\n  - Run\n    - Start Landing server: `npm start`, browse at http://localhost:3000\n  - Resources\n    - Use [getterms.io](https://getterms.io) to generate Privacy Policy / Terms of Use\n    - Favicon generator [realfavicongenerator](https://realfavicongenerator.net)\n\n- **Web**\n\n  - Switch to `web` directory `cd frontend/app/web`\n  - Configuration\n    - Create local environment file `cp .env.dev.example .env.local`\n    - Modify `.env.local` for\n      - `PORT` (`5000`)\n      - `REACT_APP_LANDING_URL` (`http://localhost:3000`)\n      - `REACT_APP_WEB_URL` (`http://localhost:5000`)\n      - `REACT_APP_API_URL` (`http://localhost:8000`)\n  - Setup\n    - Install dependencies: `npm install`\n  - Run\n    - Start Web server: `npm start`, browse at http://localhost:5000\n\n- **Deployment**\n\n  - Deploy code\n    1. Login to the server (SSH)\n    2. Create a new directory on server: `mkdir /var/www/fullstack` and switch to the directory `cd /var/www/fullstack`\n    3. Clone repository `git clone git@github.com:atulmy/fullstack-javascript-architecture.git .`\n    4. Switch to `deployment` directory `cd deployment`\n    5. Build containers `docker-compose up --build -d`\n       - `up` = Builds, (re)creates, starts, and attaches to containers for a service.\n       - `--build` = Build images before starting containers\n       - `-d` = Detached mode: Run containers in the background, print new container names\n    6. Re-deploy with following steps:\n       - Change directory `cd /var/www/fullstack`\n       - Pull latest code `git pull`\n       - Rebuild containers: `docker-compose up --build -d`\n  - Resources\n    - [Set Up Free SSL Certificates from Let's Encrypt using Docker and Nginx](https://humankode.com/ssl/how-to-set-up-free-ssl-certificates-from-lets-encrypt-using-docker-and-nginx)\n\n- **Mobile**\n  - Switch to `mobile` directory `cd frontend/app/mobile`\n  - Configuration\n    - Modify `src/setup/config/env.js` for\n      - `APP_ENV` (`development` | `production`)\n      - `LANDING_URL` (`http://\u003cyour local network IP\u003e:3000`)\n      - `WEB_URL` (`http://\u003cyour local network IP\u003e:5000`)\n      - `API_URL` (`http://\u003cyour local network IP\u003e:8000`)\n      - Tip: use `ifconfig` on macOS or Linux to get your local IP address\n  - Setup\n    - Install dependencies: `npm install`\n  - Run\n    - iOS `react-native run-ios --simulator='iPhone 8'`\n    - Android `react-native run-android` (connect your Android phone via USB or use already created simulator with name `Mobile_-_5` by running `cd ~/Library/Android/sdk/tools \u0026\u0026 ./emulator -avd Mobile_-_5`)\n  - Publish\n    - Android\n      - Build: `cd android \u0026\u0026 ./gradlew assembleRelease \u0026\u0026 cd ..`.\n      - Upload `frontend/app/mobile/android/app/build/outputs/apk/release/app-release.apk` to Play Store.\n    - iOS\n      - Build: Open `frontend/app/mobile/ios/example.xcodeproj` in Xcode -\u003e Choose Generic iOS Device (top left) -\u003e Product (top menu) -\u003e Archive.\n      - Upload using Archiver (will open automatically once Archive is complete)\n  - Resources\n    - [From react-native init to app stores real quick](https://blog.elao.com/en/dev/from-react-native-init-to-app-stores-real-quick/)\n    - iOS App icon and splashscreen generator [appicon](https://www.appicon.build/)\n    - Icon generator [makeappicon](https://makeappicon.com/)\n    - Icons and splashscreen generator [imagegorilla](https://apetools.webprofusion.com/app/#/tools/imagegorilla)\n\n## Authors\n\n- Andrew Thomas- [GitHub](https://github.com/andrewthomas9) ·\n\n## Hire me\n\nLooking for a developer to build your next idea or need a developer to work remotely? Get in touch\n\n## Donate\n\nIf you liked this project, you can donate to support it ❤️\n\nThank you for donating:\n\n\n## License\n\nCopyright (c) 2018 Atul Yadav http://github.com/andrewthomas9\n\nThe MIT License (http://www.opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinsoliz9%2Foptimized-fullstack-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinsoliz9%2Foptimized-fullstack-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinsoliz9%2Foptimized-fullstack-project/lists"}