Our ecommerce was created using the following technologies:
- HTML, Javascript, React.js and React Router to develope the website and its logic;
- Sass and Material UI library to provide a great touch of style;
- Firebase for hosting and back-end work: authentication, sign-in and login with email and password;
- Firestore and storage for the product list database.
This is Snorlaxon 🔗 a single page application inspired to Amazon.it
We welcome the viewers with a very impressive Carousel images in the main page; the different images can be slided with the ⬅️ and ➡️ arrows.
The home page is provided with the list of the available products in our online shop 🏬.
In order to speed up user's reseaches, we implemented:
- a useful searchbar, in which the user can look directly for the product needed;
- some category features (Choice, books, Electronic devices, beauty, gaming, home) that filter the related items up to their types and characteristics.
A detailed product presentation, that includes title, description, price, amount, image and rating, is available in the single product page, reachable by clicking on the card product.
Moreover, products can be added in and removed from the basket by clicking the relative buttons and, once added some, all items will be displayed into a side Navbar that will also report the relative subtotal, number of items selected and the "vai al carrello (checkout page)" button; by clicking on it, the customer will be redirected to the cart page where a summary of the purchase will be shown 🛒(product amount, increase or decrease section for the quantity) 🛒
If the potential buyer is happy with his purchase, she/he'll proceed to the checkout page where a fake payment section will be avaibale 💳 After that, the confirmation message will appear into a new page 🚚
Furthermore and in order to make our project more real, we also implemented the login and the registration section along with user's profile page with all her/his details saved during the registration process 👤☑️
.gif?alt=media&token=c6eadd0c-e6e1-4b54-ad2e-3bb639e7eb3d)
In conclusion, the footer section also hosts a modal that shows the members of the team who made this project possible. If you want to know more about us just click the "Snorlax Team" link.
- 🦊 Francesca Belfiore 🌺
- 🍀 Floriana Domianello 🌷
- ✨ Miriana Maranzano ❣️
- 🏹 Marco Messina 🎯
- 💰 Fabrizio Cottone 🤑
This project was monitored and supported by our dear teacher Salvatore Laisa 👨🏫
If you would like to use this code you need to have Node.js installed, after you installed node please fork it or download the zip file and open it in a folder and then run on your terminal. The following command will install all the libraries you need to run it properly:
npm i
While this other command runs the app in the development mode:
npm start
To see the project in your browser just open http://localhost:3000
.png?alt=media&token=7765011b-e8ce-49ed-93c7-67958488f18e)