AutoDealer Pro - Car Shop Web Application

A modern, full-stack car dealership web application built with Vue.js frontend and Node.js/Express backend. This project demonstrates a complete CRUD application with user authentication, car inventory management, and responsive design.

🚀 Features

Core Functionality

• Car Inventory Management: Full CRUD operations for car listings
• User Authentication: Secure registration and login system
• Search & Filtering: Advanced search with multiple filter options
• Responsive Design: Mobile-first design that works on all devices
• User Dashboard: Personal dashboard for managing car listings
• Role-based Access: Admin and user roles with appropriate permissions

Technical Features

• RESTful API: Well-structured backend API with proper HTTP methods
• Input Validation: Comprehensive validation on both frontend and backend
• Error Handling: Proper error handling and user feedback
• Security: JWT authentication, password hashing, rate limiting
• Database: SQLite database with proper schema design
• Testing: Comprehensive test coverage for both frontend and backend

🛠️ Tech Stack

Frontend

• Vue.js 3 - Progressive JavaScript framework
• Vue Router - Client-side routing
• Pinia - State management
• Tailwind CSS - Utility-first CSS framework
• Axios - HTTP client
• Vite - Build tool and dev server

Backend

• Node.js - JavaScript runtime
• Express.js - Web framework
• SQLite - Database
• JWT - Authentication tokens
• bcryptjs - Password hashing
• Joi - Input validation
• Helmet - Security middleware

Testing

• Jest - Backend testing framework
• Vitest - Frontend testing framework
• Supertest - HTTP assertion library
• Vue Test Utils - Vue component testing

📦 Installation

Prerequisites

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

Setup Instructions

1. Clone the repository

   git clone <repository-url>
   cd car-shop-app

2. Install dependencies

   npm install

3. Start the development servers

   npm run dev

   This will start both the backend server (port 3001) and frontend dev server (port 5173).

4. Access the application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:3001

🧪 Testing

Run all tests

npm test

Run backend tests only

npm run test:backend

Run frontend tests only

npm run test:frontend

Run tests in watch mode

npm run test:watch

📁 Project Structure

car-shop-app/
├── server/                 # Backend code
│   ├── database/          # Database setup and models
│   ├── middleware/        # Express middleware
│   ├── routes/           # API routes
│   ├── tests/            # Backend tests
│   └── index.js          # Server entry point
├── src/                   # Frontend code
│   ├── components/       # Vue components
│   ├── views/           # Page components
│   ├── stores/          # Pinia stores
│   ├── services/        # API services
│   ├── tests/           # Frontend tests
│   └── main.js          # App entry point
├── public/               # Static assets
└── package.json         # Dependencies and scripts

🔧 API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user

Cars

• GET /api/cars - Get all cars (with filtering and pagination)
• GET /api/cars/:id - Get specific car
• POST /api/cars - Create new car (authenticated)
• PUT /api/cars/:id - Update car (authenticated)
• DELETE /api/cars/:id - Delete car (authenticated)

Users

• GET /api/users/profile - Get current user profile (authenticated)
• GET /api/users/cars - Get user's cars (authenticated)
• GET /api/users - Get all users (admin only)

🎨 Design Features

• Modern UI: Clean, professional design inspired by premium car dealerships
• Responsive Layout: Optimized for mobile, tablet, and desktop
• Interactive Elements: Hover effects, smooth transitions, and micro-interactions
• Accessibility: Proper contrast ratios and keyboard navigation
• Loading States: Skeleton screens and loading indicators
• Error Handling: User-friendly error messages and validation feedback

🔒 Security Features

• JWT Authentication: Secure token-based authentication
• Password Hashing: bcrypt for secure password storage
• Input Validation: Server-side validation using Joi
• Rate Limiting: Protection against brute force attacks
• CORS: Proper cross-origin resource sharing configuration
• Helmet: Security headers for Express.js

📱 Responsive Design

The application is fully responsive with breakpoints for:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🚀 Deployment

For University Project Submission

This prototype demonstrates all the concepts you'll need for your Spring Boot + PostgreSQL version:

1. Database Schema: The SQLite schema can be easily converted to PostgreSQL
2. API Structure: The Express.js routes follow REST conventions that translate to Spring Boot
3. Authentication: JWT implementation concepts apply to Spring Security
4. Frontend: The Vue.js frontend can work with any backend API
5. Testing: Test patterns shown here apply to Spring Boot testing

Converting to Spring Boot + PostgreSQL

1. Backend: Replace Express.js routes with Spring Boot controllers
2. Database: Convert SQLite schema to PostgreSQL and use JPA entities
3. Authentication: Implement Spring Security with JWT
4. Testing: Use JUnit and MockMvc for backend testing

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new functionality
5. Ensure all tests pass
6. Submit a pull request

📄 License

This project is created for educational purposes as a university project demonstration.

🎯 University Project Requirements Checklist

• ✅ Web app deployed: Ready for deployment on Render
• ✅ Database entities: Cars and Users with full CRUD operations
• ✅ Frontend/Backend tests: Comprehensive test coverage
• ✅ No plain text credentials: Environment variables and hashing used
• ✅ REST API: Full RESTful API implementation
• ✅ Frontend framework: Vue.js with dynamic functionality
• ✅ Database: SQLite (easily convertible to PostgreSQL)
• ✅ README: Comprehensive documentation

Bonus Features Implemented

• ✅ Authentication: JWT-based user authentication
• ✅ Multi-user support: Role-based access control
• ✅ Input validation: Comprehensive validation on both ends
• ✅ Professional styling: Modern, responsive design
• ✅ Error handling: Proper error handling throughout

📞 Support

For questions about this project or help with conversion to Spring Boot, please refer to the comprehensive code comments and documentation provided throughout the codebase.