LogoCraft - Professional Logo Design Services

A complete web application for logo design services with user authentication and project management.

Features

Frontend

• Modern Responsive Design: Built with HTML5, CSS3, and JavaScript
• User Authentication: Login, registration, and session management
• Interactive UI: Smooth animations, hover effects, and transitions
• Dashboard: User project management and statistics
• Portfolio: Showcase of logo designs
• Pricing: Three-tier pricing structure
• Contact Form: Lead generation and customer inquiries

Backend

• RESTful API: Express.js server with SQLite database
• Secure Authentication: JWT tokens with bcrypt password hashing
• Database: SQLite with users, projects, and messages tables
• Security: Rate limiting, CORS, helmet protection
• Validation: Input validation and sanitization

Project Structure

Logo app/
├── index.html          # Main landing page
├── dashboard.html      # User dashboard
├── styles.css          # Complete styling
├── script.js           # Frontend JavaScript
├── api.js              # API service layer
├── server.js           # Backend server
├── package.json        # Node.js dependencies
├── .env                # Environment variables
├── database/           # SQLite database (auto-created)
└── README.md           # This file

Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Backend Setup

1. Install Dependencies

   cd "c:/Users/Ghost/Desktop/Logo app"
   npm install

2. Environment Configuration

   The .env file is already configured for development:

   PORT=3000
   NODE_ENV=development
   DB_PATH=./database/logocraft.db
   JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
   JWT_EXPIRES_IN=7d
   FRONTEND_URL=http://localhost:8000
   

3. Start Backend Server

   npm start

   For development with auto-restart:

   npm run dev

Frontend Setup

1. Start Frontend Server

   # In the same directory, run:
   python -m http.server 8000

2. Access the Application

   • Frontend: http://localhost:8000
   • Backend API: http://localhost:3000
   • API Health Check: http://localhost:3000/api/health

API Endpoints

Authentication

• POST /api/register - Register new user
• POST /api/login - User login
• GET /api/profile - Get user profile (protected)

Projects

• GET /api/projects - Get user projects (protected)
• POST /api/projects - Create new project (protected)

Messages

• GET /api/messages - Get user messages (protected)

System

• GET /api/health - Health check endpoint

Database Schema

Users Table

CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT UNIQUE NOT NULL,
    password TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    is_active BOOLEAN DEFAULT 1
);

Projects Table

CREATE TABLE projects (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id INTEGER NOT NULL,
    name TEXT NOT NULL,
    description TEXT,
    package TEXT NOT NULL,
    status TEXT DEFAULT 'pending',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users (id)
);

Messages Table

CREATE TABLE messages (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    user_id INTEGER NOT NULL,
    subject TEXT NOT NULL,
    message TEXT NOT NULL,
    is_read BOOLEAN DEFAULT 0,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users (id)
);

Security Features

• Password Hashing: bcrypt with salt rounds
• JWT Authentication: Secure token-based authentication
• Input Validation: Email validation and password requirements
• Rate Limiting: Prevent brute force attacks
• CORS Protection: Cross-origin request security
• Helmet: Security headers for Express.js

Usage Instructions

1. Registration: Click "Sign Up" to create a new account
2. Login: Use your credentials to access the dashboard
3. Dashboard: View projects, statistics, and manage orders
4. Order Logo: Select a pricing package and submit your requirements

Development Notes

Frontend

• Uses modern JavaScript (ES6+)
• Responsive design with CSS Grid and Flexbox
• Component-based architecture
• Smooth animations and transitions

Backend

• RESTful API design
• Middleware for authentication and validation
• Error handling and logging
• Graceful shutdown handling

Production Deployment

For production deployment:

1. Environment Variables

   • Change JWT_SECRET to a secure random string
   • Set NODE_ENV=production
   • Update FRONTEND_URL to your domain

2. Security

   • Use HTTPS
   • Implement proper session management
   • Add database backups
   • Set up monitoring and logging

3. Database

   • Consider migrating to PostgreSQL or MySQL for production
   • Implement proper database indexing
   • Set up regular backups

Support

For issues or questions:

• Check the console for error messages
• Verify both frontend and backend are running
• Ensure database permissions are correct
• Check network connectivity between frontend and backend

License

MIT License - Feel free to use this project for learning and development.