Pridelands

Website for safari tours across Africa

Creative mockup of Pridelands project design

Intro

Pridelands is a travel company that specializes in organizing exhilarating safari tours across the stunning continent of Africa. Their tours are designed for adventurous individuals who are eager to immerse themselves in the natural beauty and wildlife of Africa. With a wide range of tours available, customers can choose the best package that suits their preferences and budget. The tours vary in duration, ranging from a few days to several weeks, and offer different levels of adventure, from gentle treks to more extreme expeditions.

creative mockup of a project design

Features

I will focus on highlighting the core features implemented in the project.

Feature - Booking system

To implement the functionality for bookings, adding and managing tours from the CRM, I decided to use Supabase, a Backend as a Service (BaaS) that provides all the necessary tools for authentication and user management, as well as a relational database and data storage.

mockup showcasing the design of a Tour page with calendar to book the tour

Supabase was connected to the client’s CRM, enabling them to manage bookings, update tours, and edit availability, prices, descriptions, and images. All changes made are directly reflected on Supabase database and displayed on the website, ensuring that the website’s content is always up-to-date.

Feature - Authentication and users’ profiles

I integrated an Authentication feature into a website using Supabase. The users can now easily create their own accounts and effortlessly log in using their email addresses. As part of the registration process, a confirmation link is sent to the user’s email address to confirm their email adress and activate the account.

mockup showcasing the design of the authentication flow

In the user’s profile, all the necessary features have been implemented, including a responsive and accessible table to display booking history, a favorites tab that shows all saved tours, and the ability to edit and delete account.

mockup showcasing the design of the users profile

Design

The project I worked on involved creating a visual identity for a brand. To kick off the design process, I was provided with a logo and two brand colors to work with.

To ensure that the design was tailored to the target audience, I started by creating a user persona. This helped me understand the needs and preferences of the brand’s target audience, which in turn informed my design decisions throughout the project.

Throughout the design process, I utilized Figma and Photoshop to create designs that were visually stunning and effective. I primarily worked with imagery provided by the client. The color palette I used included savannah and earthy tones such as orange (evocative of savannah sunsets), blue (inspired by Victoria Falls), green, and brown for the font.

mockup showcasing the 4 images from which I took the inspiration for colors. Consists of photos of Victoria Falls, sunset on the savannah, group of elephants. mockup of the design showcasing the colors in the inteface

Optimizations

Accessibility

It is important to recognize that certain clients may not give priority to accessibility when developing their websites. However, it is imperative to keep in mind that the internet is a space that should be accessible to all. As a web developer, I make certain to prioritize accessibility in all my projects. This involves incorporating basic but vital approaches to make your project accessible for everyone on the web!

Performance

In the realm of web development, the loading speed of a website is a pivotal factor that determines the quality of user experience. While it may not always be the topmost priority, it is a best practice to optimize the website's speed during the development process. As a developer, I adhere to a set of guidelines that aid in achieving rapid loading speeds for every project undertaken.

SEO

Search engine optimization (SEO) is a critical aspect of web development that can significantly impact a website's success. As a developer, I take responsibility for the initial setup of SEO and making sure the website is ready for further ongoing SEO. While the process of achieving good SEO results, such as indexing on the top of search results, can take time, my expertise enables me to establish a solid foundation for the website's future success.

Responsiveness

In the today's world, more than 53%(and growing) of web users worldwide access the web through mobile devices. In light of this, it is important for every website to be mobile-friendly and responsive. To this end, I adhere to the mobile-first approach in the development process, ensuring that websites are designed and developed to perform smoothly on all devices and screen sizes.

Long story short - my goal is to deliver you a website which has this performance scores on Google Lighthouse: Google lighthouse 100 scores on every measured indicator

Do you wanna develop something for web?

Hire Me

Project's Tech Stack

html logo
css logo
javaScript logo
styledComponents logo
reactJS logo
reactRouter logo
git logo
gitHub logo
npm logo
vite logo
supabase logo
eSLint logo
prettier logo
netlify logo
figma logo
photoshop logo