My partner Marcos and I have decided to do La Boutique to get practice in web programming and give our team a point of reference on how experienced we are. This project was done with Angular and Tailwind CSS. I should mention that Angular is a framework Marcos and I used previously. Part of what we wanted to show off is that, in a very short time, we have managed to get inside the framework and create this site with a pure Front-End.

It's made of nine routes and thirteen components.

• About, Contact, FAQ

• Front Page, Footer

• Login, Register

• page-not-found

Captain's Log

Wednesday 21 de Abril

I have reached an agreement with Marcos, and we have decided to start a project; we would use Angular, and this project would help us understand the framework. So we decided to make an e-commerce website! I named it "The Boutique of Marcos" as a joke, and my partner liked it. For now, the idea is to make the components as simple as possible and to understand Angular. At the moment, the page is structured. We want a SPA,

• Header, Home, Commerce, and Footer.

I made the Home Page, and Marcos said he would do the header section. At the moment, this is how we thought the website should look and how it started.

We have a main branch, the base version, and a branch called testing, which we use to try out new stuff, modify and make changes.

On the first day, I implemented the carousel library to Angular, making the Home Page have three images as background and change every five seconds.

Marcos was doing the header, it doesn't have functionalities yet, but later I'll make it work by creating a router. The header still needs some styling, it's still in its basic form, and we didn't manage to center the letters on the buttons.

Tuesday, April 27

We have been improving the Home and Header we had started the previous week.

photo of the horizon by Ali Hedayat

I managed to finish the Home but was having problems implementing the carousel. This consists of an array I made where I put the URLs of the images. The TS component calls that data and sends it to the HTML. The problem is when I want to put things inside this image. To solve this, I left the position of the carousel background as 'relative.'

Difficulties were trying to center the header letters, but we solved it; then, we delayed making the header responsive. It was unsuccessful, but it's finished in its most basic form.

Wednesday, April 28

Today was a day of many changes. Due to delay and lack of interest, we decided to change Bootstrap to Tailwindcss, giving a different style to the page and using a more modern CSS framework. We searched through many e-commerce product APIs but found no interesting ones. I came up with the idea of using Unsplash API, using quality images, and making the size of the images as prices and discounts. The width would work as the price, and the height would work as the discount. We have successfully implemented a search bar.

Marcos successfully took care of the styling of the header and added a filter section, in which he styled it and made it stay on the left side of the commerce section.

We sent the first version, still under construction, to the Main branch.

Friday, April 30

Today we made a huge breakthrough, which makes us laugh. Not having done it before, it turns out that we were avoiding using the pull command for lack of knowledge. How did we do it? We deleted folders and cloned the entire project again! Crazy.

I worked on the home section, finishing its styles. I removed the carousel and left a static image with a cover window. That allows the picture to go down as the user scrolls down the page with the mouse.

I added two new sections with Roulet and modified them in the header; now, the page shows more paths in its URL.

Also, I finished the API connection in the home section. I was having problems hiding the API KEY from the environments folder, but I managed to hide it so that it appears in the .gitignore and is not shown to the public. Marcos was working on a new API connection in the home section.

Marcos was working on a new section, the footer. He was also editing the header styles. Here we have split up more, me taking care of the functionalities of the page and him taking care of the classes. Even though I am still doing a lot of styling, I have finished making the commerce page and its styles. Marcos added an About Us section where he created two letters with our profiles and our information. He was having trouble making it responsive. Marcos successfully implemented a grid in the home section, where when the user searches, it appears in a grid of 3 rows and two columns.

Wednesday, May 5.

Today I added the Login, Register, and Contact sections in the Angular Routes. I also put them in the header so that the user can access the images in the images. In the footers are the Contact and About sections. We are having trouble organizing the footer and making it responsive. Marcos managed to implement some social network icons that looked great. I'm taking care of making the Contact section look good. Marcos would do the register and contact pages while I finished the filter functionalities and the commerce and contact sections. We are working smoothly as a team. After lunch, we are still enthusiastic to continue working, and I'm pleased.

Marcos is making a question-and-answer component about our site. It's called FAQ; he will create the functionalities and the style. It should be emphasized that there will be a call to the header and footer inside each section.

Friday, May 7.

We have finished the Home & Commerce page. I had problems adding that the products are automatically loaded when the page loads. We finished with the page styles and successfully made all the components responsive. If anything on this part of the page is not responsive, we can make it responsive. If something I missed here was to make the hamburger button for the header, neither did I succeed in linking the project. Today I failed to connect the project with Netlify.

May 10.

I finally succeeded in linking the project with Netlify. The problem was in the environments folder and the CSS files. First, the budget was too high; this happened because, in each CSS file, we imported Tailwind. Also, I had not added the purge option in the Tailwind. Config.

Then in environments, there was a problem with the .gitignore. Netlify could not find the file because GitHub ignored it. I then tried to declare this variable inside Netlify but was unsuccessful. I couldn't find any users that explained this, there was only one, but it was a solution that didn't attack my problem. It seemed odd to me because it was very standard. I finally found a developer who had the same problem as me, he wanted to hide the API, but Netlify wouldn't allow it.

Many users recommended he do different things, which surprised me even more. Still, finally, I found a veteran developer who explained that hiding the API Key for a page-only Front End was unnecessary since it would be republished when the user loads his page in his browser. The exciting thing is to hide and keep these APIS secret in a database, in my case with NODE and EXPRESS, but that was a part of the project we had not done yet. So to continue, I was forced to publish the API to be kept confidential.

I would go against what I learned, and also I would be violating the terms and services of Unsplash that lent me the API and its information, as risks I had that if any bot of any user in the world took my API, would be harmed my project and my Unsplash account that for me has value. I had two possible solutions.

One is to create a Server-side rendering (SSR) server with Angular Universal, a very modern solution and something I had never done before that I wanted to experiment with. Still, there was too little time to take this risk, which had many possibilities to go wrong.

So in order not to damage my project, I decided to create a new user on Unsplash; I would not lose my account, I left the API in public, but if I had any problem with this, Unsplash would delete that token and the retaliation would be for an account that I am not interested at all. The interesting thing would have been to do a Server-side rendering, an impeccable solution, or to create a backend, but I didn't have time for this and less in my exam time.

It occurred to me to add small documentation explaining how the page is structured. I said this documentation to the FAQ section. I also want in the future to publish this project in my blog and my portfolio. The page is correctly working in Netlify under the link. laboutiquedemarcos.netlify.com

The project took seven days of work and 289 cups of coffee.