Contacts Web App

Live Preview.

A simlple contacts app that let's you send OTP to your contacts
View Demo

Steps to replicate

Backend

• Node has to be installed onto your system
• add a .env file into the parent directory with the following contents:

//a connection url for the mongoDB
DATABASE = mongodb+srv://<username>:<password>@<cluster_name>/
ContactApp?retryWrites=true&w=majority
PORT = 8080

//twilio SID
TWILIO_SID = XXXXXXXXXXXXXXXXXXXXXXXX
//twilio auth token
TWILIO_AUTH_TOKEN = XXXXXXXXXXXXXXXXXXXXXXXX

• Installing the dependencies

npm install

• Running the server

npm run server

Frontend

• Go into the front-end directory

cd front-end

• Install the dependencies

npm install

• Running the front-end

npm start

After successfully following the listed steps Backend server is running at http://localhost:8080 Frontend is running at http://localhost:3000

The contact list can be updated by updating the contacts.json file in front-end/src/Contacts.json

[
    {
        "image": "https://randomuser.me/api/portraits/men/52.jpg",
        "firstname": "Testing",
        "lastname": "Contact",
        "mobile": 9810153260,
        "countryCode": 91,
        "profession": "Architect",
        "address": "New Delhi,Delhi,110002",
        "email": "shaleelahmed3@gmail.com"
    },
    {
        "image": "https://randomuser.me/api/portraits/men/57.jpg",
        "firstname": "Shaleel",
        "lastname": "Ahmed",
        "mobile": 8860962227,
        "countryCode": 91,
        "profession": "Architect",
        "address": "New Delhi,Delhi,110002",
        "email": "shaleelahmed3@gmail.com"
    }
]

adding another object with same keys fill create a new contact

Built With

The backend of this app is made with NodeJS with the following libraries being used :

• ExpressJS (for making the web server)
• Mongoose (it is an ODM that let our app connect to the mongoDB databse)
• HTTP-Errors (it let us throw meaningful errors to the client)
• Twilio (https://www.npmjs.com/package/twilio) (it let us access our twilio account for sendind text messages) -Dotenv (it let us load environment variables into our code)

Our backend app follows MVC design pattern with the following folder structure

back-end
    |
    └───models
    |
    └───controllers
    |
    └───routes

The front-end of this app is being made with ReactJS with the following third party libraries being used :

• styled-components(this library let us write CSS in JS, also this provides various features like passing props to a styled-component which reduces the complexity for creating complex user interfaces)

• cogo-toast(this library let us show beautiful toast messages in our app)

Contact

Shaleel Ahmed - Linkedin - shaleelahmed3@gmail.com

Project Link: https://github.com/Shaleel/contacts-app

Acknowledgments

I would like to give credit to the following resources that have helped me in creating this project successfully!

• Loading.io
• Mongoose Docs