OpenCart is a fake online store that demonstrates how to work with an API using JavaScript, it has features like adding, removing product or products to a cart, calculating the products cost, viewing product details, and some basic authentication etc.
If you found this repo helpful, please give it a (⭐). Thank you!
- Demo
- Features and Components
- Design Decisions
- Languages and Tools
- Challenges Faced
- Author
- Contributing
- License
Online Demo: opencart-fakestore
- Implements a responsive design to ensure a good user experience on all devices.
- Follows clean code, Commenting and Separation of Concerns principles.
- Shopping Cart
- Product catalogue
- Account creation and authentication
- And more...
OpenCart Store has been designed with the user in mind, as such the UI was made to be simple and be like a single page application.
- There's a cart-icon on the Nav, this is used to toggle the Shopping cart container, it also have a red bubble on it when the cart has items in it and it disappears when the cart is emptied/empty.
- A shopping cart is displayed on the same page (Home page) where we're displaying the products so that the user still has the ability to select more products and avoid too much/unnecessary maneuverability.
- When a view details button is clicked on a product, we're showing a pop-up window instead of going to another page so that we can make the user stay on the same products page and reduce too much movements of the user to make the user feel doing less work and focused on the products.
- Only the login/register pages are on separate screens/windows as this feels to be comforting and give focus to user when trying to login or create an account in OpenCart Store.
- when removing an item from the cart, say a user added more than 1 item, we're decrementing until a single item is remaining to get it removed instead of just removing at once
- We added a clear button on the shopping cart in case the cart get big and removing an item one by one becomes inconvenient, hitting the clear button clears the cart for you.
- The cart icon for toggling the shopping cart gives a choice for the user to see the cart when the user wants to.
- JavaScript
- HTML
- CSS
- FontAwesome
- Google Fonts (Poppins)
- FakeStore API: https://fakestoreapi.com/
- Git
- GitHub
OpenCart Store has been an interesting simple project to do, but during implementation I faced the following challenges.
- The api now doesn't support writing to the database as such I could'nt
- Store a created user, hence I just showed how it could've been used.
- Use the endpoint for the 'cart' since we can't use our own data.
| Website | Seamnex |
|---|---|
| /in/james-kamwendo | |
| GitHub | /james-kamwendo |
Let's be sincere, the project is pretty simple basic, contributions, issues and feature suggestions are welcome!
This project is MIT licensed.
Please give credit to this project if you plan to use it elsewhere ❤️.
Your support is greatly appreciated!