Discover Crete

Kamil Janeczek
July 28, 2024
Next.js
JS Fullstack
Web dev
React
TypeScript

Objective

The goal of this project was to learn modern JavaScript technologies such as ES7, React and TypeScript.

Technologies

React
JavaScript
Next.js
Tailwind CSS
TypeScript
Prisma
Vercel
Postgres

Social share

Challenge

After a couple of years away from coding in JavaScript, I decided it was time to dive back into web development. My goal was to master modern JavaScript technologies such as ES7, React, and TypeScript.

From my experience, the best way to learn a new programming language or framework is by jumping straight into coding. While YouTube tutorials can be a great starting point (and I can certainly recommend a few!), it's crucial to start writing your own code as soon as possible. Tutorials can only take you so far; the real learning happens when you face the challenges of actual coding.

To put this into practice, I decided to tackle a real-world project: a customer-facing website for a small travel agency. This project included a booking system and a back-office portal for managing trips, bookings, and client data. It presented a genuine need for a functional application, making it an ideal learning experience.

Features of the Client-Facing Portal:

  • Responsive Design: Ensures the site works well on all devices.
  • Mobile-First Approach: Prioritizes mobile usability from the start.
  • Clean and Modern Look & Feel: Offers an aesthetically pleasing user experience.
  • Contact Form: Allows users to send messages directly to the site owners.
  • Trip Booking Self-Service: The most important part of the project, enabling users to book trips easily.

Features of the Back-Office Application:

  • Dashboard: Provides an overview of the most important information.
  • Client Records Management: Facilitates easy handling of client information.
  • Trip Management: Enables the addition, editing, and removal of trips.
  • Booking Management: Allows efficient handling of bookings.
  • Schedule View: Makes it easy to manage trip availability and existing bookings. Check out the live client-facing portal here: Discover Crete. You can also check recorded tour of client facing portal as well as back-office application

To know more about moder JavaScript and web tech stack visit Learning modern JS post.

Discover Crete - main page
Discover Crete - main page
Discover Crete - main page
Discover Crete - trip grid
Use can select trip
Discover Crete - trip grid
Discover Crete - trip details
Page showing trip details allows for booking.
Discover Crete - trip details
Discover Crete - booking view
Schedule view for selected trip is displayed allowing booking particular date.
Discover Crete - booking view
Discover Crete - booking form
Client can book trip after filling the form.
Discover Crete - booking form
Discover Crete - dashboard of back-office app
Dashboard presenting most important information
Discover Crete - dashboard of back-office app
Discover Crete - trips
Site owner can manage trips. Check trip details, edit it, delete trip or create new one.
Discover Crete - trips
Discover Crete - schedule view
Site owner can easily manage booking on month view
Discover Crete - schedule view

Releated Projects