Capkeybara is THE ultimate e-commerce platform for top-notch mechanical keyboard components that cater to all your needs!
Whether you're a seasoned keyboard enthusiast, a newbie exploring the world of mechanical keyboards, or simply on the hunt for a quick upgrade, we've got you covered! We are here guide you with expert advice to ensure you make the perfect choice every time you hit that "add to cart" button!
- Frontend Repository (ReactJS - useForm, Toastify, Styled Components)
- Backend Repository (NodeJS - Express, Handlebars, Bookshelf ORM with knex, DB-migrate, Cloudinary, Stripe, and MySQL)
- As a keyboard hobbyist (regular), I want to browse the available keyboard accessories, so that I can make modifications to my current keyboard(s).
- As a beginner (uncertain), I want to follow a step by step guide on how to build a keyboard, or even purchase a starter pack containing keyboard components, so that I can start building my first keyboard easily.
- As a buyer (spontaneous), I want to browse the pre-built keyboards, add them to my cart, checkout and track my orders in real time, so that I will be able to receive and use the keyboard quickly.
- As a vendor, I want to list my products and manage my orders, so that I can increase the reach of my products and make more profits.
- As an admin, I want to be able to perform CRUD on the users, sellers and other tables in the database, so that the site remains clean, with no redundant data or disruptive users.
Below are the wireframes for both the buyers, and seller pages. The link to the Figma project can be accessed here.
(This is not a GIF)
Capkeybara was mainly inspired by the rodent itself. The site aims to blend cuteness with its actual theme being a mechanical keyboard e-commerce store. The color scheme for the buyers page was also derived images of the capybara, as seen in the image below.
As the site is aimed for all consumers alike, be it keyboard enthusiast, regular shoppers, or even beginners just starting out, the landing page is organised to cater to these different target audiences.
Browse Keyboardbutton allows both keyboard hobbyist and regular consumer looking for a quick buy to directly browse the selection of keyboard the site has to offer, with just a click.Build a Keyboardbutton enables beginners to effectively move to the relevant page to read up and learn about the ways to build a keyboard. Once they have gone through the tutorial style guide, they will then be redirected to the shop to purchase their first keyboard, or keyboard components.
Major features of capkeybara includes
- Search, which makes use of algorithm such as mergesort for sorting (Not implemented yet)
- Image upload for buyer and seller profile picture and product images. The cloudinary upload widget was used for this feature.
- Checkout, which is handled by Stripe. A session ID will be generated from Stripe and received by the client to indicate a successful transaction.
The main limitation of this is that users are able to skip the checkout process and make an order by navigating to the/checkout/successpage. A possible solution for this is to validate the session ID sent by Stripe before placing an order. - Order Status, which allows buyers to check the status of their order. They include
Payment Made,Ready to Ship,Out for Delivery,Delivered.
A limitation of this from the seller side is that the status of an order can only be update once all products in an order meets the order status requirement (eg. order status can only be updated to 'Delivered' if all products in the order has been delivered). Changing this order status will also update the order status for all sellers.
- ReactJS - Route access restriction, navigation between pages, form control using useForm
- Cloudinary - Image upload widget for buyer and seller and product images
- NodeJS - Server environment. ExpressJS, Handlebars for admin page templating, Sessions, JWT with bcrypt for Authentication, Bookshelf ORM with knex, Stripe for payment processing and caolan form for form control.
- MySQL - Database management, used in conjuntion with db-migrate
- React Frontend - Main Page (Netlify)
- Express Backend - Admin Page (Render)
(Note that Admin Page is not yet implemented)
| Account Type | Name | Password | |
|---|---|---|---|
| Buyer | Peter Pan | [email protected] | peterpan123@ |
| Buyer | Tinker Bell | [email protected] | tinkerbell123@ |
| Buyer | Captain Hook | [email protected] | captainhook123@ |
| Seller | Epomaker | [email protected] | epomaker123@ |
| Seller | Aula | [email protected] | aula123@ |
| Seller | Keychron | [email protected] | keychron123@ |
No test admin account will be provided.
Links to all assets are listed here.
- Logo and Footer - Capybara, Keycap
- Landing Page - Macha Keys
- Navbar Background - Buyer, Seller
- Signup and Login Background- Buyer, Seller
- Products
- Build a Keyboard - Bubble Tea & Pastel Keycaps
- Capybara Vectors - About 1, About 2, Not Found, Buyer Cart, Buyer Cart Empty 1, Buyer Checkout Success 1, Buyer Checkout Cancel 1, Buyer Order Empty, Seller Product Empty, Seller Order Empty
- Other Vectors - Buyer Cart Empty 2, No New Notification
- Animated GIF - Loading, Buyer Checkout Success 2, Buyer Checkout Cancel 2
- Default Images - Upload Profile Picture, Upload Product Image, Image Not Available
Do note that some assets were manipulated with using AI and design tools, such as Picsart Image Extender, Fotor Image Extender, Adobe Background Remover, and Krita.
This project is not intended for commercial use and no profit will be generated from it.
For any issues with regard to the use of the above assets, please contact me via GitHub. Thank you!