Sweet Eats Bakery & Café: A Responsive Website with Admin Functionality
responsive design, admin area, automated cupcake promotion
This project showcases a fictional bakery and cafe website designed to demonstrate my skills in creating modern, user-friendly, and responsive websites with robust administrative features.
VisitGitHubThe Process:
Design Decisions
wireframesresponsive designlogo deesign principles
This website prioritizes a user-friendly and low-maintenance experience. With three key pages, it provides essential information for potential customers arriving from online searches. The responsive design ensures optimal viewing across all devices.
For the logo, I leveraged a licensed stock vector cupcake, customizing the color palette to match the vibrant and playful theme. The typeface selection complements the visual identity, echoing the sweetness of the bakery's offerings.
logo sketches
wireframesResponsive Design with Bootstrap
Bootstrap
Leveraging Bootstrap's framework, I ensured the website seamlessly adapts to various screen sizes. This guarantees a positive user experience on desktops, tablets, and mobile devices.
@media query
To optimize the mobile layout, I implemented media queries to address layout conflicts. For example, on smaller screens, "Free Wifi" and "Free Cup O' Joe" icons were dynamically hidden to prevent overlapping with other elements. A single, combined icon image was then displayed for these features, improving visual clarity.
desktop version
mobile version
@media queries for iconsEngaging CSS3 Animations
steps()sprite sheet@keyframes
The website incorporates eye-catching CSS3 animations to highlight the cupcake promotion when active. These animations utilize sprite sheets and keyframes to create a seamless color-shifting effect and add a playful touch to the user experience.
For further enhancement, the implementation of a single SVG image for sprinkles could optimize website performance. Additionally, a randomizer function written in PHP could introduce variety in the number, color, rotation speed, and size of the sprinkles, creating a more organic and dynamic visual effect.
screenshot during animation
CSS for alert box animation
sprite sheet used with steps() function
CSS code to animate sprite sheet
CSS code to animate sprinkles, rotate animation placed on image class, not on a div container like the fade and drop animationsDynamic Cupcake Promotion Management
HTML formsPHPSQL queries
The admin area allows authorized users to effortlessly manage promotional offers. They can activate or deactivate the cupcake promotion and set the targeted day of the week. Behind the scenes, PHP scripts seamlessly interact with the SQLite database to store and retrieve promotion data.
user interface card in admin area
setting variables for logic on index page, could be refactored with $dayOfWeek array and for loop
function that sets the day of promotion, similar to the function that sets if the promotion is active
function returns the day of the promotion, similar to the function that returns if the promotion is active
adds alert box HTML during promotion, similar logic for logo/alert box animationUser-Friendly Admin Panel
BootstrapMAMPPHP
Leveraging Bootstrap's components, I constructed an intuitive admin area for website management. This interface empowers authorized users to effortlessly update content across various sections, including site-wide information, user accounts, testimonials, and individual pages.
database connectionHTML forms$_POSTPHP procedureSQL queries
Behind the scenes, a secure PHP scripts connect to the SQLite database, facilitating data storage and retrieval.
admin area
function thats adds a testimonial to the database as a row in the Testimonials table.Secure User Access Control
PHPAuthenticationAuthorizationComposerJWTcookie
The website implements robust security measures to protect user data and restrict access to administrative features. JWT (JSON Web Token) technology ensures secure user authentication and authorization. This approach utilizes industry-standard packages and encryption for added peace of mind.
To streamline administration, the system allows website owners to designate additional administrators. A designated website owner account cannot be deleted or demoted, safeguarding against accidental or malicious misuse of administrative privileges.
admin login for authentication
JSON Web Token
a cookie is created with Symfony's Cookie class, expire time argument is set to one hour
functions that checks authenticationThoughts on an Approval Process
A good feature to implement would be the addition of a content approval workflow. Such a system would empower website owners to maintain editorial control over user-generated content. This could involve an "approval" stage where content creators submit entries for review by the website owner before they are published live.
Key Learnings and Areas for Growth
Developing the Sweet Eats Bakery & Café website significantly expanded my technical skillset. I gained practical experience with Composer for efficient package management, explored the use of Symfony session flash messages, and implemented secure user authentication with JSON Web Tokens (JWTs).
This project has also sparked my interest in further delving into critical security concepts like cross-site scripting (XSS) and cross-site request forgery (CSRF). A strong understanding of these areas is paramount for building secure and robust web applications.
Let's Talk:
Web Designer
