PhoneZone - Online Smartphone Butique
Project that evolved from a simple PHP class assignment into something much bigger.
Why?
Since I was bound by the class requirements to use plain old PHP in this project I decided to improve upon provided base and add some modern spin to it, while learning a lot about integrating approaches and working with data across various technologies. The core marriage of old and new is plain PHP working in tandem with Tailwind CSS to create modern custom look to a plain old static site.
What principles?
- Redesigned database structure that is simple but neat and normalized.
- Rather than hardcoding things in markup, I store components as HTML files fetch them, modifying them dynamically with data either on the server, or on the client with fetched data.
- Neater project structure follows the above. Markup, js, php scripts and php pages that effectively serve as view components are separated.
- Apart from a minimal composer package preparing api urls for oAuth, no frameworks, components or libraries were used. All dynamic elements, styles, server functions and validations are written by me without third party code. Yes, this was mundane, but was intentional and served as a great learning experience on working with both PHP and JavaScript.
Features
- Custom svg logos and graphics made in Inkscape.
-
Fully responsive design.
-
Dark mode, with persistent state.
-
Custom style with clear accent colors palette, inspired by neubrutalist “blockiness” but with classier, toned down colors.
- Custom animations, with reduced-motion included.
- Custom Admin Panel with Admin and Owner roles scoped and validated both on server and client.
- Error and messages handling with feedback for the user.
- Two options for third-party authorisation: Google and Github.
- Custom components: Navigation as top-bar or sidebar on mobile, Home page Hero Section, Pagination, Breadcrumbs Navigation, Working cart with persistent per-user state stored in the database, an array of dialogs for edits confirmation etc. and more…