Hello there! 👋 Welcome to the Florence Keyboards project—a passionate e-commerce platform created with love for all keyboard enthusiasts! Whether you're a gamer, a writer, or someone who simply appreciates the details of a mechanical keyboard, this platform has something for everyone.
This project is part of a university initiative and was developed with the primary goal of learning and exploring web development. It serves as a hands-on approach to mastering concepts like e-commerce functionality, session handling, user authentication, and more—all in a real-world context.
In this blog, we'll guide you through the features that make our project special, while sharing code snippets and insights along the way. Let’s dive in! 🚀
User Authentication: Login, Signup, and Logout
Let’s start with the basics: user authentication. It’s the gateway to our platform and ensures every user gets a secure and personalized experience.
What can you do?
Sign up to create an account.
Login to access features like browsing the shop and managing your cart.
Logout when you’re done shopping.
We’ve also implemented Role-Based Access Control (RBAC):
Users can shop, manage carts, and make purchases.
Admins have full access to the Dashboard for product and user management.
Snippet: Managing Sessions
const getUserDataFromSession = async () => {
const username = localStorage.getItem('username');
const role = localStorage.getItem('role');
if (username && role) {
setCurrentUser({ username, role });
} else {
setCurrentUser(null);
}
};
Why is this important? It ensures that users and admins only see what’s relevant to them.
Exploring the Shop and Cart
Our shop is where the magic happens! ✨
Shop Features:
A clean, user-friendly product catalog.
Filter options to find your perfect keyboard by categories, brands, or price range.
Cart Features:
Add products to your cart with one click.
Real-time updates on the total cost.
Easily manage your items—adjust quantities or remove items as needed.
Snippet: Adding Items to the Cart
const handleAddToCart = (product) => {
setCartItems((prevItems) => [...prevItems, product]);
};
And let’s not forget about the checkout experience—it’s simple, quick, and intuitive.
Admin Dashboard: The Command Center
For our admins, we’ve created a powerful Dashboard to manage everything behind the scenes.
What’s included?
Product Management: Add, edit, and delete products with ease.
User Table: View and manage users, including their roles and activity.
Visit Statistics: Track user visits and interactions to understand platform performance.
Snippet: Fetching User Data
const fetchUsers = async () => {
const users = await prisma.user.findMany();
setUsers(users);
};
The Dashboard is designed to make managing the platform as smooth as possible. It’s where all the hard work happens to keep the experience seamless for the users.
Payment System: The Final Step
When it’s time to check out, we’ve got you covered with a streamlined payment process.
Here’s how it works:
Calculate the total cost of items in your cart.
Process the payment securely (we’ve simulated the process for now).
Confirm your order and receive a receipt.
Snippet: Payment Handling
const handlePayment = async (cartItems, total) => {
const response = await fetch('/api/checkout', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ cartItems, total }),
});
if (response.ok) {
console.log('Payment successful!');
}
};
Our goal? To make every purchase feel effortless.
Conclusion
The Florence Keyboards project is a strong, feature-rich e-commerce platform designed to provide smooth user experiences.
Highlights:
Secure user authentication with role-based permissions.
An easy-to-use Shop and Cart system.
A powerful Admin Dashboard.
A straightforward and effective payment system.
GitHub Repository