Inspiration
SeedScape was inspired by the desire to help customers better visualize the outcomes of planting seeds. It seeks to provide an interactive and informative shopping experience, enabling customers to see how their garden or planting area might look after using the seeds they purchase.
What it does
SeedScape functions as an online seed store where customers can browse and purchase various seeds. However, it differentiates itself by offering an interactive feature that allows customers to visualize the growth of these seeds in their own garden or planting area before making a purchase.
How we built it
SeedScape's development is primarily focused on the front end. It incorporates HTML, CSS, and JavaScript, including the use of Canvas, Vue, Element-UI for the interactive visualization feature.
Challenges we ran into
Firstly, due to the arrangement of my team members, I began working on the project by myself on Saturday night, leaving me with extremely limited time to complete the entire project. This sense of urgency required me to rapidly learn and apply new technologies, including Vue.js and Element UI. This was quite a significant challenge for someone relatively new to programming.
Another major challenge was dealing with technical issues. I had limited experience in using Canvas for interactive visualizations, so it took time to master this new skill. Additionally, managing the website's layout and styles using CSS presented its own set of challenges. I went through numerous trials and experiments to create an appealing and user-friendly interface.
In summary, time pressure and technical challenges were the primary issues I faced in this project. Nonetheless, this project provided me with valuable learning experiences and helped me expand my programming knowledge and skills, resulting in the successful creation of an innovative online store.
Accomplishments that we're proud of
We're proud of successfully implementing the core functionality of SeedScape and creating a platform that offers a unique and interactive shopping experience.
What we learned
Through the development of SeedScape, the team gained experience in managing a front-end web page, utilizing technologies like HTML, CSS, JavaScript, Vue, Element-UI, and Canvas to provide a visually engaging interface for customers.
What's next for SeedScape - a fun online shop for seeds
Firstly, there's a need for backend development to enhance SeedScape. Currently, it's a static webpage without a database connection, lacking persistence.
Secondly, there's room for expanding the library of resources for the products, including how they appear in different months and geographical locations.
Thirdly, exploring more features is essential. Here are some ideas I've considered:
- Supplementing information about plant pH levels and compatibility to alert users when certain plants shouldn't be grown together.
- Utilizing users' geographical locations to display more realistic future landscapes.
- Allowing users to upload images for plant recognition and seed recommendations (image recognition can be integrated through third-party APIs).
- Considering the germination success rates for seeds to provide scientifically-backed purchase quantity recommendations.
Fourthly, I believe that the concept of a seed shop is just a small demo. This scenario can be applied to various other products, such as home decor and furnishings. It encourages customers to visualize the usage scenarios after the purchase, which is a key aspect of consumer psychology.
Built With
- canvas
- css
- element-ui
- html5
- javascript
- vue
Log in or sign up for Devpost to join the conversation.