Hi!, have a warming welcome to the Petals&Fruits Astro version project, this is really great, I redid my learning and practice website frontend but using Astro now, this was just an excuse to learn this framework, it is growing in popularity because of its great and awesome features and capabilities, so I though it was a great time to learn it, also to probably release some personal projects and/or websites soon at some time in the near future, so I wanted to know how to do things in it, how things work in it, and how I can do a project, a website with it, so I have been learning it this past month, and it has been great, it is awesome and cool, I felt pretty confortable at the end developing on it, of course all the unknown matters have its dificulty in the beggining of the learning curve because we need to understand how things work behind stage, but once we have already gotten the idea of it, then all things start to be just nice and easier, there are still many things I have to learn about this framework, but I think I have covered the basics and maybe a little more, so I am very proud of it, I still in my learning journey, I am still on the way and I am still growing in knowledge and practical experience, it is very exciting, I am currently also learning Angular at this time, on may 2025, so many things are coming, thank you whoever you are for checking this project, enjoy it, it has been made with love and passion as everything I want to do.
This is a fictional website, a learning frontend project, it is made on a non-profit basis and it does not pretend any form of impersonation or usurpation of identity of any person, product, service, business, establishment, or natural or legal entity, although it is based on real websites, in terms of inspiration to show and organize elements and some image resources, this has been done as an exercise and a learning project for 100% educational purposes.
Petals&Fruits in its Astro version is a personal learning project to learn and practice web technologies, especially the use of the Astro web framework in the development of a website.
Industry specialists state that the only way to learn to program is: “programming”, because no matter how much the university, courses or teachers give us and we know theory, it is in practice where that theory really takes hold and where it is transformed into knowledge, otherwise we could not say that we have really learned something, and to be competent professionals, we must practice as much as we can, just as a doctor must also practice and train a lot to become a good surgeon, a professional of excellence, we from the field of Software Engineering, as students, must do the same to know the technologies in depth and be fully trained and prepared to face professional challenges, as well as acquire sufficient skills in a technical area to successfully carry out software development projects in different branches of the industry, such as the development of desktop applications, mobile applications or as in this case, development of websites and web applications, as well as many other branches and issues related to the field and industry.
Since this website: “Petals&Fruits”, is fictitious, I also wanted to modify the information in some cases, to follow a fictitious narrative, although trying to be realistic, so it is a simulation of reality, a simulation of a website that could be real, but it is not, which means that it is not intended in any case to be rigorous with the information shown, it is only to practice something I was learning, in this case Astro, as well as to show my capabilities and what I know to do.
Navigate in all the site keeping consistency across all pages with the same general layout with the header and footer.
The Most Popular Products section in the Welcome page is a server island, it renews and proccess products reading from the data source every time the index page opens with no need of rebuilding the site, this means only this section is dynamic but the page still being static and fast, it also has a nice fallback loading css animation while it loads, it is barely a half second or less, but it is a nice informative micro interaction for the user.
Petals&Fruits in its Astro version also uses the ClarkCodesMusicPlayer Web Components, specifically ClarkCodesAudioPlayer in its version 1.1, wrapped by an Astro component practical and cool.
A 100% custom and functional audio player, created from scratch witch web technologies, for a nice experience when listening to audios in the website, no more skin by default from the html audio tag, easy to use and implement in just a few steps, convenient for a developer and beautiful for a user.
Json files are being used as data source, this is good because to update the data that is shown on the site we only have to change the respective json file, very easy, whether add more products, delete or update any of them, just changing the json files the data will be updated, this would need a new build of the site, but in a context where a site that does not update very often its catalog but once in a while, it could be perfectly fine. Of course the use of a database is often the approach that usually comes to mind, but it depends on the needs of every site, if the market of the website has not many products and these do not change very often, then it perfectly could use json files to read the data as it would be using an api. Although for transactions still the need to register them, in this case a database would be useful, but given this is only a fictional frontend project not deployed, then a database has not been implemented, but it would propably be in a real scenario.
When clicking on a product its Details page opens up, bringing all the specific data about that product, like rating given by users, its price and a button to buy it, this page is a dynamic route, this means there is only one physical page that receives the product id as a prop, then the page retrieves the product data and shows it up on the page.
These would be informative pages to know about the business, its motivation, purpose and objectives, also a way of contact to ask for more information or for a special request about products.
- Some images were reated using AI, Miscrosoft Copilot was used.
- Many images in the site were edited, refined, improved and manually optimized using GIMP for a better visual appearance, better fit and a more professional finish, the textual logo also was designed in this powerful software for image graphics editing.
- The Petals&Fruits Astro version is a better site than its predecesor made in Vanilla without frameworks, this version has more features, more technical aspects, and is more advanced, it is its evolution.
- This project was an excuse to learn Astro and have practice, I like to learn by doing, so I learnt a lot doing this project in this framework, it was awesome, it was cool to do and I enjoyed it so much doing it, I still learning more aspects and going forward.
I'm a self-taugh Software Developer, currently I'm studying a Software Engineering University Superior Grade career, passionated for programming and technology.
- 📫 You can send me an email to [email protected] so I will try to respond as soon as possible, you can also follow me on my socials and check my content.
Thank you very much for visiting and checking this project, I did like a lot doing it, it has been really cool, I learnt a lot and I still learning, I could improve on several aspects about my web development skills, I hope you can see it too and enjoy it, hopefully it will be useful and will help you to see how some functionality or some visual aspect was done, after all, that's the idea, keep learning and practicing, so we will be seeing each other soon with more projects here in GitHub, with more videos on YouTube and with more content on other social networks, do not forget to follow me on all of them so you are aware, so I send you a hug for you whoever you are and wherever you are, lots of encouragement ... with love, enthusiasm and of course ....
Happy Coding! <3
Clark.