felmez/user-listing

MERN and GraphQL based user listing CRUD app

MERN and GraphQL based user listing app

Explore the docs »

View Demo · View GIFs · Demonstration Video · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
   • Demo Links
2. Getting Started
   • Prerequisites
   • Installation
3. Contributing
4. License
5. Contact
6. Acknowledgements

About The Project

This is a basic user listing app where you can create new users using GraphQL Mutation (See: GraphQL Mutations and Queries ) and fetch them using Query but also having the server-side form and input validations like empty fields, wrong user role, not matching passwords, format validation, and already used email check. There is also custom rate limiting (See: Rate Limiting ) configure so users can not create too many users in a limited time which may prevent or limit the server costs and also enhance security.

Built With

• 
• 
• 
• 
• 
• 
• 
• 

Demo

• Client (frontend) link:
• Server (backend) link:

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

• git

  if (you have brew installed ) {
    use this command => 'brew install git'
  } else {
    download the installer from the official website => https://git-scm.com/downloads
  }

• node

  if (you have brew installed) {
    use this command => 'brew install node'
  } else {
    download the installer from the official website => https://nodejs.org/en/
  }

What is brew ?? (See: Homebrew Package Manager)

Installation

This repo/project has two different branches/directories for different use

main/server branch (root directory) for server side (graphql)
client branch (client directory) for client side (react)

1. Clone the repo

   git clone https://github.com/felmez/user-listing.git

2. Install npm packages on both branches

   cd user-listing

   on main branch/directory
   npm install
   
   on client branch/directory
   git checkout client (* optional for separation of concerns)
   npm install

3. Create environment variables

if (you will serve on localhost) {
  if (on main branch/directory) {
    3.1 - create config.js file 

    3.2 - paste the follow code 

      ```
          module.exports = {
          MONGODB: 'mongodb+srv://<username>:<password>@<clustername>.<linkprefix>.mongodb.net/<dbname>?retryWrites=true&w=majority'
          } 
      ```

    3.3 - change the URI strings to your own MongoDB credentials
  }

  if (on client branch/directory) {
    3.4 - on ApolloProvider.js change uri to your server link
  }
  

} else if (you will use some SaaS hosting services like heroku, netlify etc){
  use process.ENV configurations depending on your service type
}

4. You are good to go

on main branch/directory => 
if (you need to watch changes) {
  'nodemon index'
} else {
  'node index'
}
on client branch/directory => 
'npm start'

5. Sample GraphQL requests

  query Query {
    getUsers {
      email
      id
      name
    } 
  }


  mutation Mutation{
    createUser(createInput:{
      name: "john doee"
      email: "johnnny@idkk.com"
      role: "normal"
      password: "New12345@"
      confirmPassword: "New12345@"
    })
    {
      id
      name
      email
      role
    }
  }

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Souhaib Felmez

• Email: sofelmez {at} gmail {dot} com
• 

Acknowledgements

• 
•