In this project, I built an e-commerce website for "Hear Better", a fictitious shop specialized in selling headphones and earphones. The style was based on the website concept designed by Dima Oxygen for the store "Axel Arigato". This is part of the Microverse curriculum. The result can be seen in this live webpage.
Check the video with the overview of the project:
- Animated Menu
- Categories Page
- Product Overview Page
- Mobile, tablet and desktop versions
- Turn the page into a React + Rails App
- Add user registration
- Add cart feature
This project is open for anyone who wants to clone it and create their version. If you just want the files and don't want to make further changes, follow the steps below to get a copy in your computer:
1 - Install git in your machine. Follow this guide by The Odin Project if you haven't done so.
2 - On this repository, click on the "Clone or download" button and copy the URL address provided.
3 - Open your terminal, select the folder where you want to store this project and paste the following code
git clone <copiedUrl>
Now you have the project files in your computer, but you'll not be able to save any changes on github since you're not the owner or a collaborator of this project. If you want to that, you can fork this project clicking the "Fork" button in the repository's page, which will create a repository named "/headphones-shop". Follow the aforementioned instructions to download it to your computer.
Now you can edit the project as you please and save your changes on your forked repository on github following the git flow. If you're not familiarized with this concept, follow this guide about the Git Basics developed by The Odin Project.
If you have contributions to make, send me a message telling me about your ideas. If we agree on a change, you can code your modifications in your forked repository and create a pull request following these steps:
1 - Click on the "New pull request" button on your forked repository.
2 - You'll be redirected to the page below, where the red square shows the repository and the branch you want the changes implemented, and the blue one shows the repository and the branch from where the changes will come from. Give a title and a description for your pull request, and click on "Create pull request".
3 - I will analyze your proposal and if we agree, I will merge your pull request.
- Github for saving the project.
- VSCode to edit the code.
- GitHack to set up the live webpage.
- W3C Markup Validation Service to check the HTML file for errors.
- W3C CSS Validation Service to check the CSS file for errors.
- Stickler CI to ensure a standard on code style and as additional check for errors.
- PicJumbo for the images on the homepage.
- FreeImages for the images on the menu.
- Beats by DRE, Shure and AKG for the product images used in the project.
The products shown on this website are not my property, and their images were only used to showcase the possibilities of this model website. The prices and names attributed to them are generic and don't reflect the reality.
- Viktor Hanacek for the images from PicJumbo.
- Karl-Erik Bennion and Riyas Rasheed for the images from FreeImages.
- Dima Oxygen for the design used on this webpage.
- Beats by DRE, Shure and AKG for the product images.
👤 Luis Novoa
- GitHub: luis-novoa
- Twitter: @LuisMatteNovoa
- Linkedin: Luis Novoa
- Email: luis.matte.novoa@gmail.com
Contributions and feature requests are welcome!
Give a ⭐️ if you like this project!
This project is MIT licensed.