Skip to content

7Chethan007/ContactManagerApp

BranchesTags

Repository files navigation

Contact Manager - Full Stack Application

🌐 Live Application

🚀 Live Demo: https://contact-manager-chethan-2025-c4aef6398bf1.herokuapp.com/

📱 Features Available:

  • ✅ Modern Dark UI - Beautiful minimalistic design with glassmorphism effects
  • ✅ User Authentication - Secure JWT-based login/registration
  • ✅ Contact Management - Full CRUD operations with real-time updates
  • ✅ Responsive Design - Works seamlessly on desktop, tablet, and mobile
  • ✅ 15-70-15 Layout - Optimized spacing for better user experience
  • ✅ Auto-Sleep Optimization - Cost-effective hosting with 30-min auto-sleep

🎯 Quick Start - Try the Live App

  1. Visit: Contact Manager App
  2. Register: Create your account with username, email, and password
  3. Login: Access your personal contact dashboard
  4. Manage Contacts: Add, edit, search, and organize your contacts

A comprehensive full-stack Contact Manager application with modern dark UI and secure user authentication, built with Node.js, Express.js, MongoDB, and vanilla JavaScript.

🚀 Features

Frontend Features

  • 🎨 Modern Dark Theme: Minimalistic design with glassmorphism effects
  • 📱 Responsive Layout: 15-70-15 optimized layout for all devices
  • 🔐 Secure Authentication: JWT-based user registration and login
  • 📇 Contact Management: Intuitive CRUD operations with real-time feedback
  • 🔍 Search Functionality: Real-time contact search and filtering
  • 💫 Smooth Animations: Professional transitions and hover effects
  • 👤 User Dashboard: Personalized welcome with contact statistics

Backend Features

  • User Authentication: Secure user registration and login with JWT tokens
  • Contact Management: Full CRUD operations for contacts
  • User-Specific Data: Each user can only access their own contacts
  • Password Security: Passwords are hashed using bcrypt
  • MongoDB Integration: Persistent data storage with Mongoose ODM
  • Error Handling: Comprehensive error handling with custom middleware
  • Input Validation: Server-side validation for all endpoints
  • Environment Configuration: Secure configuration management with dotenv

Deployment Features

  • 🌐 Live on Heroku: Professional hosting with auto-sleep for cost optimization
  • 🔒 HTTPS Secured: Free SSL certificate for secure connections
  • 🗄️ Cloud Database: MongoDB Atlas integration for reliable data storage
  • 📊 Monitoring: Real-time logs and performance tracking

🛠️ Tech Stack

Frontend

  • HTML5: Semantic markup with modern structure
  • CSS3: Custom dark theme with glassmorphism effects and responsive design
  • JavaScript (ES6+): Vanilla JavaScript for API integration and DOM manipulation
  • Bootstrap 5.3.2: Component framework for responsive UI
  • Font Awesome: Professional icons for enhanced UX

Backend

  • Backend: Node.js, Express.js
  • Database: MongoDB with Mongoose ODM
  • Authentication: JSON Web Tokens (JWT)
  • Password Hashing: bcrypt
  • Environment Management: dotenv
  • Development: nodemon for auto-restart

Deployment & Hosting

  • Frontend & Backend: Heroku (with auto-sleep optimization)
  • Database: MongoDB Atlas (Free 512MB tier)
  • SSL: Heroku automatic HTTPS
  • Domain: .herokuapp.com subdomain

📋 Prerequisites

Before running this application, make sure you have the following installed:

⚡ Quick Start

1. Clone the Repository

git clone https://github.com/7Chethan007/ContactManagerApp.git
cd ContactManagerApp

2. Install Dependencies

npm install

3. Environment Setup

Create a .env file in the root directory:

PORT=5000
CONNECTION_STRING=mongodb+srv://username:password@cluster.mongodb.net/mycontacts-backend?retryWrites=true&w=majority
ACCESS_TOKEN_SECRET=your_super_secret_jwt_key_here

Required Environment Variables:

  • PORT: Server port (default: 5000)
  • CONNECTION_STRING: MongoDB connection URI
  • ACCESS_TOKEN_SECRET: Secret key for JWT token generation

4. Start the Server

Development mode (with auto-restart):

npm run dev

