Contacts Manager

A full-stack contact management web application built with Node.js, Express, MySQL, and vanilla JavaScript.

The application supports user authentication and allows authenticated users to create, view, edit, and delete contacts. Passwords are hashed with bcrypt, sessions are handled with Express, and database credentials are stored using environment variables.

Features

• User account creation and login
• Password hashing with bcrypt
• Session-based authentication
• Protected application routes
• Create, view, edit, and delete contacts
• MySQL database integration
• Server-side rendering with Pug for contact editing
• Input validation and parameterized SQL queries

Tech Stack

Backend: Node.js, Express.js Database: MySQL Frontend: HTML, CSS, JavaScript Templating: Pug Authentication: bcrypt, express-session

Running Locally

1. Clone the repository

git clone https://github.com/derpy-pug/Contacts-Manager.git
cd Contacts-Manager

2. Install dependencies

npm install

3. Configure the database

Create a MySQL database and add the following tables:

CREATE TABLE users (
    username VARCHAR(255) PRIMARY KEY,
    password VARCHAR(255) NOT NULL
);

CREATE TABLE contacts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    address VARCHAR(255) NOT NULL,
    info TEXT NOT NULL,
    email VARCHAR(255) NOT NULL,
    url VARCHAR(255) NOT NULL
);

4. Configure environment variables

Copy the example environment file:

cp .env.example .env

Then configure .env with your MySQL connection:

DB_HOST=localhost
DB_PORT=3306
DB_USER=your_username
DB_PASSWORD=your_password
DB_NAME=your_database

The .env file is excluded from Git so database credentials are not committed to the repository.

5. Start the server

node server.js

Then open:

http://localhost:4131

Create an account, log in, and you can begin managing contacts.

Project Structure

Contacts-Manager/
├── server.js             # Express server, authentication, and database API
├── .env.example          # Example database configuration
├── static/
│   ├── html/             # Application pages
│   ├── css/              # Stylesheets
│   ├── js/               # Frontend JavaScript
│   ├── img/              # Images
│   └── views/            # Pug templates
├── package.json
└── README.md