{"id":13553294,"url":"https://github.com/atulmy/fullstack-javascript-architecture","last_synced_at":"2025-04-12T19:48:56.900Z","repository":{"id":53300739,"uuid":"153934270","full_name":"atulmy/fullstack-javascript-architecture","owner":"atulmy","description":"✍️  Opinionated project architecture for Full-Stack JavaScript Applications.","archived":false,"fork":false,"pushed_at":"2024-08-06T10:58:38.000Z","size":4799,"stargazers_count":707,"open_issues_count":0,"forks_count":181,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-12T19:48:51.178Z","etag":null,"topics":["architecture","docker","express","fullstack","javascript","learn-by-examples","mongodb","nginx","nodejs","react","react-native","saas"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/atulmy.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}},"created_at":"2018-10-20T18:09:17.000Z","updated_at":"2025-04-08T12:36:42.000Z","dependencies_parsed_at":"2024-10-22T22:02:02.368Z","dependency_job_id":null,"html_url":"https://github.com/atulmy/fullstack-javascript-architecture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-javascript-architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-javascript-architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-javascript-architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atulmy%2Ffullstack-javascript-architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atulmy","download_url":"https://codeload.github.com/atulmy/fullstack-javascript-architecture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625501,"owners_count":21135513,"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":["architecture","docker","express","fullstack","javascript","learn-by-examples","mongodb","nginx","nodejs","react","react-native","saas"],"created_at":"2024-08-01T12:02:21.554Z","updated_at":"2025-04-12T19:48:56.873Z","avatar_url":"https://github.com/atulmy.png","language":"JavaScript","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/atulmy/fullstack-event-driven-architecture](https://github.com/atulmy/fullstack-event-driven-architecture)\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n\u003ca href=\"https://docs.google.com/drawings/d/1zROz5TgqlxTYyUZmYpfboMwyyuLxX3HV0jR6tkByKzw/edit?usp=sharing\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/atulmy/storage/master/images/fullstack-javascript-architecture/architecture.png?v=1.0\" alt=\"Full-Stack JavaScript Architecture\" /\u003e\u003c/a\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      - [Lightweight RPC API pattern](https://github.com/atulmy/wispy)\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## Screenshots\n\nView all screenshots [here](https://github.com/atulmy/atulmy.github.io/tree/master/images/fullstack-javascript-architecture).\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"2\"\u003eLanding\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cimg alt=\"Landing\" src=\"https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/fullstack-javascript-architecture/landing/Screenshot%202018-11-26%20at%208.42.33%20PM.png\" /\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg alt=\"Landing\" src=\"https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/fullstack-javascript-architecture/landing/Screenshot%202018-11-26%20at%208.42.44%20PM.png\" /\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"2\"\u003eWeb\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cimg alt=\"Web\" src=\"https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/fullstack-javascript-architecture/web/Screenshot%202018-11-26%20at%208.43.29%20PM.png\" /\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg alt=\"Web\" src=\"https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/fullstack-javascript-architecture/web/Screenshot%202018-11-26%20at%208.44.25%20PM.png\" /\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"2\"\u003eMobile\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cimg alt=\"Mobile\" src=\"https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/fullstack-javascript-architecture/mobile/Screenshot%202018-11-26%20at%208.47.31%20PM.png\" /\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e\n        \u003cimg alt=\"Mobile\" src=\"https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/fullstack-javascript-architecture/mobile/Screenshot%202018-11-26%20at%208.48.07%20PM.png\" /\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Authors\n\n- Atul Yadav - [GitHub](https://github.com/atulmy) · [Twitter](https://twitter.com/atulmy)\n\n## Collaborators\n\n- Hossein Nedaee - [GitHub](https://github.com/hosseinnedaee)\n- [YOUR NAME HERE] - Feel free to contribute to the codebase by resolving any open issues, refactoring, adding new features, writing test cases or any other way to make the project better and helpful to the community. Feel free to fork and send pull requests.\n\n## Resources and Inspirations\n\n- 💁‍♂️ Hand picked collection of packages, tutorials and more for React Native - [GitHub](https://github.com/atulmy/react-native-curated)\n- 🌱 Lightweight (remote procedure call) API pattern - [GitHub](https://github.com/atulmy/wispy)\n- 🛡 A simple validation library for server and client side applications - [GitHub](https://github.com/atulmy/fullstack-validator) \u0026bull; [NPM](https://www.npmjs.com/package/fullstack-validator)\n- 🌐 Universal react application with server side rendering - [GitHub](https://github.com/atulmy/universal-react)\n- 📦 A sample web and mobile application built with Node, Express, React, React Native and Redux - [GitHub](https://github.com/atulmy/crate)\n- Start learning by looking at sample codes on GitHub: [#LearnByExamples](https://github.com/topics/learn-by-examples)\n\n## Hire me\n\nLooking for a developer to build your next idea or need a developer to work remotely? Get in touch: [atul.12788@gmail.com](mailto:atul.12788@gmail.com)\n\n## Donate\n\nIf you liked this project, you can donate to support it ❤️\n\n[![Donate via PayPal](https://raw.githubusercontent.com/atulmy/atulmy.github.io/master/images/mix/paypal-me-smaller.png)](http://paypal.me/atulmy)\n\nThank you for donating:\n\n- [Oleg Serbin](https://github.com/oserbin)\n\n## License\n\nCopyright (c) 2018 Atul Yadav http://github.com/atulmy\n\nThe MIT License (http://www.opensource.org/licenses/mit-license.php)\n","funding_links":["http://paypal.me/atulmy"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatulmy%2Ffullstack-javascript-architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatulmy%2Ffullstack-javascript-architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatulmy%2Ffullstack-javascript-architecture/lists"}