Production mode:

npm start

The server will start on http://localhost:5000

📚 API Documentation

Base URL

http://localhost:5000/api

Authentication Endpoints

Register User

  • URL: /users/register
  • Method: POST
  • Access: Public
  • Body:
{
  "username": "johndoe",
  "email": "john@example.com",
  "password": "securepassword123"
}
  • Success Response: 201 Created
{
  "_id": "user_id",
  "username": "johndoe",
  "email": "john@example.com"
}

Login User

  • URL: /users/login
  • Method: POST
  • Access: Public
  • Body:
{
  "email": "john@example.com",
  "password": "securepassword123"
}
  • Success Response: 200 OK
{
  "accessToken": "jwt_token_here"
}

Get Current User

  • URL: /users/current
  • Method: GET
  • Access: Private (requires Bearer token)
  • Headers: Authorization: Bearer <jwt_token>
  • Success Response: 200 OK
{
  "_id": "user_id",
  "username": "johndoe",
  "email": "john@example.com"
}

Contact Endpoints

Note: All contact endpoints require authentication (Bearer token in Authorization header)

Get All Contacts

  • URL: /contacts
  • Method: GET
  • Access: Private
  • Success Response: 200 OK
[
  {
    "_id": "contact_id",
    "name": "Jane Smith",
    "email": "jane@example.com",
    "phone": "123-456-7890",
    "user_id": "user_id",
    "createdAt": "2025-09-20T08:30:00Z",
    "updatedAt": "2025-09-20T08:30:00Z"
  }
]

Create Contact

  • URL: /contacts
  • Method: POST
  • Access: Private
  • Body:
{
  "name": "Jane Smith",
  "email": "jane@example.com",
  "phone": "123-456-7890"
}
  • Success Response: 201 Created

Get Single Contact

  • URL: /contacts/:id
  • Method: GET
  • Access: Private
  • Success Response: 200 OK

Update Contact

  • URL: /contacts/:id
  • Method: PUT
  • Access: Private
  • Body: (any combination of name, email, phone)
{
  "name": "Jane Doe",
  "email": "jane.doe@example.com"
}
  • Success Response: 200 OK

Delete Contact

  • URL: /contacts/:id
  • Method: DELETE
  • Access: Private
  • Success Response: 200 OK

🔒 Authentication

This API uses JWT (JSON Web Tokens) for authentication. After logging in, include the token in the Authorization header:

Authorization: Bearer <your_jwt_token>

📁 Project Structure

ContactManagerApp/
├── frontend/                    # Frontend application
│   ├── css/
│   │   └── style.css           # Dark theme with glassmorphism effects
│   ├── js/
│   │   └── app.js              # Contact management logic
│   └── index.html              # Single-page application
├── config/
│   └── dbConnection.js          # Database connection configuration
├── controllers/
│   ├── contactController.js     # Contact CRUD operations
│   └── userController.js        # User authentication logic
├── middleware/
│   ├── errorHandler.js          # Global error handling
│   └── validateTokenHandler.js  # JWT token validation
├── models/
│   ├── contactModel.js          # Contact schema
│   └── userModel.js             # User schema
├── routes/
│   ├── contactRoutes.js         # Contact API routes
│   └── userRoutes.js            # User API routes
├── .env                         # Environment variables (not committed)
├── .gitignore                   # Git ignore file
├── netlify.toml                 # Netlify configuration (if needed)
├── Procfile                     # Heroku process file
├── constants.js                 # HTTP status constants
├── package.json                 # Project dependencies
├── server.js                    # Application entry point
├── API_TESTING.md               # Complete API testing documentation
├── DEPLOYMENT.md                # Deployment guide
└── README.md                    # Project documentation

🧪 API Testing

✅ Complete Testing Results

All API endpoints have been thoroughly tested using Thunder Client with comprehensive test cases covering:

  • User Authentication (Register, Login, Current User)
  • Contact CRUD Operations (Create, Read, Update, Delete)
  • Error Handling (404, 400, 401 error scenarios)
  • Authorization & Security (JWT token validation)

📊 Testing Overview

Category Tests Status
User Management 3 endpoints ✅ All Passing
Contact Operations 5 endpoints ✅ All Passing
Error Scenarios 4 test cases ✅ All Passing
Total 12 test cases ✅ 100% Success

