{"id":20751066,"url":"https://github.com/eriknguyen/react-meteor-lab","last_synced_at":"2026-04-10T12:05:12.084Z","repository":{"id":98605300,"uuid":"97733872","full_name":"eriknguyen/react-meteor-lab","owner":"eriknguyen","description":"Realtime markdown editor and other projects built with Meteor \u0026 React","archived":false,"fork":false,"pushed_at":"2017-12-27T03:22:18.000Z","size":186,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T14:26:24.698Z","etag":null,"topics":["meteor","react","react-router"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/eriknguyen.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-19T15:40:38.000Z","updated_at":"2023-03-10T09:48:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"2ab50552-6537-4d49-90f3-c559c9970d50","html_url":"https://github.com/eriknguyen/react-meteor-lab","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eriknguyen/react-meteor-lab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eriknguyen%2Freact-meteor-lab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eriknguyen%2Freact-meteor-lab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eriknguyen%2Freact-meteor-lab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eriknguyen%2Freact-meteor-lab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eriknguyen","download_url":"https://codeload.github.com/eriknguyen/react-meteor-lab/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eriknguyen%2Freact-meteor-lab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31641493,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"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":["meteor","react","react-router"],"created_at":"2024-11-17T08:30:00.805Z","updated_at":"2026-04-10T12:05:12.066Z","avatar_url":"https://github.com/eriknguyen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Realtime App built with React \u0026 Meteor\n\n## 1. Setup\n### Meteor Project\n* Includes:\n  * Place to put code\n  * Place to keep track of project dependencies\n  * Development webserver\n\n* Meteor -\u003e keep track of data in our app\n* React -\u003e Take data to product HTML, handle user events\n\n## 2. React Primer\n*Project [Images Gallery](https://github.com/eriknguyen/markdown-realtime/tree/master/images)*\n* `Meteor.startup(() =\u003e {})`: takes the function, run it when Meteor has started up: meteor has loaded, all HTML \u0026 DOM elements are rendered\n\n## 3. Meteor Overview - Employee Directory\n*Project [Employee Directory](https://github.com/eriknguyen/markdown-realtime/tree/master/employee-directory)*\n* Folder:\n  * client: to be bundled and served to client\n  * server: server code\n  * imports: shared between both client \u0026 server, executed first, before any client or server code\n\n* Generate fake data using [`Faker`](https://github.com/Marak/Faker.js)\n\n* Subscribe/Publish system\n  * `meteor remove autopublish` to restrict access to backend data\n\n* `react-meteor-data` can be used to create a *container* - a function that update some amount of data being passed to the component whenever a subscription changes -\u003e watch collection, if update, load all new updated records to the react component\n\n* Update \u0026 re-render component without using component-level state\n\n## 4. URL Shortener\n*Project [URL Shortener](https://github.com/eriknguyen/markdown-realtime/tree/master/url-shortener)*\n\n### Challenges\n* Way to store links\n* Redirect user from a shortened URL to the original one\n* Record a number of clicks for each URL\n\n### Initial Setup\n* Add Bootstrap as a Meteor package: `meteor add twbs:bootstrap@3.3.6`\n* `npm install --save react react-dom`\n* Setup `Header` component\n* Create `Links` collection in `imports/collection` to be shared between both client and server\n* Create URL form component, on form submit:\n  * Validate URL input from user -\u003e `this.refs.inputRef.value`\n  * Create new token that matches this URL\n  * Add the token and original URL to a `links` collection\n* `meteor remove autopublish` for setup secure publish/subscribe system\n\n### Manipulate data with Meteor\n* `meteor remove insecure` -\u003e to securely access database \u0026 save data\n* `Meteor.methods({'method_name': method_function})` and `Meteor.call('method_name', args[, callback])` for creating and calling secure methods between client and server\n* Validate user url input\n  * Using `valid-url` npm package and it's `isUri(url)` function\n  * Using `check`, `Match` from `meteor/check` package\n    * `check`: run validation on a var, if a var passes -\u003e `check` does nothing, else -\u003e throw an error\n    * `Match`: used to run customed validation function\n\n### Display list of links\n* Setup publish/subscribe system\n* `meteor add react-meteor-data`\n\n### Intercepting requests with Meteor Middleware\n* Use `meteor/webapp` - Meteor server, for handling incoming request  \n    `WebApp.connectHandlers.use(req =\u003e {/* handle request here */})`  \n    or  \n    `WebApp.connectHandlers.use(middleware)`\n* Install `connect-route` for routing (similar to Express routing) -\u003e creates a middleware that takes in HTTP request, check route then does according actions\n* Update number of clicks using Mongo Modifier `{$inc: {}}` inside the `update()` method, eg. `Links.update(link, { $inc: { clicks: 1 }})`\n\n## 5. Collaborative Markdown Editor\n*Project dir [Markdown Bin](https://github.com/eriknguyen/markdown-realtime/tree/master/markdown-editor)*\n\n### Main features\n* User can navigate between different pages -\u003e `react-router`\n* Need a full authentication system, using builtin Meteor methods\n* `bins` collection belongs specifically to only the owner/editor of a bin\n* _//TODO_\n  * Explore more on user management\n  * Let users choose to display bins that they own or they are shared with\n\n### Dependencies\n* `meteor add react-meteor-data`\n* `meteor add twbs:bootstrap@3.3.6`\n* `meteor remove insecure`\n* `meteor remove autopublish`\n* `npm install react react-dom react-addons-pure-render-mixin`\n\n### User Authentication\n*All already written by Meteor*\n* Get Blaze (or generally other rendering libraries) to work with React to make use of Blaze account authentication forms\n  * Let React renders a DOM element\n  * Use React life cycle methods for calling function automatically\n  * Find that particular DOM node and use another library to render to it (eg. inside `componentDidMount()`)\n  * Need to manually clean up that part rendered by other libraries (eg. using `componentWillUnmount()`)\n* Install dependencies for this: `meteor add accounts-ui accounts-password`\n* Try using native implementation of `bcrypt`: `meteor npm install --save bcrypt` (faster than JS-implementation used by default in Meteor)\n\n### Create collection `Bins`\n* Schema: createdAt, content, ownerId, sharedWith\n* Access current user by using `this.userId` inside of the Meteor methods\n* Use of `function` keyword vs `()=\u003e{}`:\n  * `this` inside an arrow function is the surrounding context\n  * Use `function` keyword, `this` can be referred to the runtime context, so we can use `this.userId`\n* Setup publish/subscribe system for providing bins from the server and displaying bins on the client\n  * Use `createContainer()` from `meteor/react-meteor-data` to subscribe the `bins` collection to the `BinsList` React component\n* Handle bin element `onClick` -\u003e use arrow function (only function definition without invoking) `onClick={() =\u003e this.onBinRemove(bin)}` instead of passing a `this.onBinRemove(bin)` function (this is invoked with probably incorrect `bin` argument) right in the JSX -\u003e can pass the correct `bin` argument into that function\n\n### Using React-Router for navigation\n* Use of `BrowserRoute`, `Route`, `Switch`\n* Access url params from React component using `props.match.params.paramName`\n* Alternative for anchor tag: `Link` from `react-router-dom`\n* Use `this.props.history.push(\"url_str\")` to redirect the user\n\n### Hook up the main editor\n* Using [React Codemirror](https://github.com/JedWatson/react-codemirror)\n* __Note__ on react-codemirror bug -\u003e editor doesn't re-render the component when state changes\n  * Use `\"@skidding/react-codemirror\": \"^1.0.0\"` for npm package instead of the original one\n  * Using `import CodeMirror from '@skidding/react-codemirror';`\n* Install dependencies:\n  * `npm install --save react-codemirror`\n  * `meteor add sgslo:cmstyle` for styling the editor\n* Use `onEditorChange(content)` to update and store bin content when user changes\n* `markdown` npm package for translate markdown str into html view\n* Use `dangerouslySetInnerHTML={{ __html: rawHtml }}` in a component to render html string as HTML. Unsafe because of higher chance for XSS to break the website\n\n### Sharing with other users\n* Create component for handle shared email\n* Setup new publication -\u003e publish all the bins that an user has been shared with\n  * `Meteor.users.find(...)` accesses `users` Mongo collection, auto-created by Meteor to stored registered users\n  * Subcribe to the new `sharedBins` publication for components: BinsMain and BinsList\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feriknguyen%2Freact-meteor-lab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feriknguyen%2Freact-meteor-lab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feriknguyen%2Freact-meteor-lab/lists"}