- GreenStore is a concept website that I created a long time ago to simulate an e-commerce website where you shop your groceries. This store does not phisically exist and there's no actual possibility to buy or return products.
- Unfortunately when this project started I didn't have any code-time extension enabled, but I can guarantee it took me many hours to make.
GreenStore is a web page developed in html/css/js for demonstration purposes. There is no commercial reality behind this project, but only the intention to create a web page showing an online fruit and vegetable shop. Everything written inside is made up.
I created this project to put into practice some knowledge I acquired while learning web development languages.
This project was born in 2021 and I personally brought it as a personal project to school in a more essential and raw form than what you see now. In fact, in 2022 the project was restarted from scratch to improve the order of the code and readability.
I decided to publish this web page to make material available to the community from which to take inspiration to create other web pages, or find inspiration for other projects. Feel free to copy some of the code for your own projects.
Although the shop is a fiction, inside you will find a lot of interesting information on agricultural products and reliable average nutritional information taken from authoritative and cited sources.
The graphic aspect of the page was designed completely from scratch by me, and takes inspiration from the Material You Android guidelines made by Google, which I particularly admire.
The page is not very optimized for mobile viewing and could cause problems if you open it in formats other than 16:9 and 9:16, I'm working to make it as responsive as possible.
Also, note that this page is written in Italian.
This project has no practical use other than browsing a fake online store to read some information about fruit and vegetables. You might like part of the interface and in this case you could take inspiration from it.
- To open the project, just click the github pages link on which the page is hosted (located at the top of this page).
- There is no need to install the source code.
- If you have GitHub CLI on your machine and want to clone the repository send the following command:
gh repo clone lucAmbr0/GreenStore
Updates to this project do not arrive consistently, so there may be periods of stalemate and others with many updates.
This project does not require any particular requirements other than a browser.
- I highly reccomend to open this webpage on a chromium browser, since not all CSS rules and styles applied are compatible with other browsers like Firefox, Edge, Safari etc.
Add a file structure here with the basic details about files, below is an example.
.
├── js
│ ├── disclaimer.js
│ ├── index.js
| ├── main.js
| ├── negozio.js
│ └── products.js
├── Media
│ ├── Credits
| | └── *webp icon files*
| ├── Products
│ | ├── DriedFruit
| | | └── *webp products files*
│ | ├── FreshFruit
| | | └── *webp products files*
│ | ├── FruttaFrescaOld
| | | └── *webp products files*
│ | ├── FruttaSecca
| | | └── *webp products files*
| | ├── Vegetables
| | | └── *webp products files*
│ ├── Valori Nutrizionali
| | └── *webp nutrional facts files*
| ├── other
| | └── *icon, buttons and garbage files*
├── Account.html
├── Albicocche.html
├── Disclaimer.html
├── Negozio.html
├── README.md
├── index.html
└── style.css
Teamwork is important! If you want to help improve this project feel free to make changes and make a pull request appropriately using the GitHub channels
Your contributions are always welcome and appreciated. Following are the things you can do to contribute to this project.
-
Report a bug
If you think you have encountered a bug, and I should know about it, feel free to report it and I will take care of it. -
Request a feature
You can also request for a feature, and if it will viable, it will be picked for development. -
Create a pull request
It can't get better then this, your pull request will be appreciated by the community. You can get started by picking up any open issues and make a pull request.
If you are new to open-source, make sure to check read more about it here and learn more about creating a pull request here.
Steps to work with feature branch
- To start working on a new feature, create a new branch prefixed with
featand followed by feature name. (ie.feat-FEATURE-NAME) - Once you are done with your changes, you can raise PR.
There are no particularly stringent guidelines as this is a fairly small project, however, as a relative beginner in the world of web development, you may find the code messy or poorly optimized. Feel free to make improvements if you want, but try not to make too massive changes to the code.
-
What's this thing?
This is GreenStore, an open-source webpage developed by me to simulate an online e-commerce website that sells groceries. -
What can I do with it?
Essentially, nothing very productive. You may find it interesting or worth reading for some nutritional facts about food. Or maybe you'd like the UI and use it for your personal webpages. -
I don't understand what it says, why isn't it in English?
Since this project was born for personal purposes it was not initially intended to be published online, so I wrote it in my native language, Italian 🇮🇹. -
Can I buy something?
No, this shop is totally fake and does not intend to sell any commercial products -
How are you?
It's a little cold at home now, I think I'll put on a sweater. Thanks for asking <3
Sources and websites I used to make this project are all listed in the disclaimer/credits page of the project <3
Here are some screenshots of this project (took from version 0.1.2)
I'm the only one that worked on this as of now :')
Since this project is made using various sources from across the web and is mainly for personal use, it comes with absolutely no license. That said, if you choose to clone and use this project for public, private or commercial purposes, I still ask you not to delete my signature and links to my profiles from the files to support my work, it won't cost you anything!