{"id":22352430,"url":"https://github.com/juandc/bancobebe","last_synced_at":"2026-04-30T16:34:23.513Z","repository":{"id":44111199,"uuid":"189859483","full_name":"juandc/BancoBebe","owner":"juandc","description":"⚛️💨 React app: SSR and PWA. Without Next, CRA, or Gatsby.","archived":false,"fork":false,"pushed_at":"2023-01-04T03:56:59.000Z","size":1594,"stargazers_count":2,"open_issues_count":18,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-19T22:41:22.369Z","etag":null,"topics":["pwa","pwa-example","pwa-react","react","react-router","ssr"],"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/juandc.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}},"created_at":"2019-06-02T14:55:06.000Z","updated_at":"2020-08-31T15:48:04.000Z","dependencies_parsed_at":"2023-02-01T19:47:16.924Z","dependency_job_id":null,"html_url":"https://github.com/juandc/BancoBebe","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/juandc/BancoBebe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juandc%2FBancoBebe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juandc%2FBancoBebe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juandc%2FBancoBebe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juandc%2FBancoBebe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juandc","download_url":"https://codeload.github.com/juandc/BancoBebe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juandc%2FBancoBebe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32470879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["pwa","pwa-example","pwa-react","react","react-router","ssr"],"created_at":"2024-12-04T12:18:40.118Z","updated_at":"2026-04-30T16:34:23.496Z","avatar_url":"https://github.com/juandc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BancoBebe\nBB: Somos tu mamá - React Webapp - SSR - PWA - Without Next, CRA, or Gatsby.\n\n⚠️ Warning: No longer maintained. Check [react-chocolate](#proximamente) or [react-router-ultra](#proximamente2).\n\n## SPA vs. SSR\n\nThis was complicated. I'm a fan of microservices, but in this case the facility and advantages of monorepos for the API and rendering from the server were higher.\n\nThese are my initial thoughts:\n\n- SSR\n- Data Storage (and API) using Node.js and MongoDB\n- Authentication logic with Cookies 🍪\n- Data come straight from Node files that connect to Mongo (really cool 😎)\n- Less importance data could be fetched from the client to an API (GraphQL? Long live this 🙌)\n- Landing Pages could be SPAs, but not sure... 🤔\n\nThe deal is how to do this! :sweat_smile:\n\n## Frontend Architecture\n\nTech and tools:\n\n- Express.js -\u003e Server, SSR, DB (data) logic, SSR and API...\n- React -\u003e UI using renderToString and hydrate (streams are cool but does not support React Helmet or prefetching), some pages load data initially from the server, but it needs an API or something to load the same data just in case the page loads in the browser side (React Router Links), other pages just does not load data from the server but in the browser with an API...\n- Webpack + Babel -\u003e ES6+ to JS in bundles, for server and browser (check `config/webpack.*.js)...\n- Webpack + loadable-components -\u003e Code Splitting with ssr and no-ssr support...\n\n\u003e React.lazy still does not supports SSR...\n\n## Design System Principles\n\nAll products (just one, by now 😅) should follow these simple rules:\n\n### ⛰ Inspirational\nWe take inspiration from everywhere. For the same, our product should be a source of inspiration for developers, designers and other product creators. Not only the final result, all our processes must be planned and executed with excellence.\n\n### ⚪️ Clean and spaced\nOur UI should create a peaceful atmosphere, triggering creativity of users. This ambiance can be shaped by leaving a lot of space around every piece of interface. Cluttered interface is the source of stress that produces cortisol and adrenaline, both blocks our creative powers.\n\n### 💪 Clarity and Consistency\nThe entire application should have the same objectives and should talk to the users in the same way, either visually or in writing.\n\n### 🚼 Perceived stability\nEven with robust and complex platforms, users should perceive the processes as simple and familiar as possible.\n\n### 🎮 User control and forgiving\nUsers should have the feeling of control over the product, the application must allow the user to change his mind or start a new process whenever he needs it.\n\n### ♿️ Accessibility\nOur products should be usable for any user. We must build perceptible, operable, understandable and robust products.\n\n### 📱 Mobile first\nDesign and development always starts on the mobile. The responsive design is not optional, but priority and mandatory.\n\n### 👷‍♀ Predictable Architecture\nArchitecture must be predictable and natural. Features should be placed in the right context to be easy to discover by new users.\n\n### ♻️ Reusability\nEvery hour that we invest working on a component should serve to build other components and prevent you or someone else from having to rebuild our work.\n\n### 🔡 Covering all scenarios\nWe account for all ‘states’ in the system, and there are symbols for each of these states.\n\n### 😘 K.I.S.S. (Keep it simple)\nCover all scenarios, but do not over-complicate users and yourselves with unnecessary details.\n\n### 👥 Shareable\nWe must build and work with tools that allow us to share all our work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuandc%2Fbancobebe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuandc%2Fbancobebe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuandc%2Fbancobebe/lists"}