Guitar Shop Proyect

Last Update : 24/12/22

What is this proyect about?

This proyect was created as an example of a guitar shop using technologies like Html , Css , Javascript , React and Server side with cloudinary and strapi. I created this page with 3 different frameworks : Next.js , Remix and Astro.

How does it work?

This proyect is created implementing componenets and hooks from react
Data percistance with cloudinary using postgresql and localStorage for the shop items.
Dyimic meta-data using each framework tools.
Image optimization with component Image from next.js - (avif and webp format).

Remix

Next.js

Astro

Dynamic Routes

Using a layout to avoid repeated code and a better order , creating sub folders for automatic routing with the help of frameworks.

Remix

Next.js

Astro

Using Styles

Next.js and Remix have similar ways to implement css modules with just some different things like importing and function to use styles ; Astro has a different way to implement css , astro uses javascript , html and css in the same component .

Remix

Next.js

Astro

Server with Strapi

Server side is created with strapi using Postgresql and cloudinary for images and data.

Visit Web Pages

Next.js.

https://arrap-guitar-guitar-shop-next-js.vercel.app (Web Page) https://github.com/rhindet/arrapGuitar---Guitar-Shop-Next.js- (Git repository)

Remix.

https://arrap-guitar-guitar-shop-next-ewbtoz5xg-rhindet.vercel.app (Web Page) https://github.com/rhindet/arrapGuitar---Guitar-Shop-Remix- (Git repository)

Astro.

https://github.com/rhindet/arrapGuitar---Guitar-Shop-Astro- (Git repository)

References

This proyect was created with the help of a udemy class from Juan Pablo De la torre Valdez.

Go to his courses