Guitar Los Angeles
Online Store
About the project
The main page shows some guitars, course information and some blog posts with tips to help guitarists improve, learn new music styles and get inspiration.
The store shows all guitars with their image and description. To see more details and add a guitar to the shopping cart, you have to click the 'view product' button.
The blog has all the posts, each with an image, publication date and content.
How does the shopping cart work?
It is an intuitive shopping cart. It allows customers to add guitars and see the details of each one, such as its image, price, quantity and the total to pay. It also allows editing the quantity or removing a model quickly and easily, and the total to pay is updated automatically.
On the right side of the screen there is a panel with the order summary and total amount to pay. Any change the customer makes to the cart will be automatically reflected in the overall purchase amount.
Project Stack
For the Front-End, I used React and NextJS to create fast, responsive and interactive interfaces. For the Back-End, I used Strapi to create APIs and PostgreSQL to manage data efficiently and scalably.
My Role
The goal of the website is to provide an excellent experience, to achieve this I used the most recent techniques and tools in web development.
Each page of the website has its own meta information, which is provided through the props of the "Main Layout" component and which are inserted as variables in the HTML of next/head.
To ensure that images load quickly, I used next/image, which significantly improves the performance of the website
I used the NextJS routing model and next/link for navigation between pages. I took advantage of the pathname from Next's useRouter Hook, to highlight the menu link of the page the user is currently browsing.
To give style and personality to the website I used CSS Modules, and created the _document.js file to import external stylesheets.
In the shopping cart I used NextJS context. To make the cart dynamic, I used the useState Hook and JavaScript array methods (some, map, filter and reduce). I used the useEffect Hook to calculate the total to pay and used local storage to store the cart information.
Finally I solved the NextJS rehydration problems.
API
I thought the best option was to use getStaticProps to query the API, since the information published on the website does not need constant changes.
I hid the API url using an environment variable. Then I made a data request (Fetch) to the url. I used the "destructuring" technique to directly access the guitars in the obtained data. And I returned the guitars within the function props.
To display the guitars in the store, I used the "Guitar" component, this component is responsible for rendering one guitar for each data set it receives through the "props".
I generated the guitar URLs using NextJS dynamic routing with getStaticPaths and getStaticProps.
I did the same to create the blog and its posts.
Strapi, PostgreSQL and Cloudinary
This project has a Back-End, however, I have classified it as a Front-End project, since the Back was created with a CMS called Strapi, which connects to a PostgreSQL database and to Cloudinary to store images on an external server. Due to this, the project has enabled access to the API End Points.
