- Overview 🌐
- Technologies Used ⚙️
- Features 🚀
- Live Site 📦
- Contact 📫
- Database Schema 📊
- Screenshots 📸
- Admin Panel Screenshots 🔧
- Acknowledgments 🙌
- Future Updates 🚀
- Project Status 📊
- Setup ⚙️
StoreOps is a full-stack E-Commerce Platform designed to provide a seamless online shopping experience for users. With robust features that you would expect in an E-Commerce platform, StoreOps comes with a customer experience and an admin experience.
-
Frontend: React, Tailwind CSS, React Hook Forms, Zod, Stripe, Shadcn
-
Backend: Next.js, MongoDB Atlas, AWS S3, Nodemailer, NextAuth.js, bcrypt
-
Payment Processing: Stripe
-
Product Management: Browse, search, filter and purchase products with ease. Administrators have full control to edit, add, or delete products based on business needs. Products come with stock management capabilities, ensuring seamless reflection of stock changes in the store. Admins can also create deals for products and more.
-
Category Management: Easily browse, filter, and associate products to categories. Admins have the authority to manage categories by editing, adding, or deleting them as needed, deleting a category would delete all products associated.
-
Cart: Seamlessly add items to your cart, and resume your shopping experience right where you left off. The cart functionality is powered by local storage and a cart database schema, ensuring synchronization once a user creates or logs into an account. Real-time dynamic calculations ensure accurate subtotals, and users are promptly notified if a product is out of stock or if the desired quantity exceeds availability.
-
User Authentication: Secure login and registration built through NextAuth.js and MongoDB database integration. The sign-up form, is backed with bcrypt encryption, ensures password security. Users can securely change their passwords at any time.
-
Payment Processing: Integration with Stripe, using my very own custom payment flow. Products are registered through Stripe, including archiving of deleted products. The checkout and address pages leverage Stripe's security features, while tax calculations are dynamically adjusted based on user addresses. If products are out of stock or have been deleted users are thrown back to cart page, ensuring site integrity.
-
For testing Stripe purchases, you can use the following test card details:
- Card number: 4242 4242 4242 4242
- Expiration date: Any future date
- CVC: Any
-
Webhooks: Utilization of Stripe webhooks enables automated order recording, email notifications to customers and admins, real-time stock updates, cart clearance, and more.
-
Order Management: Users can view order history and track order status, while admins can update order statuses to keep customers informed of order progress.
-
Responsive Design: The platform is optimized for all devices and screen sizes, ensuring a consistent user experience across platforms.
-
Image Storage System: AWS S3 is employed for storing and serving product images, enabling administrators to upload and edit products and categories from anywhere, without the need to manage image storage locally.
-
Database Management: MongoDB Atlas is utilized to store and manage data, including carts, addresses, users, products, categories, activity logs, orders, and newsletter subscribers.
-
Admin Panel: Administrators can manage products, orders, and user accounts with ease. Dedicated sections for recent activity and newsletter updates ensure administrators stay informed and connected with users.
-
Search Functionality and Pagination For All Pages: Robust search functionality and pagination facilitate quick access to desired products and other data such as orders, users and addresses. ensuring fast performance and efficient navigation.
-
Security: Multiple security measures are implemented, including encoded HTML to prevent XSS attacks, server-side data validation, strict password parameters to thwart brute force attacks, and HTML sanitization to prevent potential injection attacks.
-
Email System: A comprehensive email system is in place for sending alerts to admins and customers, including notifications for account creation, order placement, and customer support requests. Newsletter functionality enables visitors to subscribe and receive updates on store activities.
-
Input Validation: Utilizes Zod resolver and React Hook Forms for input validation, ensuring data integrity and preventing invalid data submission.
The StoreOps platform is live and accessible at palettehub.vercel.app. StoreOps was created with the default theme of an art supply store to demonstrate the functionalities but can be fully customized to reflect any type of supply business. For those interested in exploring the admin panel, kindly reach out to me, specifying your purpose, and I'll gladly provide the necessary login credentials.
For inquiries or further information, please contact me at tomyflecther99@hotmail.com, or reach out to me at
- User and Order Relationship: One-to-Many relationship.
- Cart and User Relationship: One-to-One relationship.
- User and Address Relationship: Many-to-Many relationship.
User interface and different functionalities of StoreOps.
The Admin Panel provides administrators with functionalities for managing products, orders, and user accounts.
Looking ahead, there are some cool ideas brewing to make StoreOps better:
-
Saved Payments: Give users the option to save their payment methods for faster checkouts. This would require more security.
-
Enhanced Store Design: Explore additional options to allow store owners to further personalize the online storefront. From custom themes to advanced branding options, giving businesses more control over their digital presence..
-
Business Protocol Integration: Ensure everything is under policy and suitable for an actual thriving business.
Special thanks to Stripe for providing a reliable payment processing solution, Shout out to https://unsplash.com/ for all the pictures that were not user submitted. Shout out to https://icons8.com/ for all provided icons.
The project is currently in Stripe test mode, but all functionalities are fully operational. The business logic is the only aspect that requires adjustments.
# Clone the repository
git clone https://github.com/tomyRomero/storeOps
# Navigate to the project directory
cd storeOps
# Install dependencies
npm install
# Start the development server
npm run dev