{"id":13510316,"url":"https://github.com/simpletut/Universal-React-Apollo-Registration","last_synced_at":"2025-03-30T15:31:14.327Z","repository":{"id":122183045,"uuid":"144763847","full_name":"simpletut/Universal-React-Apollo-Registration","owner":"simpletut","description":"Open Source Universal User Registration System – NodeJS React Apollo GraphQL JWT MongoDB","archived":false,"fork":false,"pushed_at":"2020-09-04T04:12:00.000Z","size":360,"stargazers_count":502,"open_issues_count":7,"forks_count":167,"subscribers_count":40,"default_branch":"master","last_synced_at":"2024-11-01T10:35:19.278Z","etag":null,"topics":["apollo-client","json-web-token","mongodb","nodejs","react-apollo","reactjs-boilerplate","server-side-rendering","universal-react","user-registration"],"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/simpletut.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-08-14T19:31:07.000Z","updated_at":"2024-10-22T09:47:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"af1d17ab-0be7-4a00-9041-6c590564b30d","html_url":"https://github.com/simpletut/Universal-React-Apollo-Registration","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FUniversal-React-Apollo-Registration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FUniversal-React-Apollo-Registration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FUniversal-React-Apollo-Registration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpletut%2FUniversal-React-Apollo-Registration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simpletut","download_url":"https://codeload.github.com/simpletut/Universal-React-Apollo-Registration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246338864,"owners_count":20761452,"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":["apollo-client","json-web-token","mongodb","nodejs","react-apollo","reactjs-boilerplate","server-side-rendering","universal-react","user-registration"],"created_at":"2024-08-01T02:01:33.393Z","updated_at":"2025-03-30T15:31:09.318Z","avatar_url":"https://github.com/simpletut.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","nodejs"],"sub_categories":[],"readme":"# Open Source Universal User Registration System – NodeJS React Apollo GraphQL JWT MongoDB\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"http://git-assets.react-starter-kit.com/logo.png\"\u003e  \n\u003c/p\u003e\n\n[![Build Status](https://travis-ci.org/simpletut/Universal-React-Apollo-Registration.svg?branch=master)](https://travis-ci.org/simpletut/Universal-React-Apollo-Registration) [![GitHub](https://img.shields.io/github/license/simpletut/Universal-React-Apollo-Registration.svg)](https://github.com/simpletut/Universal-React-Apollo-Registration/blob/master/LICENSE)\n\n### [Online Demo](https://react-user-registration.herokuapp.com/signup)\n\nAs the Demo is hosted on a free Heroku account, the servers its hosted on enter ‘sleep mode’ when not in use. If you notice a delay, please allow a few seconds for the servers to wake up.\n\n### YouTube Video Tutorials\n\n##### Introduction (Getting started)\n\n\u003ca href=\"http://www.youtube.com/watch?feature=player_embedded\u0026v=11C_TDB3Ijw\" target=\"_blank\"\u003e\n\t\u003cimg src=\"http://img.youtube.com/vi/11C_TDB3Ijw/0.jpg\" width=\"240\" height=\"180\" /\u003e\n\u003c/a\u003e\n\n### System includes:\n\n\nRegistration, Login, Dashboard, Email Password, Logout\n\nAccount Update, Edit User Profile\n\nBrowse Users, Public Profile Pages\n\nCookie Policy, Privacy Policy, T\u0026C’s, FAQ\n\n404 (Not Found)\n\nThe User Registration System is \u003cstrong\u003eFully Responsive\u003c/strong\u003e out the box and you can \u003cstrong\u003eRestrict Access\u003c/strong\u003e to any page!\n\n### Tech Stack:\n\n* NodeJS\n* React \n* Server-side Rendered\n* Apollo Client\n* GraphQL\n* MongoDB\n* JSON Web Tokens\n* Webpack\n* SASS\n* ESLint\n* Husky (pre-push)\n\n### Top Features:\n\n* Bcrypt password encryption/verification\n* CKEditor - WYSIWYG editor \n* File Upload – Profile Images\n* Nodemailer – Custom mail server used to send password reset emails\n* Custom ‘Password Reset’ Template (Built with MJML Framework)\n* Multiple Layouts – Create unlimited layouts for pages/routes\n* Toastr - Simple javascript toast notifications\n* 100% FREE \u0026 Open Source\n\n### Screenshot\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"http://git-assets.react-starter-kit.com/user-registration/UserRegDemo.jpg\"\u003e  \n\u003c/p\u003e\n\n## Table of Contents\n\n- [YouTube Video Tutorials](#youtube-video-tutorials)\n- [System includes](#system-includes)\n- [Tech Stack](#tech-stack)\n- [Top Features](#top-features)\n- [Screenshot](#screenshot)\n- [Software](#software)\n- [Useful links](#useful-links)\n- [Top Features](#top-features)\n- [Screenshot](#screenshot)\n- [Project architecture](#project-architecture)\n- [Download \u0026 Install Dependencies on your machine](#download--install-dependencies-on-your-machine)\n- [Configure Webpack](#configure-webpack)\n- [Set-up MongoDB](#set-up-mongodb-setting-up-your-database)\n- [Adding a User to your database](#adding-a-user-to-your-database)\n- [Connecting our Registration System to our Database](#connecting-our-registration-system-to-our-database)\n- [Configuring our Registration System to Connect to our Database](#configuring-our-registration-system-to-connect-to-our-database)\n- [JSON Web Tokens](#json-web-tokens)\n- [Mail Server (Send password recovery email)](#mail-server-send-password-recovery-email)\n- [Run a Build](#run-a-build)\n- [Lunch/Run the project](#lunchrun-the-project)\n- [Server \u0026 Client Bundles](#server--client-bundles)\n- [Unit tests](#unit-tests)\n- [Create new pages](#create-new-pages)\n- [Restrict Access (Authenticated Users Only)](#restrict-access-authenticated-users-only)\n- [Custom Layouts](#custom-layouts)\n- [Custom Page titles and SEO](#custom-page-titles-and-seo)\n- [12 Col Grid Boiler template](#12-col-grid-boiler-template)\n- [Acknowledgements](#acknowledgements)\n- [License](#license)\n\n\n## Getting Started\n\nThis repository contains the source code for User Registration System. This documentation will cover the installation on your localhost machine, project architecture and working with the app in general.\n\n## Project architecture\n\nFor a detailed guide through the project architecture and more information on configuring and deploying the system, please watch our YouTube Video Tutorial (Please scroll to the top ^)\n\n\n```\n├── src\n│   ├──_test_\n│   ├──assets\n│   |  ├── email_templates\n│   |  ├── graphics\n│   |  └── scss\n│   ├──components\n│   |  ├── auth\n|   |  |   └── editProfile_mutations\n│   |  ├── footer\n│   |  ├── header\n│   |  └── sidebar\n│   ├── helpers\n|   |   └── renderer\n│   ├── hoc\n|   |   ├── withAuth\n|   |   └── withSession\n│   ├── layouts\n|   |   └── mainLayout\n│   ├── models\n|   |   └── User\n│   ├── pages\n|   |   ├── auth\n|   |   |   ├── editProfile\n|   |   |   ├── forgotPassword\n|   |   |   ├── signIn\n|   |   |   ├── signOut\n|   |   |   ├── signUp\n|   |   |   └── updateAccount\n|   |   ├── policiesAndConditions\n|   |   |   ├── cookiePolicy\n|   |   |   ├── faq\n|   |   |   ├── privicyPolicy\n|   |   |   └── terms\n|   |   ├── 404\n|   |   ├── dashboard\n|   |   ├── user\n|   |   └── users\n│   ├── queries\n|   |   └── index\n│   ├── app\n│   ├── client\n│   ├── resolvers\n│   └── schema\n├── user-uploads\n│   └── profile-images\n├── package.json\n├── server.js\n├── variables.env\n├── webConfig.json\n├── webpack.client.js\n└── webpack.server.js\n```\n\n## Software \n\nBefore proceeding, please ensure you have the following software installed on your computer.\n\n* Node\n* Yarn (optional but recommended)\n* Git command line tools\n\n### Useful links\n\n* Download Git CLT - Windows: https://git-scm.com/download/windows Mac: https://git-scm.com/download/mac\n* Download Node - https://nodejs.org/en/\n* Download Yarn CLT - https://yarnpkg.com/lang/en/docs/install/\n* Download VSCode - https://code.visualstudio.com/\n\n## Installation\n\nPlease fork a copy of this repository. Forking a repository allows you to freely experiment with changes without affecting the original project. Alternatively download or clone the master branch.\n\n### Download \u0026 Install Dependencies on your machine \n\n1)\tClone the repo to your machine \n\n```\ngit clone \u003cCloneURL\u003e\n```\n\n2)\tWithin terminal or cmd ensure you have navigated inside the cloned directory and install the dependencies\n\n```\ncd \u003cnew-dir\u003e \nyarn install OR npm install\n```\n\n### Configure Webpack\n\nBefore we can build, run or deploy our app it is important to ensure that the 'webConfig.json' file is configured correctly for our environment. \n\n```\n{\n    \"siteURL\": \"http://localhost:3000\",\n    \"environment\": \"development\"\n}\n```\n\nPlease ensure that 'siteURL' is set to either localhost or your websites domain. You must update this before running a build or deploying your web app.\n\nIn the same way, set ‘environment’ to either ‘development’ or ‘production’. This will change the way webpack compiles your code.\n\n\n### Set-up MongoDB (Setting up your database)\n\nThis web app uses MongoDB to save, query and process data. Whilst you may have a preference of your service provider (AWS, Microsoft Azure etc…) we will be using ‘mlab’.\n\nPlease visit ‘mlab’ register/login to your account.\n\nLink- https://mlab.com/\n\n1)\tFrom your control panel select ‘Create new’\n2)\tChoose any of the Cloud Provider’s\n3)\tSelect the appropriate ‘Plan Type’ for you. For now, let’s select the ‘Free’ plan\n4)\tClick Continue \n5)\tSelect the ‘Region’ that’s closest to your location and click continue \n6)\tEnter a new database name and click continue\n7)\tConfirm your selections and click ‘Submit order’ (Free)\n\nThe database will now be created, and you will have been redirected back to your dashboard.\n\n### Adding a User to your database\n\n1)\tUnder ‘MongoDB Deployments’ click on the database you just created\n2)\tSelect ‘Users’\n3)\tSelect ‘Add database users’\n4)\tEnter a Username and Password and click ‘Create’\n\nPlease remember this information as we will need it later.\n\n\n### Connecting our Registration System to our Database\n\nWe need a ‘connection string’ provided by ‘mlab’ to link our Registration System with our Database. \n\nPlease ensure that you are still navigated inside the database you just created.\n\nIt looks something like this:\n\n```\nTo connect using a driver via the standard MongoDB URI:\n\nmongodb://\u003cdbuser\u003e:\u003cdbpassword\u003e@...\n\n```\nCopy this URL as we will need it later.\n\n\n### Configuring our Registration System to Connect to our Database\n\nWe are using Node Environment Variables to supply our app with some more sensitive information. This includes our mail server user \u0026 password. In addion to our JWT Secret.\n\nTo define, please go back to your terminal or cmd and write the following command\n\n```\nexport db_connection_string=\u003cYour-connection-string\u003e\n```\nPlease note: Windows users should use 'set' instead of 'export'\n\n### JSON Web Tokens\n\nWe store a JSON Web Token within a Cookie to verify users.\n\nFor security reasons, these Tokens have been configured to expire after 1 hour at which point the user will be asked to login again before continue browsing the website. (The expiration time can be updated within the signup and login resolvers).\n\nWhenever we check the validity of a Token, we compare it will a ‘Secret Key’ that is stored as a Node Environment Variable.\n\nTo define, please go back to your terminal or cmd and write the following command\n\n```\nexport jwt_secret_key=\u003cYour-json-web-token-secret-key\u003e\n```\nPlease note: Windows users should use 'set' instead of 'export'\n\nThis should be a random string of numbers and characters.\n\n\n### Mail Server (Send password recovery email)\n\nWe use a package called ‘Nodemailer’ to handle the sending of emails from our Node Server.\n\nAs we are using one-way password encryption, the account recovery tool automatically generates a new secure password and sends it to the email associated with the account.\n\nBefore you can use this feature, you will need to configure ‘Nodemailer’.\n\n1)\tOpen ‘config/default.json’ in your chosen text editor\n2)\tUpdate your mail server host and from email address.\n\nFor security reasons we store your mail server 'user' and 'password' in Node Environment Variables.\n\nTo define, please go back to your terminal or cmd and write the following commands\n\n```\nexport mailServer_user=\u003cYour-mail-server-user\u003e\nexport mailServer_pass=\u003cYour-mail-server-password\u003e\n```\nPlease note: Windows users should use 'set' instead of 'export'\n\nYou may need to contact your provider for this information\n\n### Run a Build\n\nBefore we can lunch the project, we need to run a build\n\n```\nyarn run build OR npm run build \n```\n\n### Lunch/Run the project\n\nNow we have a build, lets run the project\n\n```\nyarn run dev OR npm run dev \n```\n\nYour project is now running on: http://localhost:3000\n\n\n### Server \u0026 Client Bundles\n\nWebpack outputs both a Server and Client bundle.\n\nFor security reasons, the server bundle exits outside of the public directory, which means that the file is NOT publicly accessible.\n\nWebpack is also configured not to bundle any libraries that exist in the 'node_modules' folder into the server bundle as they are not needed.\n\n\n### Unit tests\n\nWriting unit tests is recommended for any new features or logic that you develop.\n\nWhilst we are primarily using 'Jest' (framework from Facebook), to write our unit tests we are using a number of other libraries for testing. Please see the 'package.json' file for more information.\n\nWe are currently writing tests for the following:\n\n- Components\n- Queries\n- Mutations\n\nThere are two commands you can use to run tests. \n\n1. yarn test OR npm test\n\n-\tThis will run your initial tests.\n\n2. yarn test-coverage OR npm test-coverage\n\n-\t Shows test coverage across our application.\n\nPlease note: not all code within our project requires testing or is testable.\n\n#### When should I run these tests?\n\nYou should run these unit tests before pushing any work to a remote branch. Please do not approve any PR’s into the dev branch without the proper unit tests having been written.\n\nIn the event a test fails, please ensure any relevant errors are resolved prior to committing the changes or creating a new PR.\n\n\n## General usage \n\n### Create new pages\n\n1)\tCreate a file in the following directory ‘src/pages’ \n\nTo help maintain consistence please use the same naming conventions as the other files. (camel casing) \n\n\n2)\tBuild your new page. For example:\n\n```\nimport React from 'react';\n\nclass NewPage extends React.Component {\n    render(){\n        return(\n            \u003cdiv\u003e\n\n            \u003c/div\u003e\n        )\n    }\n}\n\nexport default NewPage;\n\n```\n\n3)\tOpen ‘src/app.js’ and import your new Page Component \n\n```\nimport NewPage from './pages/newPage;\n```\n\n4)\tAdd a new route to the Root constant\n\n```\n\u003cRoute path=\"/new-page\" render={props =\u003e (\n    \u003cMainLayout\u003e\n        \u003c NewPage {...props} session={session} /\u003e\n    \u003c/MainLayout\u003e\n)} /\u003e\n\n```\n\nBased on the example above, you can visit the new page via the following URL:\n\nhttp://localhost:3000/new-page\n\n\n\n### Restrict Access (Authenticated Users Only)\n\nFollow these steps to prevent unauthenticated users from accessing your chosen pages/routes\n\n1)\tOpen ‘src/app.js’ and find your chosen route within the ‘Root’ constant\n2)\tIf not already pass the ‘session’ as props to your Component\n\n```\n\u003cRoute path=\"/dashboard\" render={props =\u003e (\n    \u003cMainLayout\u003e\n        \u003cDeshboard {...props} session={session} /\u003e\n    \u003c/MainLayout\u003e\n)} /\u003e\n\n```\n\nNotice the ‘session={session}’ on the ‘Deshboard’ Component. \n\n3)\tOpen you’re the JS file accociated with your Chossen Compoent. For example, ‘src/pages/dashboard.js’\n4)\tImport ‘withAuth’. This is a higher order component.\n\n```\nimport withAuth from './../hoc/withAuth';\n```\nPlease ensure that the path is correct based on your component file.\n\n5)\tWrap your export with our our ‘withAuth’ higher order component. \n\n```\nexport default withAuth(session =\u003e session \u0026\u0026 session.getCurrentUser)(Dashboard);\n```\n\nPlease note: If you copy/paste this line, please ensure you update ‘Dashboard’ with the name of the Class your exporting.\n\n\nThat’s it! \n\nUser will now need to LogIn before accessing this page/route\n\n\n\n### Custom Layouts \n\nYou can create a custom layout for any page/route.\n\n1)\tCreate a new layout file within ‘src/layouts’\n2)\tEnsure you have a constructer at the top of your class\n\n```\nconstructor(props) {\n    super(props)\n}\n\n```\n\n3)\tPlace the following code within your layout, wherever you want to render your routes\n\n```\n{this.props.children}\n```\n\n4)\tOpen ‘src/app.js’ and import your new layout \n\n```\nimport LayoutComponent from './layouts/ layoutComponent;\n```\n\n5)\tWithin your ‘Root’ constant, create your new route and wrap the route with your layout Component \n\n```\n\u003cRoute path=\"/my-new-page\" render={props =\u003e (\n    \u003c LayoutComponent \u003e\n        \u003cMyRoute {...props} session={session} /\u003e\n    \u003c/ LayoutComponent\u003e\n)} /\u003e\n```\n\n### Custom Page titles and SEO\n\nWe use a package called ‘helmet’ to set custom page titles and add meta tags on pages within our app.\n\n1)\tOpen the page component you wish to add custom page title\n2)\tCopy the following code just above the render method:\n\n```\nhead() {\n    return (\n        \u003cHelmet bodyAttributes={{ class: \"myClassName\" }}\u003e\n            \u003ctitle\u003eMy new page title\u003c/title\u003e\n        \u003c/Helmet\u003e\n    );\n}\n```\n\n3)\tCall this method anywhere within your return statement\n\n```\nrender() {\n\n    return (\n        \u003cdiv className=\"grid pageHeaderSection\"\u003e\n        {this.head()}\n            \u003cdiv className=\"column column_12_12\"\u003e\n                \u003cdiv className=\"content_wrap\"\u003e\n                    \u003ch2\u003eUsers\u003c/h2\u003e\n                    \u003cp className=\"desc\"\u003e\n                        Lorem Ipsum is simply dummy text of the printing and typesetting…\n```\n\n\n## Styles\n\nWe are using SCSS (CSS pre-processor/bracketed version of SASS) to enable us to write cleaner and more reusable css code.\n\n## CSS\n\nIn order to ensure the integrity of the project and long-term maintainability, we recommend the following rules:\n\n- Media queries should be written/maintained within '_responsive.scss'.\n- REM CSS measurement units:\n\nWe are using rem's to style our app. Whilst you should not use any other measurement unit, it is correct to use ‘px’ for certain properties. For example, you should still use 'px' for setting a border or the width of a media query to ensure more accurate break points.\n\nThe root font size is set to '10px'. This means the calculation required to implement rem’s is simple: (target font size / 10 OR 18 / 10 = 1.8rem).\n\n#### 'config.js' \n\nPlease utilize our configuration partial file wherever possible. This contains global variables for generic/brand colours, keyframes, mixins and more! For consistency please reference these instead of redefining where possible (or add to this file).\n\n## 12 Col Grid Boiler template\n \nWe are using a 12 Column Grid that works as follows:\n \nThe grid has 12 columns\n \nEach columns width is a % value that can be calculated using the following:\n\n```\nTarget Columns (Example '6')\nMinus Number of Total Columns (12)\nTimes 100 = 50%\n```\n\nExample HTML mark-up for a 2-column layout:\n\n```\n\u003cdiv class=\"grid\"\u003e\n \n  \u003cdiv class=\"column column_6_12\"\u003e\n    Half\n  \u003c/div\u003e\n  \n  \u003cdiv class=\"column column_6_12\"\u003e\n    Half\n  \u003c/div\u003e\n \n\u003cdiv\u003e\n```\n \nEach column has a ‘20px’ gutter/ Each column has 10px padding on either side.\n\nThe grid should not be used within areas that require custom mark-up (such as your header/footer) to avoid having to override default styling. This will ensure the integrity of the code. Please DO NOT apply any styling to the grid directly. These should be global classes which are not overridden (ensures you will not break styling in other places).\n\nTo centre your content, simply apply a 'max-width' to the parent wrapper '.grid'. You can either set this globally within the '_css_grid.scss' partial file or target it specifically via a custom parent class.\n\n\n## Looking for something similar?\n\n[Open Source Universal React Redux Boilerplate](https://github.com/simpletut/React-Starter-Kit)\n\n## Acknowledgements\n\nThis software was developed by Ashley Bibizadeh.\n\n## License\n\nThe User Registration System is open source software licensed as MIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimpletut%2FUniversal-React-Apollo-Registration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimpletut%2FUniversal-React-Apollo-Registration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimpletut%2FUniversal-React-Apollo-Registration/lists"}