Crysta Diane Photography 2.0 is a full-stack web application that I fully architected and developed. It combines a modern, Nuxt 3 frontend with a custom-built Express.js backend API. Designed to serve a real-world photography business, this project showcases professional photo galleries, service offerings, customer reviews, and a secure admin dashboard—all with a clean UI and intuitive UX.

The frontend leverages TypeScript for type safety and scalability, Tailwind CSS for utility-first styling, and Pinia for state management. It uses Nuxt 3 for powerful SSR and static site generation, integrated with Axios for RESTful API communication. Routing is handled via Vue Router, and the UI incorporates reusable components including carousels and modals.

Key client-side functionality includes a custom-built contact form with frontend validation and inline error handling, a secure login system for administrators using JWT-based authentication, and a dynamic admin panel that allows authorized users to create, update, and delete website content such as gallery images, service listings, and user reviews. Session tokens are stored and validated using js-cookie and jwt-decode.

On the backend, the project features a Node.js + Express server built entirely from scratch. It uses MySQL2 to manage and persist data, with schema-driven tables for users, photos, reviews, and services. Authentication is handled via jsonwebtoken and password encryption through bcryptjs. CORS and cookie-parser middleware are implemented for cross-origin and session handling. Environment variables are managed through dotenv, and hot reload during development is supported via nodemon.

From a devops and quality standpoint, the project maintains strict code consistency and formatting using Prettier and ESLint. The frontend is built using Vite under the hood via Nuxt for fast hot module replacement and build performance.

Key Features:
- Dynamic image gallery with zoom functionality
- Contact form with client-side validation and admin notifications
- Admin dashboard for secure, in-app data management
- Token-based authentication system
- CRUD operations for site content via REST API
- Real-world deployment structure with separate frontend and backend repos

Backend Repository: GitHub - Backend