📸 View Complete Testing Documentation

For detailed API testing results with screenshots, request/response examples, and step-by-step testing guides:

👉 Complete API Testing Documentation

The testing documentation includes:

  • Screenshot gallery of all test results
  • Complete request/response examples
  • Error handling demonstrations
  • Thunder Client setup instructions
  • cURL command examples

🚨 Error Handling

The API includes comprehensive error handling with appropriate HTTP status codes:

  • 400 Bad Request: Missing required fields or validation errors
  • 401 Unauthorized: Invalid or missing authentication token
  • 403 Forbidden: Access denied to resource
  • 404 Not Found: Resource not found
  • 500 Internal Server Error: Server-side errors

Error responses follow this format:

{
  "title": "Error Type",
  "message": "Detailed error message",
  "stackTrace": "Stack trace (in development)"
}

🔧 Configuration

Environment Variables

Variable Description Required Default
PORT Server port No 5000
CONNECTION_STRING MongoDB URI Yes -
ACCESS_TOKEN_SECRET JWT secret key Yes -

MongoDB Setup

  1. Local MongoDB: Install MongoDB locally and use mongodb://localhost:27017/contactmanager
  2. MongoDB Atlas: Create a cluster and use the provided connection string
  3. Docker: Use MongoDB Docker container

🚀 Deployment

Live Application

💰 Cost-Effective Hosting

  • Free Heroku Dynos: 550 hours/month (sufficient for personal projects)
  • Auto-Sleep: App automatically sleeps after 30 minutes of inactivity
  • Free MongoDB Atlas: 512MB storage with high availability
  • Zero Monthly Cost: Perfect for portfolio and demo projects

🔧 Deployment Commands Used

# Login to Heroku
npx heroku login

# Create Heroku app
npx heroku create contact-manager-chethan-2025

# Set environment variables
npx heroku config:set CONNECTION_STRING="mongodb+srv://admin:admin@chethancluster.yedmyoh.mongodb.net/mycontacts-backend"
npx heroku config:set ACCESS_TOKEN_SECRET="chethan_contact_manager_jwt_secret_2025"

# Deploy application
git push heroku main

# Open live app
npx heroku open --app contact-manager-chethan-2025

📊 Monitoring & Management

# Check app status
npx heroku ps --app contact-manager-chethan-2025

# View real-time logs
npx heroku logs --tail --app contact-manager-chethan-2025

# Check environment variables
npx heroku config --app contact-manager-chethan-2025

Heroku Deployment (Traditional Method)

  1. Create a Heroku app:
heroku create your-app-name
  1. Set environment variables:
heroku config:set CONNECTION_STRING=your_mongodb_uri
heroku config:set ACCESS_TOKEN_SECRET=your_secret_key
  1. Deploy:
git push heroku main

Railway Deployment

  1. Connect your GitHub repository to Railway
  2. Add environment variables in Railway dashboard
  3. Deploy automatically

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Chethan M N

Project Highlights

  • 🎨 Full-Stack Development: Complete MERN-like application with modern UI
  • 🔐 Security Implementation: JWT authentication with bcrypt password hashing
  • 📱 Responsive Design: Mobile-first approach with 15-70-15 layout
  • 🚀 Production Deployment: Live on Heroku with MongoDB Atlas
  • 🧪 Comprehensive Testing: 100% API endpoint coverage with documentation

🙏 Acknowledgments

  • Express.js team for the amazing framework
  • MongoDB team for the robust database
  • JWT.io for authentication solution
  • All contributors and supporters

📊 API Status Codes

Code Status Description
200 OK Request successful
201 Created Resource created successfully
400 Bad Request Invalid request data
401 Unauthorized Authentication required
403 Forbidden Access denied
404 Not Found Resource not found
500 Internal Server Error Server error

🎉 Ready to Explore?

🚀 Try the Live Application Now!

What you can do:

  1. Register your account in seconds
  2. Login and explore the beautiful dark UI
  3. Add contacts with name, email, and phone
  4. Search and manage your contact list
  5. Experience responsive design on any device

🔗 Quick Links

⭐ If you found this project helpful, please give it a star! ⭐

Made with ❤️ by Chethan M N

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages