Contact-Keeper

A web application for users to save their contacts. (Full Stack Development with MERN)

Demo

view the demo.

Tech stacks

React.JS, MongoDB, Express.js, Node.js, JWT, MERN stack, Java, JavaScript, HTML 5, CSS

Highlight

Developed an interactive web page for users to add, update, create and view contacts with React.js ( with React Hooks and Context API for state management).
Used Node.js and Express.js for creating contacts and users API for the frontend to interact as well as the user authentication is based on JWT(JSON Web Token).
Built with MongoDB to store the users' data and contacts data.

RESTful APIs

RESTful API for contacts that uses JWT authentication.
All contact endpoints are protected and each registered user has their own contacts.

API Usage & Endpoints

Register a User [POST /api/users]

• Request: Add user and request JSON web token

  • Headers

    Content-type: application/json
    

  • Body

        {
          "name": "",
          "email": "",
          "password": ""
        }
    

• Response: 200 (application/json)

  • Body

      {
        "token": ""
      }
    

Login with a User [POST /api/auth]

• Request: Login with credentials to recieve a JSON web token

  • Headers

    Content-type: application/json
    

  • Body

        {
          "email": "",
          "password": ""
        }
    

• Response: 200 (application/json)

  • Body

      {
        "token": ""
      }
    

Get Contacts [GET /api/contacts]

• Request: Get all contacts of a specific user

  • Headers

    x-auth-token: YOURJWT
    

• Response: 200 (application/json)

  • Body

      {
        "contacts": []
      }
    

Add New Contact [POST /api/contacts]

• Request: Add a new contact

  • Headers

    x-auth-token: YOURJWT
    Content-type: application/json
    

  • Body

        {
          "name": "",
          "email": "",
          "phone": "",
          "type": "" [personal or professional]
        }
    

• Response: 200 (application/json)

  • Body

      {
        "contact": {}
      }
    

Update Contact [PUT /api/contacts/:id]

• Request: Update existing contact

  • Parameters

    • id: 1 (number) - An unique identifier of the contact.

  • Headers

    x-auth-token: YOURJWT
    Content-type: application/json
    

  • Body

        {
          "name": "",
          "email": "",
          "phone": "",
          "type": "" [personal or professional]
        }
    

• Response: 200 (application/json)

  • Body

      {
        "contact": {}
      }
    

Delete Contact [DELETE /api/contacts/:id]

• Request: Delete existing contact

  • Parameters

    • id: 1 (number) - An unique identifier of the contact.

  • Headers

    x-auth-token: YOURJWT
    

• Response: 200 (application/json)

  • Body

      {
        "msg": "Contact removed"
      }
    

Usage

Install dependencies

npm install
npm client-install

Mongo connection setup

Edit your /config/default.json file to include the correct MongoDB URI

Run Server

npm run dev
npm run server
npm run client