{"id":20169959,"url":"https://github.com/cnocon/fullstack-node-react","last_synced_at":"2026-05-12T15:32:44.000Z","repository":{"id":124609173,"uuid":"112289641","full_name":"cnocon/fullstack-node-react","owner":"cnocon","description":"Work for \"Node with React: Fullstack Web Development\"","archived":false,"fork":false,"pushed_at":"2017-12-04T20:07:08.000Z","size":776,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T04:15:25.505Z","etag":null,"topics":[],"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/cnocon.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-11-28T05:21:56.000Z","updated_at":"2017-12-06T06:24:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"505c2898-3e57-4d57-ba3f-c284e2c48d6e","html_url":"https://github.com/cnocon/fullstack-node-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cnocon/fullstack-node-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Ffullstack-node-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Ffullstack-node-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Ffullstack-node-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Ffullstack-node-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cnocon","download_url":"https://codeload.github.com/cnocon/fullstack-node-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Ffullstack-node-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32945391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-12T09:19:52.626Z","status":"ssl_error","status_checked_at":"2026-05-12T09:17:33.438Z","response_time":102,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":[],"created_at":"2024-11-14T01:14:57.518Z","updated_at":"2026-05-12T15:32:43.964Z","avatar_url":"https://github.com/cnocon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n```js\n/**\n  * Cool refactor!\n  *\n  * 1. When we require the authRoutes file, it returns a FUNCTION because that's what we exported from that file!\n  * 2. So what we did was immediately call the function returned from the require with the proper argument, `app`, for that function. Awesome.\n  */\nrequire('./routes/authRoutes')(app);\n\n```\n\n# IMPORTANT! Make sure you npm install stuff inside the `server` directory!\n\n# Feedback Email Campaign and Report Application\n\nThe overall project built in this course is a mass email sender, then collection of feedback from email and tabulating that data. \n\n1. Start node server `node index.js` from server directory.\n* You have to restart node server when adding new routers (e.g. app.get)\n\n2. Load `localhost:5000` in your browser.\n\n---\n*To start auto-reload server on changes while you're developing, you can use:*\n`npm run dev`\n---\n\n# DEPLOYMENT\n\n## Deployment Checklist\n\n![Deployment Checklist Diagram](https://www.dropbox.com/s/k4r35i2geyh1ghn/Screenshot%202017-11-28%2002.35.28.png?raw=1)\n\n*1. Dynamic Port Binding*\n* Heroku tells us which port our app will use, so we need to make sure we listen to the port they tell us to.\n\n*2. Specify Node Environment*\n* We want to use a specific version of node, so we need to tell Heroku which version that is that we want.\n\n*3. Specify start script*\n* Instruct Heroku which command to run to start our server running.\n\n*4. Create .gitignore file*\n* We don't want to include dependencies since Heroku will do that for us.\n\n## How to deploy our application\n\nA lot of services, not just Heroku, use this same process for deployment, so it's nifty to know.\n\nyou do a git init in the *server* directory\nthen you set the upstream to git repo given after you run \n\n```bash\n# you must be in server directory!!!!!!\n➜  server git:(master) heroku create\nCreating app... done, ⬢ fathomless-river-47538\nhttps://fathomless-river-47538.herokuapp.com/ | https://git.heroku.com/fathomless-river-47538.git\n```\n\n`git remote add heroku https://git.heroku.com/fathomless-river-47538.git`\n`git push heroku master`\n\nIf you run to issues, run `heroku logs` to get some error info for what went wrong during the deployment.\n\n## How to redeploy our application\nYou just commit changes and push to heroku master. Very logical.\n\n---\n\n## Flow of Application\n- Assumption is that the email sent out is to collect feedback from users of a startup app (owned by the Admin/our client).\n\n### 1. Admin signs up via Google OAuth\n* Express server + MongoDB + PassportJS\n** PassportJS makes OAuth side easier to set up, although it has it's own set of challenges.\n\n### 2. Admin pays for email credits via stripe\n* Stripe + MongoDB\n** Stripe will handle everything around billing/payments, but again, has edge cases that can be challenging.\n** We'll record payments from admin users in MongoDB database.\n\n### 3. Admin creates a new 'campaign' (the survey for the email)\n* React + Redux\n** Whenever a user attempts to create a new campaign/survey \n\n### 4. Admin enters list of email recipients for the survey\n* React + Redux + Redux Form\n** When the user enters emails for the campaign, and details they want to collect\n\n### 5. We send email to list of recipients/users.\n* 3rd Party Email Provider\n\n### 6. Recipients/users click on link in email to give feedback on the app in question.\n* Email Provider + Express + Mongo\n** Record the feedback provided by the users/recipients. \n\n### 7. We tabulate the response data/feedback\n* Mongo + MongoDB\n** Mongo to retrieve data, and MongoDB will have the feedback stored. \n\n### 8. Admin can see all survey responses.\n* Mongo + React + Redux\n** For the report of all the feedback, which we'll retrieve via Mongo.\n\n---\n\n#### MongoDB -\u003e Express/Node API \u003c--[HTTP Request (JSON)]--\u003e React App\n\n*React app will never talk directly to MongoDB database. Instead, we put the _Express API_ between React and MongoDB*\n* Express API has a ton of business logic to take incoming requests from the React Application, pull info from MongoDB database, then to send that information back to React side of our app.\n* *_Important!_* The Express API must exist between the React app and MongoDB. React and the MongoDB cannot communicate directly. \n\n---\n\n## Installation/Setup\n- new node project, then install express inside of it\n-- package.json is hub of our project; central\n\n\n# Definitions\n*Node*: Javascript runtime used to execute code _OUTSIDE_ of the browser (traditionally Javascript was executed inside the browser). _Used simply to execute code outside of the browser; in some arbitrary environment, like my laptop, his desktop, etc._\n* Runtime: In computer science, run time, runtime or execution time is the time during which a program is running, in contrast to other program lifecycle phases such as compile time, link time and load time.\n\n*Express*: Library that uses the NodeJS runtime. IT IS NOT A STANDALONE THING. Library that runs in the Node runtime. Has helpers to make dealing with HTTP traffic easier. _Its a collection of functions or helpers for working with HTTP aspects of nodejs a little easier. It's not its own runtime. It just makes writing servers a little easier. Everything inside this express library, we could, in theory, implement from scratch using just node and plain javascript. But it's a helpful library that does that HTTP stuff for us._\n* *Express.js (or simply Express)*: A web application framework for Node.js designed for building web applications and APIs. It is in fact the standard server framework for Node.js. _expressjs apps can be integrated with different databases_\n\n---\n\n![HTTP Request Diagram](https://www.dropbox.com/s/vf0lpjxevtrd9lz/Screenshot%202017-11-28%2002.05.02.png?raw=1)\n\nWhen you run a server on your local machine, it is going to be listening for HTTP traffic on an individual, single port. It's like a door through which traffic like HTTP requests can be routed. \nOur browser can issue HTTP request to a specific port. We'll configure node and express to listen to traffic attempting to access a specific port. That inflow of information is listened for by node, then node hands it off to the express side of the application in a handoff. \nExpress then looks at request and decides what logic in our application will respond to the incoming request.\n* Route Handlers: used to handle HTTP requests asking for a specific service that we write for our specific application.\n* Route handlers then process the request and generate a response, which gets sent back to the running node process. Then node creates a new response and hands it off to the incoming HTTP request?\n_Summary: Underlying Node runtime listens for traffic on specific port. When some traffic comes in, it's then routed to the express side of our application. You and I route some logic that handles incoming requests and formulates and sends out a response that gets routed back to whoever made the original request._\n\n\n---\n\n## Repo Name: _fullstack-node-react_\n\nWork for [Udemy Course: Node with React: Fullstack Web Development](https://www.udemy.com/node-with-react-fullstack-web-development/learn/v4/overview)\n\nInstructor's [companion repo for the course](https://github.com/StephenGrider/FullstackReactCode)\n\n---\n\n### Course Resources: FullStackReact\n\u003csup\u003e(from [Google Doc by Instructor](https://docs.google.com/document/d/1yZ5sM5xTIxcv0LqMyj__vOWIXRri4TH_3lMu1qPBQjA/edit?ts=5a1cf79e#heading=h.kk1966kbedef))\u003c/sup\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcnocon%2Ffullstack-node-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcnocon%2Ffullstack-node-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcnocon%2Ffullstack-node-react/lists"}