planetary records cafe

This project is a café and vinyl shop concept to showcase everything we have learnt during the year of studying frontend development at Fagskolen Kristiania 22/23.

Content:

• Main page with slideshow showing images of the café and record store.
• About us page with info about the place and the staff with images.
• The shop, displaying vinyls, filtered vinyls, vinyl of the month and vinyl details page, plus a simplified shopping cart with checkout and empty cart button.
• Menu page with info about dishes and drinks served in the café - static with html and css.
• Contact page with contact information, opening hours, address and map.

MVP - Minimum Viable Product:

Mobile and desktop version. Vinyl shop with vinyl data fetched from Sanity. Filter buttons to sort vinyls by genre, and the possibility to click on each vinyl item to open a new page with more info. Make sure everything is accessible.

Extra:

A simplified shopping cart, with the possibility to add products, see the items in the cart when hovering, and empty cart with one click.

Important links:

Github repository: https://github.com/madelenfoss/planetary-records-cafe

Github project: https://github.com/users/madelenfoss/projects/5

Sanity studio deploy: https://planetaryrecords.sanity.studio/content

Netlify: https://planetaryrecords.netlify.app/index.html

Technologies used:

• HTML
• CSS
• Javascript
• Sanity.io
• Netlify

Sources:

All icons from: Icons8.com

All images created with: Midjourney

All fonts from: fonts.google.com

Scroll to top button: https://www.freecodecamp.org/news/back-to-top-button-and-page-progressbar-with-html-css-and-js/

Frontend teachers Carlo Alberto Burato and Alejandro Rojas

Access:

http://localhost:5500 http://localhost:3000

What I will do next:

• Create a javascript file called fetchData.js to fetch all data from Sanity.io, and then get the data needed for each function that will be used in the project from the fetchData file.

• Add try catch the right way after fetchData file is added - for better performance.

• Make it possible to add filtered vinyls to the the shopping cart. Add local storage to keep items in cart.

• Make food menu dynamic with Sanity.