Welcome to my Fake Webstore. This project represents the culmination of everything I’ve learned in Integrify’s Frontend course. It’s structured using React Redux with Typescript, connecting to the API endpoint at https://fakeapi.platzi.com/ to create a real (fake) e-commerce website.
Check out the website at:
https://kitshopping.netlify.app
-
For those who like to skip the wall-of-text, I encourage you to test all of the user login features. However, their server is completely open and unencrypted. Please do not login with any personal credentials.
-
To test admin features found on the Products and Individual Product Pages, use the following username and password:
admin (at) mail.com
admin123
(This is by Fakeapi’s design)
- The layout of the homepage, all products, and their categories are dependent on the fake API. Having said that, the homepage is limited to showing the first five categories (if they exist), and six products as featured products (if they exist). If anything takes a little while to load, just wait a second or two.
-
To browse the products in a category from the home page, simply click on the picture, or click the roung buttons below to select which category interests you. It's also possible to add items to the cart from the home page.
-
From the navbar at the top of the page, you can browse all products, or all categories, access the shopping cart, and the profile page. If not logged-in, the profile page will redirect you to login or register as a new customer.
-
The profile link’s icon changes depending on if the user is logged in or not. If the user is logged in, it displays their randomly generated profile picture.
-
The shopping cart badge appears with a count of items in the cart, if there’s anything in the cart.
- The pages for all products and all categories allows you to sort ascending or descending according to name, category name, or price. The sort button changes according to ascending or descending. You may also add items to cart from the respective products pages.
- In the case of the categories page, the sorting option is only of course by name.
-
The reason there is a separate page for browsing by product and by category, and why there is a search feature just for category, is that being an open API, people are always adding to it, there can sometimes be many categories, so only featured categories are shown on the home page. Users should be able to browse all categories if they wish.
-
The search feature on these pages allows you to search products on the product page, and categories on the categories page. Clicking the search button or hitting enter will show all results, and there’s a backspace button to clear your search quickly (Does not appear in all screenshots).
- The layout of the Cart page changes slightly depending on when you open it, and what’s there. If there’s no products, it’s fairly empty.
- The Cart page will list the items in the cart, and allow you to add and remove items with a respective click of the plus and minus buttons. You can also quickly empty the cart. There’s no checkout page by design, and you do not have to be logged in to add items to the shopping cart.
- When registering to the page, all users are assigned the role of customer, and as such, all customers may edit their user information on the Profile page. The admin account however, is protected from editing. While editing your user information, there's also the ability to show and hide the password.
- By logging into the admin account, it’s possible to test out the admin features of the website. On the Products page, a new button called Add appears, where it’s possible to add new products. On the individual product pages, there’s a new button to modify or delete current products.
- As this is an open server, please be mindful of how many items or user accounts you add and modify, and never post personal information. Their API will return errors if you try to add or modify an item with a price of zero. The website will alert you, but you will have to start again.
-
I would like to implement more admin features, taking full advantage of the API with the ability to add, modify, and delete categories.
-
The website should remember your shopping cart contents, and not log you out refreshing the page. (AKA localStorage)
-
Light and dark mode.
-
Work on unit testing.
