Portal

Overview

Portal is a site for booking holiday chalets in Riyadh. Guests pick their dates, say how many people are coming, look through the chalets, and book one. I came in as a freelancer when the site was already live, so I worked on the code that was already there instead of starting again. The site is in Arabic and English, but the language was worked out by checks scattered all over the code, and the page never told the browser which language it was in, so I rebuilt that part first. I then swapped the hand-written components and the custom calendar for shadcn/ui, Tailwind CSS, and React Day Picker. Redux was installed but never used, so I set it up with RTK Query and slices and connected the 15+ API endpoints the backend developer gave me. I also asked them to move the login off localStorage and onto a token in an httpOnly cookie, which is safer.

Highlights

• Arabic and English work properly. The page now sets its own language and text direction, and the layout, icons, and sliders all flip round for Arabic. Before, this was decided by checks spread through the code, and the page never told the browser which language it was showing.

• A new booking calendar. The old one was written by hand, with all its own date handling. I rebuilt it with React Day Picker and designed the day squares myself, so every date shows what a night costs. Guests can see prices while they pick their dates across two months.

• Redux that actually did something. Redux was installed but never used. I set it up with RTK Query and connected more than 15 API endpoints the backend developer gave me, so every call is loaded and cached in one place instead of being made from all over the code. Slices handle what the app tracks itself, like the search, the filters, and the dates a guest has picked.

• Moved to shadcn/ui and Tailwind CSS. The site was built from components written from scratch. Swapping them out cut a lot of one-off CSS and meant both languages use the same building blocks.

• Login moved out of localStorage. The login token was kept in localStorage, where any script on the page can read it. I suggested a safer way and worked with the backend developer to move it to a token in an httpOnly cookie.

• Sliders built by hand. The chalet cards, photo galleries, and carousels use sliders I built. They work with a mouse, keyboard, and touch, and they scroll the right way round when the site is in Arabic.

• Loading placeholders. While the chalets, chalet pages, and calendar prices are loading, the site shows grey shapes that match the real content. Pages no longer sit blank and then jump about when the data turns up.

• Cleared out old code and reported bugs. I deleted dead code and leftover if-checks from the old language setup. As I went, I passed the bugs and backend problems I found to the backend developer, along with what I thought would fix them.