Full Stack Web Development - Assignment 2 (Craftspot-Svelte)

Project Name: Craftspot-Svelte

This application works in conjunction with the Placemark(Craftspot) API. (https://github.com/Fiona-Waters/placemark)

Project Description:

CraftSpot is a place for you to keep track of your favourite craft spots i.e. shops, exhibitions, classes and more. Sign up and make a list of your favourite crafts, then delve a little deeper and save details of where you can find the best yarn, knitting classes, sewing workshops etc. Keep all this info in one place so you can come back to it any time. This Svelte Version of this application includes charts and maps with relevant applicaiton information.

The following technologies have been used in the making of the Craftspot-Svelte frontend application:

• Svelte
• Leaflet
• Frappe Charts
• svelte-spa-router
• svelte-image-gallery

Project Status: Deployed

• Netlify : https://craftspot-svelte.netlify.app/

Features

• CRUD Functionality for user, craft and spot details.
• Upload/delete image functionality on Spot View page for multiple images.
• Gallery page with all Spot images included.
• Admin User can see data analytics and user list. Can delete a user.
• Charts showing relevant application data.
• Spots (POIs) shown on a map, with map layers based on categories.

Visuals

Homepage:

User Dashboard:

Craft Page:

Spot Page:

Map Page:

Chart Page:

Gallery Page:

Roadmap

Possible future additions:

• Allow a user to list and track their craft projects.
• Weather conditions at Spots, reported on a map.
• User selected charts, trends and projections.

References

Helpful online resources used in this project:

• https://stackoverflow.com/questions/58262380/how-to-pass-parameters-to-onclick-in-svelte - passing parameters in svelte
• https://svelte.dev/repl/b17c13d4f1bb40799ccf09e0841ddd90?version=3.48.0 - uploading images
• https://stackoverflow.com/questions/43013858/how-to-post-a-file-from-a-form-with-axios - uploading images
• https://studio3t.com/knowledge-base/articles/mongodb-aggregation-framework/#mongodb-group - grouping by category MongoDB
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array - Javascript array functions (map, filter)
• https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates - removing duplicates in an array
• https://frappe.io/charts/docs/basic/aggr_sliced_diags#limiting-the-slices - Frappe Charts, max slices pie chart
• https://www.npmjs.com/package/svelte-image-gallery - svelte-image-gallery
• https://svelte.dev/repl/29b37509123b4a4bac808531f39d7d9e?version=3.24.1 - svelte-image-gallery use
• https://stackoverflow.com/questions/42656549/joi-validation-of-array - Joi array validation
• https://stackoverflow.com/questions/51455174/how-to-prevent-columns-overflowing-modal-with-bulma-css-framework - Flexbox