{"id":22765198,"url":"https://github.com/vidundergunder/roadcam","last_synced_at":"2026-04-09T06:44:35.524Z","repository":{"id":51046907,"uuid":"364323887","full_name":"VidunderGunder/roadcam","owner":"VidunderGunder","description":"A road camera web app. Monorepo with NX, Storybook, Next (with serverless functions), TypeScript, Node, a React library, MongoDB and friends. 😄","archived":false,"fork":false,"pushed_at":"2021-05-22T18:40:21.000Z","size":1086,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-05T12:13:15.920Z","etag":null,"topics":["automatic-deployment","mapbox-gl","mongodb","monorepo","next","node","nx","react","serverless","storybook","styled-components","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://roadcam.vercel.app/","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/VidunderGunder.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}},"created_at":"2021-05-04T16:45:33.000Z","updated_at":"2021-05-18T17:57:39.000Z","dependencies_parsed_at":"2022-09-04T02:40:49.599Z","dependency_job_id":null,"html_url":"https://github.com/VidunderGunder/roadcam","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/VidunderGunder%2Froadcam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VidunderGunder%2Froadcam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VidunderGunder%2Froadcam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VidunderGunder%2Froadcam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VidunderGunder","download_url":"https://codeload.github.com/VidunderGunder/roadcam/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246301994,"owners_count":20755514,"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":["automatic-deployment","mapbox-gl","mongodb","monorepo","next","node","nx","react","serverless","storybook","styled-components","typescript","vercel"],"created_at":"2024-12-11T12:12:08.722Z","updated_at":"2025-12-30T19:17:23.299Z","avatar_url":"https://github.com/VidunderGunder.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RoadCam \u003c!-- omit in toc --\u003e\n\n[![picture 1](images/roadcam-demo.png)](https://roadcam.vercel.app/) \n\nMonorepo experiment to test out a bunch of frameworks and libraries.\nWe'll create a small web application showing road camera information.\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [End result](#end-result)\n- [What frameworks to use?](#what-frameworks-to-use)\n- [Project Architecture and Main Tools](#project-architecture-and-main-tools)\n- [MongoDB](#mongodb)\n\n## End result\n\n- Monorepo with NX\n  - TypeScript everything\n  - Jest + Cypress for testing\n  - Styled Components for CSS-in-JS\n- NEXT.js Frontend\u003csup\u003eLive!\u003c/sup\u003e\n- NEXT.js Serverless Express Backend\u003csup\u003eLive!\u003c/sup\u003e  \n*Data alternatives:*\n  - Data hosted on Vercel\n  - Data hosted on MongoDB Atlas\n- Node Express Backend  \n*Data alternatives:*\n  - Data hosted om server\n  - Data hosted on MongoDB Atlas\n- React Library with Storybook for components\n- React Map GL from VisGL as Mapbox GL-wrapper\n\n---\n\n\u003e_Below are some rambling notes I jotted down as I went._  \n\u003e_TL;DR in the list above._ 👆  \n\u003e_I would probably skip reading the rest if I was you._ 😉\n\n---\n\n## What frameworks to use?\n\nAll proposals are using [TypeScript](https://www.typescriptlang.org/) where possible (some configuration files may be omitted).\n\n---\n\n\n🚫 **~~Vanilla [React](https://reactjs.org/) + [Node](https://docs.expo.io/workflow/web/) with [Express](https://expressjs.com/)~~**\n\n~~Using [`create-react-app` with TypeScript template](https://create-react-app.dev/docs/adding-typescript/).~~\n\n- ~~Will work with almost anything (it's basically the `Hello World!` of modern web development)~~\n- ~~Instant deployment and hosting using [Vercel](https://vercel.com/)~~\n- ~~[Supports Unity3D with API](https://www.npmjs.com/package/react-unity-webgl)~~\n\n---\n\n✅ **[NEXT](https://nextjs.org/) with [Express using API Routes](https://vercel.com/guides/using-express-with-vercel)**\n\n- Fully supported by [NX](https://nx.dev/latest/react/guides/nextjs)\n- Instant deployment and hosting using [Vercel](https://vercel.com/) for free\n- Serverless functions\n- Static Site Generation (SSG) and Server Side Rendering (SSR) out-of-the-box\n- [Supports Unity3D with API](https://www.npmjs.com/package/react-unity-webgl)  \n_([SSR workaround available](https://github.com/jeffreylanters/react-unity-webgl/issues/139#issuecomment-790525055) and [SSR is in the pipeline](https://github.com/jeffreylanters/react-unity-webgl/issues/139#issuecomment-790476259))_\n\n_NEXT is a product of Vercel, so implementation may be more stable and developer friendly than other alternatives_\n\n---\n\n🚫 **~~[Expo](https://expo.io/) + [Node](https://docs.expo.io/workflow/web/) with [Express](https://expressjs.com/)~~**\n\n~~Using [React Native for Web](https://docs.expo.io/workflow/web/).~~\n\n- ~~Instant deployment and hosting using [Vercel](https://vercel.com/)~~\n- ~~[Supports Unity3D view only](https://www.npmjs.com/package/react-unity-webgl)~~  \n~~_API between Unity3D and the different platforms can be done, but requires native implementations for all platforms._~~\n- ~~Native Apps for iOS and Android using the same codebase~~\n\n---\n\nAlmost none of the extra features will be utilized here, but it's fun pretending this thing is gonna scale. 📈\n\nI went with NEXT, as it cuts resources spent on development, scalability and deployment to a minimum. It also has lots of nice-to-have features, like server-side rendering and static site generation out-of-the-box.\n\nIt might seem like overkill for a single page application, but given it's as easy to setup as a vanilla React app (if not easier) combined with Vercel's support for SSG and simple (and free) deployment, it makes sense.\n\nReact is more familiar to most devs compared to Expo/React Native, so we'll save some time getting them up and running as well.\n\nPWAs are possible with this alternative, which allows for local app installation and offline support for all major operating systems and devices:\n\n- Windows\n- Linux\n- Mac\n- iOS (and iPadOS)\\*\n- Android\n\n\\*The only downside is PWAs are not yet allowed on the App Store (iOS), even though they are permitted elsewhere (e.g., Google Play and Windows Store). Users can still save the app to their iOS home screens, but full API access to the OS is missing.\n\nThis is likely to change when PWAs become more widespread, though, assuming antitrust laws are following suit.\n\nHaving all React-libraries at disposal is a huge plus (as opposed to React Native/Expo); especially the possibility to use Unity builds, in case we want to move map navigation or other features to a more solid 3D-environment down the line.\n\n## Project Architecture and Main Tools\n\nWell yeah... This may be a mess, or it may be awesome. I'll explore some new stuff I haven't really used before, so it'll be hit or miss for some of 'em:\n\n- Monorepo using ~~[Yarn Workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)~~ or [NX](https://nx.dev/)\\*\n- ~~[Emotion](https://emotion.sh/docs/introduction)~~/[Styled Components](https://styled-components.com/)/~~[Styled JSX](https://www.npmjs.com/package/styled-jsx)~~ for CSS-in-JS\\*\\*\n- [Next API routes](https://vercel.com/guides/using-express-with-vercel) (in addition to a traditional [Express implementation with Node](https://expressjs.com/))***\n- [Storybook](https://storybook.js.org/) for isolated, pure, testable and documented components using****\n- [React Map GL](https://github.com/visgl/react-map-gl) from [VisGL](https://github.com/visgl)*****\n\n---\n\n\u003e### Opinions after some experimenting\n\u003e\n\u003e\\*Yarn Workspaces was a drag, as it's too low level. NX is a joy to work with, and I'll probably use it as a default for any upcoming projects. 👍\n\u003e\n\u003e\\*\\*Emotion has turned their package naming on its head with v11, and so nothing works out-of-the-box anymore. 😤   \n\u003eStyled components has a similar feature set, but is more focused on solutions \u003eI don't enjoy. It's what I went with because of the CSS-prop, but in \u003ehindsight it brought with it so many complications it's not worth it (for me)\u003e. 😔  \n\u003eStyled JSX seems like a good alternative, being a lot simpler while avoiding some pitfalls of Emotion and Styled Components. It's also the default CSS-in-JS for NEXT.js. 🤔  \n\u003eMaybe good old SASS would be a better solution, but I'm not a fan of leaking styles all over the place, while separating styles from components.  \n\u003eMaybe inline styles and the odd stylesheet isn't such a bad idea after all? 🤷‍♂️\n\u003e\n\u003e\n\u003e\\*\\*\\*Free serverless functions hosted on Vercel? Sign me up. Code needs some \u003esmall modifications, but the overall setup is a lot cleaner than having a \u003eseparate backend - especially for smaller projects. Might start using this more. 👌\n\u003e\n\u003e\\*\\*\\*\\*Storybook is a winner. Makes it sooo much more fun to create components that are actually reusable (even across apps and frameworks). Add NX's auto-setup on top of that? Yes, please! 💘\n\u003e\n\u003e![picture 1](images/storybook.png)  \n\u003e\n\u003e\\*\\*\\*\\*\\*`react-map-gl`? Meh. The wrapper could've been typed better (so much googling 🥵) and basic features are missing. Spent way to much time trying to get clustering to work with custom components, but it sadly isn't supported here. There's \u003ca href=\"https://github.com/urbica/react-map-gl\"\u003eUrbica's React library for mapbox-gl\u003c/a\u003e, which offers features one would expect from a basic map library, but it isn't typed at all.  \n\u003eCouldn't find a good alternative.  \n\u003eBig sad.\n\n---\n\n## MongoDB\n\nI used MongoDB's [Atlas](https://www.mongodb.com/cloud/atlas) as a database, so we don't need to do any hosting or maintenance ourselves.\n\n---\n\n\u003e### How was MongoDB?\n\u003e\n\u003eIt's been some time since I've used MongoDB...\n\u003e\n\u003eAfter playing with tools like NX, Next, Vercel, Docker and InfluxDB, I am surprised at how cumbersome some of the developer experience is for MongoDB - especially for newcomers. When you're one of the database big boys™ 💪 your cloud hosted DB should support drag 'n' drop uploads for basic things like JSON-data. I'm just saying.\n\u003e\n\u003eI will most likely try to find something else for upcoming projects.\n\u003e\n\u003eMaybe a solution where types can be defined once in a monorepo and reused by the frontend and backend would be nice? 🤔💭\n\u003e\n\u003eMaybe something in the realm of GraphQL would be best, when I want to define types anyway.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvidundergunder%2Froadcam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvidundergunder%2Froadcam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvidundergunder%2Froadcam/lists"}