.jpeg){kind=link}
In this repository, I built the front-end (the back-end is in a separate repo) of an e-commerce website so users can add stores and their products to sell, donate, or buy things.
I named it "That Pasta" because, like this website, you can eat and cook pasta in a variety of ways, sweet and salty, and use it for a variety of purposes. and addiotnal to that, "I'm in love with pasta."
The main purposes of this repository are learning and practice.
This project is not completed yet. I am planning to develop it more and more and add new features (like localization, locations, delivery, user profile, allowing the user to add multiple images, etc.) and make the electronic payment work perfectly, as well as fix a lot of bugs.
- Languages/Frameworks: JavaScript, ReactJS.
- State management: mobx, mobx-react.
- Formatting: Styled-Components and Bootstrap.
Users can see many amazing features that help them navigate through it smoothly:
-
The Home Page: is a simple modern design that displays a short text. -
Navbar: enable you to navigate through multiple pages (stores, products, about, contact, cart and authentication) -
The Stores page: obviously displays stores as cards with their image and name, and a simple searchbar to search for a specific store. Through the stores page, you can add your own store by using the plus button, but (just in case you don't have one), our rules prevent users from having multiple stores. -
Single Store Page: where the user can see all the details of this store: name, image, description, and all products that belong to the store. (The owner can edit and delete both the store and the products). -
The Products Page: where you can see all the products that belong to different stores, as cards with a photo, name, price and a button to add the product to the card. you can press on any product to take you to single product page. -
Single Product Page: displays the name of the product's store at the top of the page, and:
- A card contains a photo, details, price, and a description of the product. - A Qty field to enable the user to add as many as he wants of that product. - Add button to add the product to the cart. - A textarea and comments, to evaluate the product and see others' comments, which give the user a better vision of how the product is good or bad.
Cart Page: displays all products that the user added, with:
- the Qty field to increase or decrease the quantity to be purchased of the product.
- total price of each products and of all products.
- A remove button that enables users to remove uneeded itmes from the cart.
- A checkout button.
The Contact Page: displays general information such as a phone number and an email address for contacting the app's owner, as well as a simple form if the user wishes to send a message directly from the website to the owner.