在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):simpletut/Universal-React-Apollo-Registration开源软件地址(OpenSource Url):https://github.com/simpletut/Universal-React-Apollo-Registration开源编程语言(OpenSource Language):JavaScript 65.1%开源软件介绍(OpenSource Introduction):Open Source Universal User Registration System – NodeJS React Apollo GraphQL JWT MongoDBOnline DemoAs 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. YouTube Video TutorialsIntroduction (Getting started)System includes:Registration, Login, Dashboard, Email Password, Logout Account Update, Edit User Profile Browse Users, Public Profile Pages Cookie Policy, Privacy Policy, T&C’s, FAQ 404 (Not Found) The User Registration System is Fully Responsive out the box and you can Restrict Access to any page! Tech Stack:
Top Features:
ScreenshotTable of Contents
Getting StartedThis 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. Project architectureFor 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 ^)
SoftwareBefore proceeding, please ensure you have the following software installed on your computer.
Useful links
InstallationPlease 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. Download & Install Dependencies on your machine
Configure WebpackBefore we can build, run or deploy our app it is important to ensure that the 'webConfig.json' file is configured correctly for our environment.
Please 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. In the same way, set ‘environment’ to either ‘development’ or ‘production’. This will change the way webpack compiles your code. Set-up MongoDB (Setting up your database)This 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’. Please visit ‘mlab’ register/login to your account. Link- https://mlab.com/
The database will now be created, and you will have been redirected back to your dashboard. Adding a User to your database
Please remember this information as we will need it later. Connecting our Registration System to our DatabaseWe need a ‘connection string’ provided by ‘mlab’ to link our Registration System with our Database. Please ensure that you are still navigated inside the database you just created. It looks something like this:
Copy this URL as we will need it later. Configuring our Registration System to Connect to our DatabaseWe are using Node Environment Variables to supply our app with some more sensitive information. This includes our mail server user & password. In addion to our JWT Secret. To define, please go back to your terminal or cmd and write the following command
Please note: Windows users should use 'set' instead of 'export' JSON Web TokensWe store a JSON Web Token within a Cookie to verify users. For 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). Whenever we check the validity of a Token, we compare it will a ‘Secret Key’ that is stored as a Node Environment Variable. To define, please go back to your terminal or cmd and write the following command
Please note: Windows users should use 'set' instead of 'export' This should be a random string of numbers and characters. Mail Server (Send password recovery email)We use a package called ‘Nodemailer’ to handle the sending of emails from our Node Server. As 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. Before you can use this feature, you will need to configure ‘Nodemailer’.
For security reasons we store your mail server 'user' and 'password' in Node Environment Variables. To define, please go back to your terminal or cmd and write the following commands
Please note: Windows users should use 'set' instead of 'export' You may need to contact your provider for this information Run a BuildBefore we can lunch the project, we need to run a build
Lunch/Run the projectNow we have a build, lets run the project
Your project is now running on: http://localhost:3000 Server & Client BundlesWebpack outputs both a Server and Client bundle. For security reasons, the server bundle exits outside of the public directory, which means that the file is NOT publicly accessible. Webpack is also configured not to bundle any libraries that exist in the 'node_modules' folder into the server bundle as they are not needed. Unit testsWriting unit tests is recommended for any new features or logic that you develop. Whilst 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. We are currently writing tests for the following:
There are two commands you can use to run tests.
Please note: not all code within our project requires testing or is testable. When should I run these tests?You 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. In the event a test fails, please ensure any relevant errors are resolved prior to committing the changes or creating a new PR. General usageCreate new pages
To help maintain consistence please use the same naming conventions as the other files. (camel casing)
Based on the example above, you can visit the new page via the following URL: http://localhost:3000/new-page Restrict Access (Authenticated Users Only)Follow these steps to prevent unauthenticated users from accessing your chosen pages/routes
Notice the ‘session={session}’ on the ‘Deshboard’ Component.
Please ensure that the path is correct based on your component file.
Please note: If you copy/paste this line, please ensure you update ‘Dashboard’ with the name of the Class your exporting. That’s it! User will now need to LogIn before accessing this page/route Custom LayoutsYou can create a custom layout for any page/route.
Custom Page titles and SEOWe use a package called ‘helmet’ to set custom page titles and add meta tags on pages within our app.
StylesWe are using SCSS (CSS pre-processor/bracketed version of SASS) to enable us to write cleaner and more reusable css code. CSSIn order to ensure the integrity of the project and long-term maintainability, we recommend the following rules:
We 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. The 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). 'config.js'Please 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). 12 Col Grid Boiler templateWe are using a 12 Column Grid that works as follows: The grid has 12 columns Each columns width is a % value that can be calculated using the following:
Example HTML mark-up for a 2-column layout:
Each column has a ‘20px’ gutter/ Each column has 10px padding on either side. The 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). To 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. Looking for something similar?Open Source Universal React Redux Boilerplate AcknowledgementsThis software was developed by Ashley Bibizadeh. LicenseThe User Registration System is open source software licensed as MIT. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论